Threejs texture issue while adding hole into the shape
<p>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.</p>

<p>Bottom side texture without holes:
<a href="https://i.stack.imgur.com/I3Qn4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/I3Qn4.png" alt="enter image description here"></a></p>

<p>Bottom side texture with holes:
<a href="https://i.stack.imgur.com/f6NCf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f6NCf.png" alt="enter image description here"></a></p>

<p>This is piece of my code if someone can find an issue. <br/>
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 <a href="https://stackoverflow.com/questions/16484835/different-material-on-back-and-frontside-of-extruded-shape">stackoverflow</a>.</p>

<pre><code>this.group = new THREE.Group();
this.scene.add( this.group );       

for(i=0; i &lt; 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 );
</code></pre>