Threejs纹理问题，同时在形状中添加孔答案

【问题标题】：Threejs texture issue while adding hole into the shapeThreejs纹理问题，同时在形状中添加孔
【发布时间】：2017-02-22 16:47:19
【问题描述】：

我使用 ExtrudeGeometry 创建了具有不同顶部和底部纹理的形状。它可以正确渲染，形状中没有孔。如果我在形状中添加孔，则底部纹理与顶部混合。我不知道我错过了什么或做错了什么。

没有孔的底部纹理：

带孔的底部纹理：

如果有人能找到问题，这是我的一段代码。
我在代码末尾使用的 for 循环是在形状的正面和背面设置不同的纹理。我从stackoverflow得到了它的参考。

this.group = new THREE.Group();
this.scene.add( this.group );       

for(i=0; i < boardDrill.length; i++) {
    boardShape.holes.push(boardDrill[i]);
}

var extrudeSettings = { amount: 1, bevelEnabled: false, material: 0, extrudeMaterial: 1};

var geometry = new THREE.ExtrudeGeometry( boardShape, extrudeSettings );

var textureLoader1 = new THREE.TextureLoader();
var topTexture = textureLoader1.load(this.boardData.topImage);
topTexture.repeat.set(1/boardWidth, 1/boardHeight);

var textureLoader2 = new THREE.TextureLoader();
var bottomTexture = textureLoader2.load(this.boardData.bottomImage);
bottomTexture.repeat.set(1/boardWidth, 1/boardHeight);

var frontMaterial = new THREE.MeshPhongMaterial({ map : topTexture});
var backMaterial = new THREE.MeshPhongMaterial({ map : bottomTexture });
var sideMaterial = new THREE.MeshPhongMaterial({ color: 0x00cc00 });

var materials = [frontMaterial, sideMaterial, sideMaterial, sideMaterial, sideMaterial, backMaterial];
var material = new THREE.MeshFaceMaterial( materials );

var mesh = new THREE.Mesh( geometry, material );                        

for ( var face in mesh.geometry.faces ) {
    if (mesh.geometry.faces[ face ].normal.z == -1) {                   
        mesh.geometry.faces[ face ].materialIndex = 5;
    }
}


this.group.add( mesh );

【问题讨论】：

您能否检查一下是否将 normal.z == -1 测试替换为数值更稳定的测试，例如normal.z < -0.9 有帮助吗？在几何体中引入孔会导致大量细分，并且一些新生成的三角形的法线向量可能与 z=-1 方向不完全对齐。

标签： javascript three.js

【解决方案1】：

感谢马蒂。正如他在评论中建议的那样，只需更改 normal.z

工作代码：

for ( var face in mesh.geometry.faces ) {
    if (mesh.geometry.faces[ face ].normal.< -0.9) {                   
        mesh.geometry.faces[ face ].materialIndex = 5;
    }
}

【讨论】：