创建加载高级网格和几何体

Posted 2020-09-14 Heavi的博客

1.对象合并

    使用THREE.Group对象作为组合对象，调用它的add函数附加其他几何体。如下面的代码，创建了两个几何体sphere、cube，然后调用group的add函数，把两个几何体组合在一起。代码中的redraw函数在最后调用了position.BoundingBox()函数，用来定位组合体对象的位置。在positionBoundingBox函数中调用了setFromeObject并且返回了一个THREE.Box3对象。这里先不介绍这个对象，直接看后面的代码，通过box.max和box.min的两个位置对象，计算出了BoxGeometry的width、height、depth。最后也通过这两个位置对象计算出bboxMesh的position值。

this.redraw = function () {
                scene.remove(group);

                sphere = createMesh(new THREE.SphereGeometry(5, 10, 10));
                cube = createMesh(new THREE.CubeGeometry(6, 6, 6));

                sphere.position.set(controls.spherePosX, controls.spherePosY, controls.spherePosZ);
                cube.position.set(controls.cubePosX, controls.cubePosY, controls.cubePosZ);

                group = new THREE.Group();
                group.add(sphere);
                group.add(cube);

                scene.add(group);
                controls.positionBoundingBox();

                var arrow = new THREE.ArrowHelper(new THREE.Vector3(0, 1, 0), group.position, 10, 0x0000ff);
                scene.add(arrow);
            };

            this.positionBoundingBox = function () {
                scene.remove(bboxMesh);
                var box = setFromObject(group);
                var width = box.max.x - box.min.x;
                var height = box.max.y - box.max.y;
                var depth = box.max.z - box.min.z;

                var bbox = new THREE.BoxGeometry(width, height, depth);
                bboxMesh = new THREE.Mesh(bbox, new THREE.MeshBasicMaterial({
                    color: 0x000000,
                    vertexColors: THREE.VertexColors,
                    wireframeLinewidth: 2,
                    wireframe: true
                }));

                bboxMesh.position.x = ((box.min.x + box.max.x)/2);
                bboxMesh.position.y = ((box.min.y + box.max.y)/2);
                bboxMesh.position.z = ((box.min.z + box.max.z)/2);
            }

    接下来再继续看看setFromObject函数的定义，如下：

function setFromObject(object) {
            var box = new THREE.Box3();
            var v1 = new THREE.Vector3();
            object.updateMatrixWorld(true);
            box.makeEmpty();
            object.traverse(function (node) {
                if (node.geometry !== undefined && node.geometry.vertices !== undefined) {
                    var vertices = node.geometry.vertices;
                    for (var i = 0, il = vertices.length; i < il; i++) {
                        v1.copy(vertices[i]);
                        v1.applyMatrix4(node.matrixWorld);
                        box.expandByPoint(v1);
                    }
                }
            });
            return box;
        }

    首先生命了一个Box3对象，主要用来计算网格的边界。更新Group对象的世界坐标，然后调用makeEmpty函数清空盒子。接下来遍历object对象的子对象，获取子对象的所有顶点并遍历。把这些顶点全都扩展到box中。这样我们就能获取整个组合体的边界了。

2.将多个网格合并到一个网格

    多数情况下使用组可以很容器操作和管理大量网格。但是当对象的数量非常多时，性能就会成为一个瓶颈。在组里每个对象还是独立的，需要对它们分别进行处理和渲染。但通过Geometry的merge函数，可以把多个几何体合并，创建一个联合体。实现代码如下：

this.redraw = function () {
                var toRemove = [];
                scene.traverse(function(e){
                    if(e instanceof THREE.Mesh) toRemove.push(e);
                });

                toRemove.forEach(function(e){
                    scene.remove(e);
                });

                if(controls.combined){
                    var geometry = new THREE.Geometry();
                    for(var i = 0; i < controls.numberOfObjects; i++){
                        var cubeMesh = addcube();
                        cubeMesh.updateMatrix();
                        geometry.merge(cubeMesh.geometry, cubeMesh.matrix);
                    }
                    scene.add(new THREE.Mesh(geometry, cubeMaterial));
                }else{
                    for(var i = 0; i < controls.numberOfObjects; i++){
                        scene.add(controls.addCube());
                    }
                }
            };

    代码会根据controls.numberofObjects的值来确定创建多少个几何体。如果controls.combined为true，那么我们就使用Geometry的merge函数把numberofObjects数量的几何体合并到一个联合体中。和和直接创建numberofObjects的几何体相比，性能有很大提升。但缺点是不能分别操作每个几何体了。

