在形状中添加孔时 Threejs 纹理问题 [英] Threejs texture issue while adding hole into the shape
问题描述
我使用具有不同顶部和底部纹理的 ExtrudeGeometry 创建了形状.它在形状上没有孔的情况下正确渲染.如果我在形状中添加孔,底部纹理与顶部混合.我不知道我错过了什么或做错了什么.
I have created shape using ExtrudeGeometry with different top and bottom texture. It is rendering correctly without holes into the shape. If I add holes into the shape, the bottom side texture mixed up with top side. I have no idea what I am missing or doing wrong.
底部无孔纹理:
底部带孔纹理:
如果有人能找到问题,这是我的一段代码.
我在代码末尾使用的for循环是在形状的正面和背面设置不同的纹理.我从 stackoverflow 得到了它的参考.>
This is piece of my code if someone can find an issue.
For loop that I have used in the end of code is to set different texture on front and back side of the shape. I got reference for it from 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 );
推荐答案
感谢 Matey.正如他在评论中建议的那样,只需更改 normal.z <-0.9 解决了这个问题,为什么他已经提到了.
Thanks to Matey. As he suggested in comment just changing normal.z < -0.9 solves the issue and why is that he has already mentioned.
工作代码:
for ( var face in mesh.geometry.faces ) {
if (mesh.geometry.faces[ face ].normal.< -0.9) {
mesh.geometry.faces[ face ].materialIndex = 5;
}
}
这篇关于在形状中添加孔时 Threejs 纹理问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!