Javascript Threejs合并和复制材质，但渲染不正确

我想合并两个不同材质的网格

这就是我所做的，但渲染不正确，就像渲染对象的一侧一样

以下是我在codesandbox上的代码：

标题
让renderer=new THREE.WebGLRenderer（{antialas:true}）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
//场面
让场景=新的三个。场景（）；
scene.background=新的三种颜色（0xcce0ff）；
//摄像机
让摄像机=新的三视角摄像机(
75,
window.innerWidth/window.innerHeight，
1.
1000
);
摄像机位置设置（30,0,100）；
let controls=新的三个轨道控制（摄像头）；
for（设i=0；i<1；i++）{
//几何学
让立方体几何=新的三个平面几何（10,10,10）；
让cube2Geometry=新的三个平面几何体（10,15,5）；
//材料
让cube1材料=新的三网格标准材料({
颜色：0x7C3C，
粗糙度：1
});
让Cube2材质=新的3.0网格标准材质({
颜色：0x01b8ba，
粗糙度：0.1
});
//网孔
设cube1=新的三网格（cube1几何体，cube1材料）；
设cube2=new THREE.Mesh（cube2几何体，cube2材质）；
//结合
设singleGeometry=combine（[cube1，cube2]）；
设single=new THREE.Mesh（singleGeometry[
立方材料，
立方材料
]);
//场景。添加（立方体1）；
//场景。添加（立方体2）；
场景。添加（单个）；
单位置集合(
Math.random（）*5，
Math.random（）*10，
Math.random（）*20
);
}
函数合并（网格）{
让mergeometry=new THREE.Geometry（）；
for（设i=0；i

发生这种行为是因为

BoxGeometry

（）为每个属性规定了不同的

MaterialIndex

。这反过来控制了在使用材质阵列时，该面将使用哪种材质

要确保每个几何体仅使用阵列中的指定材质，需要为几何体的每个面将

MaterialIndex

重置为

0

。这样，

geometry.merge（）

将正确调整每个几何体以使用正确的材质

我已经修改了您的

合并

函数，以便在运行时执行此操作。我不确定是否有更好的方法重置

MaterialIndex

，至少我找不到

function combine(meshes) {

    let mergeGeometry = new THREE.Geometry();

    for (let i = 0; i < meshes.length; i++) {

      meshes[i].updateMatrix();

      // update materialIndex
      for ( let j = 0; j < meshes[i].geometry.faces.length; j++ ) {

        meshes[i].geometry.faces[j].materialIndex = 0;

      }

      mergeGeometry.merge( meshes[i].geometry, meshes[i].matrix, i );

    }

    return mergeGeometry;

}

函数组合（网格）{
让mergeometry=new THREE.Geometry（）；
for（设i=0；i

标题
身体{
保证金：0；
位置：固定；
}
帆布{
宽度：100%；
身高：100%；
显示：块；
}
让renderer=new THREE.WebGLRenderer（{antialas:true}）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
//场面
让场景=新的三个。场景（）；
scene.background=新的三种颜色（0xcce0ff）；
//摄像机
让摄像机=新的三视角摄像机(
75,
window.innerWidth/window.innerHeight，
1.
1000
);
摄像机位置设置（30,0,50）；
let controls=新的三个轨道控制（摄像头）；
//几何学
让cube1Geometry=新的三个.BoxGeometry（10,10,10）；
让cube2Geometry=新的三个.BoxGeometry（10,15,5）；
//材料
让cube1材料=新的三网格标准材料({
颜色：0x7C3C，
粗糙度：1
});
让Cube2材质=新的3.0网格标准材质({
颜色：0x01b8ba，
粗糙度：0.1
});
//网孔
设cube1=新的三网格（cube1几何体，cube1材料）；
设cube2=new THREE.Mesh（cube2几何体，cube2材质）；
//结合
设singleGeometry=combine（[cube1，cube2]）；
设single=new THREE.Mesh（singleGeometry[
立方材料，
立方材料
]);
场景。添加（单个）；
函数合并（网格）{
让mergeometry=new THREE.Geometry（）；
for（设i=0；i