首页 > 代码库 > 创建、加载高级网格和几何体
创建、加载高级网格和几何体
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，这样呈现出来的效果比较好。呈现结果如下：
创建、加载高级网格和几何体