形状に穴を追加する際に3つのテクスチャが発生する

Question

異なる上部と下部のテクスチャでExtrudeGeometryを使用して図形を作成しました。形状に穴がなくても正しくレンダリングされています。シェイプに穴を追加すると、底辺のテクスチャが上辺と混ざってしまいます。 私は何が迷っているのか、間違っているのか分かりません。穴のない

下側のテクスチャ：穴付き

下側のテクスチャ：

誰かが問題を見つけることができる場合、これは私のコードの一部です。
私がコードの最後に使ったループは、図形の表と裏に異なるテクスチャを設定することです。私は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); 

Answer 1

Mateyに感謝します。彼がコメントで示唆したように、normal.z < -0.9を変更するだけで問題が解決され、なぜ彼はすでに言及しているのでしょうか。

の作業コード：

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