Threejs texture issue while adding hole into the shape

Question

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.

Bottom side texture without holes:

Bottom side texture with holes:

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 );

Could you check if replacing the normal.z == -1 test with a more numerically stable test, e.g. normal.z < -0.9 helps? Introducing holes into the geometry causes a massive tessellation and some newly generated triangles might have their normal vectors not perfectly aligned with z=-1 direction. — Matey
– Matey, Commented Oct 13, 2016 at 15:17

Priyank · Accepted Answer · 2016-10-14 05:43:38Z

0

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.

Working code:

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

answered Oct 14, 2016 at 5:43

Priyank

1,17412 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Threejs texture issue while adding hole into the shape

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related