3.three.js支持加载的文件格式

    Three.js可以读取几种三维文件格式，并从中导入结合体和网格。下面所列的就是Three.js支持的文件格式：

    JSON/是three.js自己的json文件格式，你可以用它以生命的方式定义几何体和场景。但不是一种正是格式。它很容易使用，当你想要复用复杂的几何体或场景时非常有用

    OBJ和MTL/OBJ是一种简单的三维文件格式。它是使用最广泛的三维文件格式，用来定义对象的几何体。MTL文件常同OBJ文件一起使用，在MTL文件中，对象的材质定义在OBJ文件中

    Collada/是一种用来定义Xmzl类文件中数字内容的格式。这也是被广泛使用的格式，差不多所有的三维软件和渲染引擎都支持这种格式

    STL/STL是StereoLithography（立体成型术）的缩写，广泛于快速成型。例如三维打印机的模型文件通常是STL文件

    CTM/使用openCTM创建的文件格式，用来压缩存储表示三维网络的三角形面片

    VTK/是由Visualization Toolkit定义的文件格式，用来指定顶点和面。VTK有两种格式，Three.js支持旧的，即ASCII格式

    PDB/这是一种非常特别的格式，由Protein Databank创建，用来定义蛋白质的形状。Three.js可以加载并显示用这种格式描述蛋白质

    PLY/该格式全称为多边形文件格式。通常用来保存三维扫描仪的数据

4.保存和加载几何体

    几何体对象提供了toJSON函数，可以直接把几何数据持久化为JSOn格式。我们可以直接把toJSON的结果通过localStorage缓存起来。要加载时候直接读取localStrorage获取json字符串。加载可以使用THREE.ObjectLoader对象的parse函数把字符串转换为网格对象。代码如下：

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);
                }
            }

5.保存和加载场景

    想要导出和导入场景，必须要引入SceneExporter.js和SceneLoader.js文件，可以使用THREE.SceneExporter对象的parse函数把scene格式化成json对象。代码如下：

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

    下一次我们就可以直接使用保存到localStorage的json数据加载场景。加载场景数据使用THREE.SceneLoader的parse函数。代码如下：

