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