I am attempting to change the color on a single face of a mesh. This is in a WebGL context. I can change the entire mesh color, just not a single Face. Relevant code below:

// Updated Per Lee!



var camera = _this.camera;      

var projector = new THREE.Projector();

var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1,                                  - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );

projector.unprojectVector( vector, camera );



var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );

var intersects = ray.intersectObjects( kage.scene.children );



if ( intersects.length > 0 ) {

    face = intersects[0].face;

    var faceIndices = ['a', 'b', 'c', 'd'];         

    var numberOfSides = ( face instanceof THREE.Face3 ) ? 3 : 4;

    // assign color to each vertex of current face

    for( var j = 0; j < numberOfSides; j++ )  {

        var vertexIndex = face[ faceIndices[ j ] ];

    // initialize color variable

    var color = new THREE.Color( 0xffffff );

    color.setRGB( Math.random(), 0, 0 );

    face.vertexColors[ j ] = color;

    }

}

I also initialize the object, in this case a Cube as follows:

// this material causes a mesh to use colors assigned to vertices

var material = new THREE.MeshBasicMaterial( { 

    color: 0xf0f0f0, 

    shading: THREE.FlatShading,

    vertexColors: THREE.VertexColors 

});



var directionalLight = new THREE.DirectionalLight(0xEEEEEE);

directionalLight.position.set(10, 1, 1).normalize();

kage.scene.add(directionalLight);



var cube = new THREE.Mesh(new THREE.CubeGeometry(300, 300, 300,1,1,1), material);

cube.dynamic = true;

kage.scene.add(cube);

Changing the material makes the cube white regardless of the light color.
The intersection logic still works, meaning i select the correct face, but alas the color does not change.

I'm new to Stackoverflow [well asking a question that is, so hopefully my edits are not confusing]