Unterschiedliches Material auf der Rückseite und Vorderseite der extrudierten Form

Question

Ich versuche, verschiedene Material auf Vorder-und Rückseite der extrudierten Form anwenden, aber nicht herausfinden, wo side: THREE.FrontSide und side: THREE.BackSide setzen. Wo sollten sie putten?

Mein entsprechenden Code-Teil ist:

 
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:

 
// ... 
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

Nachdem Sie Ihre Netzgeometrie erstellen, und vor dem ersten Aufruf-render(), müssen Sie die materialIndex bis 2 für die Rückseiten ändern. Fügen Sie dann ein drittes Material in Ihrem Materialarray hinzu.

Sie können die Rückseiten anhand ihrer Flächennormalen identifizieren. Flächennormalen für Flächen auf der Rückseite der Geometrie sollten alle in die gleiche Richtung zeigen.

Three.js r.58

Answer 2

Versuchen Sie es mit: Nach WestLangley Kommentar ich in Hinzufügen der andere Textur zu Rückseiten gelang

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

sollten Sie Ihren Umgebungsbeitrag wahrscheinlich senken und dem FrontSide-Material einen color geben.

Dann:

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