Materials and Textures - Three.js - page 181

var sphereGeometry = new
THREE.SphereGeometry(3, 10, 10);
2. When we create the material in step 3, we provide an array of materials that
we want to use. Additionally, we need to specify on each face the material
from the array we'll use. You can do this with the following code:
var materials = [];
var count = 0;
sphereGeometry.faces.forEach(function(face)
{
face.materialIndex = count++;
var material = new
THREE.MeshBasicMaterial(
{color:Math.abs(Math.sin(count/
70))*0xff0000});
material.side = THREE.DoubleSide;
if (count % 2 == 0) {
material.transparent = true;
material.opacity = 0.4;
}
materials.push(material);
});
In this code snippet, we traverse all the faces of the geometry we created.
For each face, we set the materialIndex property to the index of the ma-
terial we want to use. We also create a unique material object for each
face in this code snippet, make half of them transparent, and finally, push the
materials we create into the materials array.
3. At this point, the materials array contains a unique material for each face
of the geometry, and for all the faces, the materialIndex property points
to one of the materials in that array. Now, we can create
THREE.MeshFaceMaterial object and together with the geometry, we can
create THREE.Mesh :
var sphere = new THREE.Mesh(
sphereGeometry, new