After successfully creating a shape using ExtrudeGeometry with different top and bottom textures, I encountered an issue where adding holes to the shape caused the bottom side texture to mix up with the top side. This unexpected behavior has left me puzzled about what might be causing it.
Here is a comparison of the bottom side texture without and with holes:
Bottom side texture without holes Bottom side texture with holesIn my code snippet below, you can see that I used a for loop at the end to set different textures on the front and back sides of the shape. The approach was inspired by a helpful thread on Stack Overflow.
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 );