在Three.js中合并纹理网格

Question

我试图创建多个网格，然后将它们合并为一个（with Three.js r.71）。每个网格在不同的面上可以有不同的材质。我需要让所有的材料在结果网格上正确显示。

我找到了一种方法，以达到预期的结果，但是我的代码现在看起来很可怕。 three.js的开发人员是否真的记住了这个方法？

我找不到合适的例子。任何人都可以展示更好的方式来做到这一点？

var totalGeom = new THREE.Geometry(); 
var meshes = [getBlock(), getBlock()]; 
meshes[0].position.x = 1; 

for (var i = 0; i < meshes.length; i++) { 
    var mesh = meshes[i]; 
    totalGeom.mergeMesh(mesh); 
    for (var j = mesh.geometry.faces.length-1; j <= 0; j--) { 
     totalGeom.faces[j].materialIndex = mesh.geometry.faces[j].materialIndex; 
    } 
} 

var materials = meshes[0].material.materials.concat(meshes[1].material.materials); 
var totalMesh = new THREE.Mesh(totalGeom, new THREE.MeshFaceMaterial(materials)); 

scene.add(totalMesh); 


function getBlock() { 
    var geometry = new THREE.BoxGeometry(1, 1, 1, 1, 1, 1); 
    var material = new THREE.MeshFaceMaterial([ 
     new THREE.MeshPhongMaterial({map: THREE.ImageUtils.loadTexture('sides/2.png')}), 
     new THREE.MeshPhongMaterial({map: THREE.ImageUtils.loadTexture('sides/2.png')}), 
     new THREE.MeshPhongMaterial({map: THREE.ImageUtils.loadTexture('sides/1.png')}), 
     new THREE.MeshPhongMaterial({map: THREE.ImageUtils.loadTexture('sides/3.png')}), 
     new THREE.MeshPhongMaterial({map: THREE.ImageUtils.loadTexture('sides/2.png')}), 
     new THREE.MeshPhongMaterial({map: THREE.ImageUtils.loadTexture('sides/2.png')}) 
    ]); 
    return new THREE.Mesh(geometry, material); 
} 

Answer 1

我建议你不要混合一个内部的所有网格，而是创建一个包含所有不同网格的组。如果你这样做，你不需要混合所有的材料，你可以避免很多问题。而且，当然，你可以获得将所有网格物体放在同一个物体上的所有优点。

作为一个例子，这样做，请按照以下步骤：

var scene = new THREE.Scene(); 
var group = new THREE.Object3D(); 
var numObjects = 5; //As an example 

for(var i=0;i<numObjects;i++){ 
    var cubeGeometry = new THREE.BoxGeometry(100, 100, 100); 
    var material = new THREE.MeshPhongMaterial(); 
    var mesh = new THREE.Mesh(cubeGeometry, material); 
    group.add(mesh); 
} 

scene.add(group);