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: THREE.BackSide. Where they should be putted?

My relevant code part is:

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: According to WestLangley's comment I succeeded in adding the different texture to 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;
}

THREE.FrontSide refers to the front side of a face, not the front side of a mesh or shape. What is not working, exactly? — WestLangley
Using the above code, when I look the mesh from backside, the materialFront is also there. I'd want to add a different material on the backside of the mesh, like the dice cube in stemkoski.github.io/Three.js/Textures.html. — Timo Kähkönen
In the three.js source there is "material: <int> // material index for front and back faces". This seems to mean that the front and back faces cannot have different materials, because they have only one index. This is the core of the problem. I should be able to use one index for back and one index for front. — Timo Kähkönen
It is what it is. You have to follow the instructions in my answer and change the material index for all faces that are on the back side of your geometry. — WestLangley

WestLangley WestLangley · Accepted Answer · 2013-05-10T15:50:02

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

Different material on back and frontside of extruded shape

2 Answers