Three.JS提升学习5：从外部加载几何体

Posted 2022-06-28 编程圈

本文学习资源来自《Three.js 开发指南：WebGL的javascript 3D库》

从外部加载几体体

---

支持的三维格式

Three.js 可以读取几种三维文件格式，并从中导入几体体和网格，支持的文件格式有：

格式	描述
JSON	Three.js自己的JSON文件格式
OBJ或MTL	OBJ是一种简单的三维文件格式，由Wavefront Technologies创建。它是使用最广泛的三维文件格式，用来定义对象的几体体。MTL文件常同OBJ文件一起使用。在一个MTL文件中，用OBJ文件定义对象的材质 Three.js还有一个可定制的OBJ导出器，叫作OBJExporter.js，可以用来将Three.js中的模型导出到一个OBJ文件。
Collada	一种用基于XML的格式定义的数字内容的格式，也是一种被广泛使用的格式。
STL	STereoLithphy 立体成型术 的缩写，广泛用于快速成型。如三维打印机的模型文件通常是STL文件。Three.js还有一个可定制的STL导出器，叫作STLExporter.js，可以用来将Three.js中的模型导出到一个STL文件。
CTM	由openCTM一种文件格式
VTK	Visualization Toolkit创建一种文件格式，用来指定顶点和面。
AWD	一种用于三维场景的二进制格式，通常与​​http://away3d.com​​ 引擎一起使用。这个加载程序不支持压缩的AWD文件。
Assimp	Open asset import library （也称为 Assimp ） 是一种导入各种三维模型格式的标准方法。
VRML	Virtual Reality Modeling Language的缩写
Babylon	是一个三维JavaScript游戏库
PDB	由Protein Data bank创建，用于定义蛋白质的形状。
PLY	这种格式的全称是多边形（Polygon）文件格式，通常用来保存三维扫描仪的信息

以Three.js的JSON格式保存和加载

保存和加载THREE.Mesh

this.save = function () 
                var result = knot.toJSON();
                localStorage.setItem("json", JSON.stringify(result));
            ;

            this.load = function () 

                scene.remove(loadedMesh);

                var json = localStorage.getItem("json");

                if (json) 
                    var loadedGeometry = JSON.parse(json);
                    var loader = new THREE.ObjectLoader();

                    loadedMesh = loader.parse(loadedGeometry);
                    loadedMesh.position.x -= 50;
                    scene.add(loadedMesh);
                
            

这里将THREE.Mesh导出为JSON，并保存到了localStorage里。

保存和加载场景

需要加载库：

<script type="text/javascript" src="../libs/SceneLoader.js"></script>
<script type="text/javascript" src="../libs/SceneExporter.js"></script>

this.exportScene = function () 
                var exporter = new THREE.SceneExporter();
                var sceneJson = JSON.stringify(exporter.parse(scene));
                localStorage.setItem(scene, sceneJson);
            ;

            this.clearScene = function () 
                scene = new THREE.Scene();
            ;

            this.importScene = function () 
                var json = (localStorage.getItem(scene));
                var sceneLoader = new THREE.SceneLoader();

                sceneLoader.parse(JSON.parse(json), function (e) 
                    scene = e.scene;
                , .);
            

使用 Blender

要从Blender中导出Three.js醋，首先要将Three.js导出器添加到Blender中。这里省略该部分内容，可参考《Three.js开发指南》 P165 页的介绍。
导出的js大概是这样的：

材质：

Three.js加载模型：

var loader = new THREE.JSONLoader();
        loader.load(../assets/models/misc_chair01.js, function (geometry, mat) 
            mesh = new THREE.Mesh(geometry, mat[0]);

            mesh.scale.x = 15;
            mesh.scale.y = 15;
            mesh.scale.z = 15;

            scene.add(mesh);

        , ../assets/models/);

运行效果：

导入三维格式

导入这些三维格式都需要引入额外的js文件。

OBJ和MTL

引入js

<script type="text/javascript" src="../libs/OBJLoader.js"></script>

导入模型再赋予材质的代码：

var loader = new THREE.OBJLoader();
        loader.load(../assets/models/pinecone.obj, function (loadedMesh) 
            var material = new THREE.MeshLambertMaterial(color: 0x5C3A21);

            // loadedMesh is a group of meshes. For
            // each mesh set the material, and compute the information
            // three.js needs for rendering.
            loadedMesh.children.forEach(function (child) 
                child.material = material;
                child.geometry.computeFaceNormals();
                child.geometry.computeVertexNormals();
            );

            mesh = loadedMesh;
            loadedMesh.scale.set(100, 100, 100);
            loadedMesh.rotation.x = -0.3;
            scene.add(loadedMesh);
        );

运行示例：

下面的示例是加载模型并直接赋予材质：

<!--引入js：-->
    <script type="text/javascript" src="../libs/OBJLoader.js"></script>
    <script type="text/javascript" src="../libs/MTLLoader.js"></script>
    <script type="text/javascript" src="../libs/OBJMTLLoader.js"></script>
        var loader = new THREE.OBJMTLLoader();

        loader.load(../assets/models/butterfly.obj, ../assets/models/butterfly.mtl, function (object) 

            // configure the wings
            var wing2 = object.children[5].children[0];
            var wing1 = object.children[4].children[0];

            wing1.material.opacity = 0.6;
            wing1.material.transparent = true;
            wing1.material.depthTest = false;
            wing1.material.side = THREE.DoubleSide;

            wing2.material.opacity = 0.6;
            wing2.material.depthTest = false;
            wing2.material.transparent = true;
            wing2.material.side = THREE.DoubleSide;

            object.scale.set(140, 140, 140);
            mesh = object;
            scene.add(mesh);

            object.rotation.x = 0.2;
            object.rotation.y = -1.3;
        );

加载Collada模型（扩展名为.dae）

<!--引入 js-->

    <script type="text/javascript" src="../libs/ColladaLoader.js"></script>

<!--加载模型-->
        var loader = new THREE.ColladaLoader();

        var mesh;
        loader.load("../assets/models/dae/Truck_dae.dae", function (result) 
            mesh = result.scene.children[0].children[0].clone();
            mesh.scale.set(4, 4, 4);
            scene.add(mesh);
        );

效果：

加载STL、CTM、VTK、AWD、Assimp、VRML和Babylon模型

类似上面的方式，省略相关内容。