Threejs纹理问题，同时将孔添加到形状中

我已经使用具有不同顶部和底部纹理的ExtrudeGeometry创建了形状。它正确地呈现没有洞的形状。如果我在这个形状中添加了一些孔，那么底部的纹理会与顶部混合在一起。我不知道我失踪或做错了什么。Threejs纹理问题，同时将孔添加到形状中

底侧质地无孔：

底面纹理孔：

这是一张我的代码，如果有人能找到一个问题。
我在代码的最后使用的循环是在形状的正面和背面设置不同的纹理。我从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);

来源

2016-10-13 Priyank

你能检查是否更换'normal.z == -1'测试用更稳定的数值测试，例如'normal.z <-0.9'有帮助吗？将几何图形引入到几何体中会导致大量镶嵌，并且一些新生成的三角形的法向矢量可能不完全与z = -1方向对齐。 – Matey

感谢Matey。正如他在评论中所建议的，只是改变了正常。解决了这个问题，为什么他已经提到过。

工作代码：

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

来源

2016-10-14 05:43:38 Priyank

Threejs纹理问题，同时将孔添加到形状中

回答

相关问题