Wie fügen Sie Front- und Back-Texturen in Three.js Shape Geometry hinzu?

Question

Ich erstelle eine flache Geometrie mit abgerundeten Ecken. Hier ist ein Teil meines Codes.

var geometry = new THREE.ShapeGeometry(shape); 
    var front_material = new THREE.MeshPhongMaterial({ map: frontTexture, side: THREE.FrontSide }); 
    var back_material = new THREE.MeshPhongMaterial({ map: backTexture, side: THREE.BackSide }); 
    var materials = [front_material, back_material]; 
    mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials)); 

Diese Codes laden nur die Vorderseite und werden auf der Rückseite unsichtbar. Nach einigen Stunden Googeln kann ich nicht finden, wie man MaterialIndex auf der aktuellen Three.js Version r78 hinzufügt.

Ich vermute, dass ich nur Materialindex für dieses Problem hinzufügen muss.

Answer 1

Wenn Sie eine flache Form erstellen möchten, die ein anderes Material auf der Vorder- und der Rückseite hat, können Sie diese Muster verwenden:

var geometry = new THREE.ShapeGeometry(shape); 

var frontMaterial = new THREE.MeshPhongMaterial({ map: frontTexture, side: THREE.FrontSide }); 
var backMaterial = new THREE.MeshPhongMaterial({ map: backTexture, side: THREE.BackSide }); 

var materials = [ frontMaterial, backMaterial ]; 

var object = THREE.SceneUtils.createMultiMaterialObject(geometry, materials); 

scene.add(object); 

Studie der Quellcode SceneUtils Sie so verstehen, was es tut, .

three.js r.78