Different material on back and frontside of extruded shape

Question

I\'m trying to apply different material on front and back sides of extruded shape, but cannot figure out where to put side: THREE.FrontSide and side: THRE

Answer 1

Try using:

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

even though you should probably lower your ambient contribution and give a color to the FrontSide material.

Then:

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

Answer 2

After you create your mesh geometry, and before the first call to render(), you have to change the materialIndex to 2 for the back faces. Then, add a third material in your material array.

You can identify the back faces by their face normals. Face normals for faces on the back of the geometry should all point in the same direction.

three.js r.58