title: three.js changing colour of object with MeshFaceMaterial faces
body: <p>I am experimenting with three.js, and I have made this simple cerealbox and added it to my scene. The cereal box is visualised with loaded images on the faces as part of a THREE.MeshFaceMaterial  </p>
  
  <pre><code>// Cereal box
      // Store the images required for each of the sides on the cereal box. 
      var cerealboxsides = [
         new t.MeshLambertMaterial({
             map: t.ImageUtils.loadTexture('images/frostiesback.jpg') // west facing side
         }),
         new t.MeshLambertMaterial({
             map: t.ImageUtils.loadTexture('images/frostiesback.jpg')  // East facing side
         }),
         new t.MeshLambertMaterial({
             map: t.ImageUtils.loadTexture('images/frostiesback.jpg') 
         }),
         new t.MeshLambertMaterial({
             map: t.ImageUtils.loadTexture('images/frostiesback.jpg')
         }),
         new t.MeshLambertMaterial({
             map: t.ImageUtils.loadTexture('images/frosties.jpeg') // Front of box
         }),
         new t.MeshLambertMaterial({
             map: t.ImageUtils.loadTexture('images/frostiesback.jpg') // The back facing side. (or front but using back this time)
         })
      ];
      cerealbox = new t.Mesh(
              new t.BoxGeometry(20, 30, 5, 30, 30, 30),
              new t.MeshFaceMaterial(cerealboxsides)
      );
      cerealbox.position.set(-UNITSIZE-50, 35, -UNITSIZE-50);     // goes x, y, z for width, height, depth again.
      // Scenemodels (array) already added to scene. 
      //scene.add(cerealbox);
      scenemodels.add(cerealbox);
  </code></pre>
  
  <p>I have been incorporating the use of projectors and raycasters to change the color of objects in my scene when highlighted with the mouse. This passage of code works to change all objects the color red, except for my multi faced cereal box object. How can I amend this passage of code to account for this.</p>
  
  <pre><code>       projector = new t.Projector();
          raycaster = new t.Raycaster();
          mouse2D = new t.Vector3(0, 0, 0);
          pointerDetectRay = new t.Raycaster();
      pointerDetectRay.ray.direction.set(0, -1, 0);
  
      pointerDetectRay = projector.pickingRay(mouse2D.clone(), cam);
  
              var intersects = pointerDetectRay.intersectObjects(scenemodels.children);
  
          if (intersects.length &gt; 0) 
          {
  
  
              if ( INTERSECTED != intersects[ 0 ].object ) {
  // intersect is object currently beneath mouse          
  var intersect = intersects[0];
  
  
  
              intersect.object.material.color.setHex(0xff0000);
  
          }
  }
  </code></pre>
  
  <p>I have tried to include a passage of code like the following but have not managed to make it work yet. </p>
  
  <pre><code>var faces = intersects[0].object.geometry.faces;
  for (var i = 0; i &lt; faces.length; i++) {
     faces[i].color.setHex(0xff0000); 
  }
  </code></pre>