Question

我正在尝试创建多个网格，然后将它们合并为一个（使用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);

合并Three.js中的纹理网格

1 个答案: