押し出し形状の裏側と裏側に異なる材料

Question

押し出し形状の表側と裏側に異なる材料を適用しようとしていますが、side: THREE.FrontSideとside: THREE.BackSideをどこに入れるのか分かりません。彼らはどこに置くべきですか？

私の関連するコードの一部は次のとおりです。

 
var materialFront = new THREE.MeshPhongMaterial({ ambient: 0xffffff, map: frontTexture }); 

var materialSide = new THREE.MeshPhongMaterial({color: 0xE68A00, ambient: 0xffffff}); 

var extrusionSettings = { 
      amount: 10, 
      bevelEnabled: false, 
      bevelThickness: 0.2, 
      bevelSize: 0.2, 
      bevelSegments: 8, 
      material: 0, 
      extrudeMaterial: 1 
}; 

var geometry = new THREE.ExtrudeGeometry(shapes, extrusionSettings); 

var materials = [materialFront, materialSide]; 

var material = new THREE.MeshFaceMaterial(materials); 

mesh = new THREE.Mesh(geometry, material); 

---

UPDATE： WestLangleyさんのコメントによると、私はbackfacesに異なるテクスチャを追加することに成功しました：

 
// ... 
var materials = [materialFront, materialSide, materialBack]; 
// ... 
for (var face in mesh.geometry.faces) { 
if (mesh.geometry.faces[ face ].normal.z == 1) mesh.geometry.faces[ face ].materialIndex = 2; 
} 

Answer 1

あなたがメッシュジオメトリを作成した後

、およびrender()への最初の呼び出しの前に、あなたは、バックフェースのためmaterialIndex 2を変更する必要があります。次に、マテリアル配列に3番目のマテリアルを追加します。

背面の顔を顔の法線で識別することができます。ジオメトリの背面にある面の法線は、すべて同じ方向を向いている必要があります。 r.58

Answer 2

は、使用してみてください：

var materialFront = new THREE.MeshPhongMaterial({ ambient: 0xffffff, map: frontTexture, side: THREE.FrontSide }); 
var materialSide = new THREE.MeshPhongMaterial({ color: 0xE68A00, ambient: 0xffffff, side: THREE.BackSide }); 

を使用してください。おそらく周囲寄与度を下げて、FrontSide資料にcolorを与えるべきです。その後

：

var materials = [materialFront, materialSide]; 
scene.add(THREE.SceneUtils.createMultiMaterialObject(geometry, materials));