javascript - Three.js:ExtrudeGeometry:设置正面和背面不同 Material 的问题

我正在创建一个六边形形状的ExtrudeGeometry，并尝试为正面和背面设置不同的材料，如this thread中所述。

let shape = new THREE.Shape();
/*...*/

let geometry = new THREE.ExtrudeGeometry(shape, {
    steps: 2,
    amount: 0.05,
    bevelEnabled: false,
    material: 0,                //frontMaterial = green
    extrudeMaterial: 1          //sideMaterial  = gray
});

//Searching for the back side and setting the marialIndex accordingly
for (let face of geometry.faces) {
    if (face.normal.z == 1) {
        face.materialIndex = 2; //backMaterial  = red
    }
}

let mesh = new THREE.Mesh(geometry, new THREE.MultiMaterial([frontMaterial, sideMaterial, backMaterial]));

现在的问题是，该方法（遍历面孔并使用normal.z == 1查找那些对象）不适用于extrudeGeometry.amount = 0.05。值0.1可以正常工作。



See this jsfiddle

是否有另一种方法可以为正面和背面设置不同的材质，或者我做错了吗？

谢谢你的帮助！

最佳答案

问题是由于四舍五入。改为这样做

if ( face.normal.z < - 0.99999 ) { // instead of == - 1

    face.materialIndex = 2;

}

而且，背面法线理论上是（0，0，-1）。

更新的小提琴：https://jsfiddle.net/xhbu2e01/3/

three.js r.84