Three.js：ExtrudeGeometry：为正面和背面设置不同材料的问题答案

【问题标题】：Three.js: ExtrudeGeometry: Problems setting different material for front and back sideThree.js：ExtrudeGeometry：为正面和背面设置不同材料的问题
【发布时间】：2017-08-26 05:29:03
【问题描述】：

我正在创建一个六边形的 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

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

感谢您的帮助！

【问题讨论】：

提示：AmbientLight 不应该像您在小提琴中设置的那样明亮。将强度设置为 0.2 并添加，例如，DirectionalLight 到场景 - 或 PointLight 到相机。或者直接使用MeshBasicMaterial，它不响应灯光。
感谢@WestLangley 的提示。在我的真实应用中，我有一个 0.1 的 abientLight、一个 0.5 的 directionalLight 和一个 0.8 的 pointLight，但我真的不是闪电专家 ^^'

标签： javascript three.js

【解决方案1】：

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

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

    face.materialIndex = 2;

}

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

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

three.js r.84

【讨论】：

可以如此合乎逻辑和简单。谢谢！