javascript - Three.js:ExtrudeGeometry:为正面和背面设置不同 Material 时出现问题

Question

我正在创建一个六边形形状的 ExtrudeGeometry 并尝试为正面和背面设置不同的 Material ，如 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

是否有另一种方法可以为正面和背面设置不同的 Material ，或者我这样做是错误的？

感谢您的帮助!

Answer 1

问题是由于舍入造成的。改为执行此操作

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

    face.materialIndex = 2;

}

此外，理论上背面法线为 (0, 0, - 1 )。

更新了 fiddle :https://jsfiddle.net/xhbu2e01/3/

三.js r.84