如何在Three.js形状几何中添加正面和背面纹理？

Question

I'm creating a flat shape geometry with rounded corners. Here's a part of my code.

    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));

This codes only load the front side and renders invisible on back side. After few hours of googling I can't find how to add materialIndex on current Three.js version r78.

I suspect that I just need to add material index on this problem.

Answer 1

If you want to create a flat shape that has a different material on the front and the back, you can use this pattern:

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 );

Study the source code of SceneUtils so you understand what it is doing.

three.js r.78