this.importScene = function(){
                var json = (localStorage.getItem("scene"));
                var sceneLoader = new THREE.SceneLoader();
                sceneLoader.parse(JSON.parse(json), function (e) {
                    scene = e.scene;
                }, \'.\');
            }

    传递给loader的最后一个参数(“.”)是一个URL相对地址。例如，在材质中使用的纹理就可以从这个相对地址中获取。在导入之前我们需要清理场景，直接重新创建一个场景即可。

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

6.在blender里使用three.js插件导出json格式模型

    Blender中可以安装Three.js导出器插件。插件的具体安装方法这里不做介绍。这里主要介绍如何加载通过blender导出的json模型。加载的代码也很简单，直接使用three.js内部的JSONLoader对象即可。代码如下：

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/");

    load函数包含三个参数，第一个指定json格式数据地址，这里是把json数据放到js文件中了。第二个参数是加载后的回调函数，该函数包含geometry和mat两个参数。第三个参数指定了json数据中可以依赖的外部文件（例如一个图片）的相对地址。如果没有外部依赖可以设置为“.”。

7.加载加载OBJ文件而不加载MTL文件

    首选需要引入three.js扩展库OBJLoader.js文件，用来加载OBJ文件。加载代码如下所示：

var loader = new THREE.OBJLoader();
        loader.load("../assets/models/pinecone.obj", function(loadedMesh){
            var material = new THREE.MeshLambertMaterial({
                color: 0x5c3a21
            });
            loadedMesh.children.forEach(function(child){
               child.material = material;
                child.geometry.computeFaceNormals();
                child.geometry.computeVertexNormals();

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

    代码先实例化一个OBJLoader对象，然后调用load函数加载OBJ文件。load函数包含参数为load(url, callback)，url是OBJ文件路径，当加载完成后会调用第二个回调函数，包含一个参数loadedMesh。loadedMesh是一个组合体，所有需要遍历它下面的每个网格。child就是一个网格，需要设置它的material属性，并分别调用computeFaceNromals和computeVertexNormals函数，计算出几何体的法向量。加载出来的网格可能尺寸比较小，所以需要设置scale放大。   

8.同时加载OBJ和MTL

    如果需要同时加载几何体和纹理，需要引入三个js文件，它们分别是加载器：OBJLoader、MTLLoader、OBJMTLLoader。首先实例化一个OBJMTLLoader对象，然后调用load函数。load函数包含三个参数，load(objUrl, mtlUrl, callbac)。下面是加载OBJ和TML的代码：

var loader = new THREE.OBJMTLLoader();
        loader.load("../assets/models/butterfly.obj", "../assets/models/butterfly.mtl", function(object){
            var wing1 = object.children[4].children[0];
            var wing2 = object.children[5].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.transparent = true;
            wing2.material.depthTest = false;
            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;
        });

    回调函数返回了一个object对象，object本身就是一个网格对象，可以直接附加到场景中。但有时候在加载模式时由于材质兼容性问题，需要手动调整下。上面代码就是获取了两个翅膀wing1和wing2，并设置了一些属性，让翅膀能够正常显示出来。

9.加载Collada模型

    Collda模型（文件扩展名是.dae）是另外一种非常通用的、定义场景和模型（以及动画）的文件格式。Collada不仅定义了几何体，有定义了材质。甚至还可以定义光源。

    加载Collada和加载OBJ、MTL模型步骤一样。首先需要引入ColladaLoader.js文件。加载代码如下：

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 = result.scene.children[0];
            mesh.scale.set(4, 4, 4);
            scene.add(mesh);
        });

    首先创建一个ColladaLoader加载器，调用load函数，传入模型文件地址。第二个参数是一个回调函数，result是加载的结果。其中包含了scene属性。这里result.scene.children[0].children[0]是根据实际情况加载了某一个网格对象。具体的加载要根据实际的模型文件而定。例如本例我们只加载了模型文件中的一部卡车。

10.使用外部模型创建粒子系统

    这里我们使用PLY外部模型。PLY和其他模型加载相似，首先需要引入加载器PLYLoader.js文件，然后调用load函数加载模型。这里我们主要看下如何创建粒子系统。代码如下：

var loader = new THREE.PLYLoader();
        loader.load("../assets/models/test.ply", function(geometry){
            var material = new THREE.PointCloudMaterial({
                color: 0xffffff,
                size: 0.4,
                opacity: 0.6,
                transparent: true,
                blending: THREE.AdditiveBlending,
                map: generateSprite()
            });
            group = new THREE.PointCloud(geometry, material);
            group.sortParticles = true;
            scene.add(group);
        });

        render();

        function generateSprite(){
            var canvas = document.createElement("canvas");
            canvas.width = 16;
            canvas.height = 16;
            var context = canvas.getContext("2d");
            var gradient = context.createRadialGradient(canvas.width/2, canvas.height/2, 0, canvas.width/2, canvas.height/2, canvas.width/2);
            gradient.addColorStop(0, "rgba(255, 255, 255, 1)");
            gradient.addColorStop(0.2, "rgba(0, 255, 255, 1)");
            gradient.addColorStop(0.4, "rgba(0, 0, 64, 1)");
            gradient.addColorStop(1, "rgba(0, 0, 0, 1)");

            context.fillStyle = gradient;
            context.fillRect(0, 0, canvas.width, canvas.height);

            var texture = new THREE.Texture(canvas);
            texture.needsUpdate = true;
            return texture;
        }

    这里我们没有修改加载的结果geometry。显示使用PointCloudMaterial创建粒子材质，材质指定了map属性，map属性调用generateSprite函数，生成一个纹理。generateSprite函数使用canvas画板绘制了一个由内向外渐变的效果，并把这个canvas直接传递给Texture构造函数。最后使用PointCloud创建粒子系统。需要强调的是设置sortParticles为true，这样呈现出来的效果比较好。呈现结果如下：