Changing the color of every face of a cube

Question

I've been trying to change the color of my cube when it is clicked on. The problem I'm having is that it doesn't seem to work when I use a MeshFaceMaterial. So far I have managed to change the color of a single face of the cube like this:

if ( intersects.length > 0 )
{
    console.log("Hit @ " + toString( intersects[0].point ) );
    // change the color of the closest face.
    intersects[ 0 ].face.color.setRGB( 0.8 * Math.random() + 0.2, 0, 0 ); 
    intersects[ 0 ].object.geometry.colorsNeedUpdate = true;
}

How do I now change my code so that ALL of the faces change color when one face is clicked? Thanks!

score 0 · Accepted Answer · answered Sep 05 '14 at 10:36

Get the list of all faces from the geometry property:

if ( intersects.length > 0 )
{
    console.log("Hit @ " + toString( intersects[0].point ) );
    // change the color of the closest face.
    var faces = intersects[0].object.geometry.faces;
    for (var i = 0; i < faces.length; i++) {
       faces[i].color.setRGB( 0.8 * Math.random() + 0.2, 0, 0 ); 
    }

    intersects[ 0 ].object.geometry.colorsNeedUpdate = true;
}

Changing the color of every face of a cube

1 Answers1