I'm attempting to change the color of a face on an external event - button click. Despite searching for solutions, none have been successful so far. I have an interactive model that I want to be able to toggle its colors.
The model is rendered and colored during init(), where faces are iterated through and colored accordingly.
geometry = new THREE.Geometry().fromBufferGeometry( object );
var faceIndices = [ 'a', 'b', 'c' ];
for ( var i = 0; i < geometry.faces.length; i ++ ) {
var face = geometry.faces[ i ];
for( var j = 0; j < 3; j++ ) {
color = new THREE.Color( 0xff0000 );
face.vertexColors[ j ] = color;
}
}
Next, the material and its flags are set:
var material = new THREE.MeshPhongMaterial( { color: 0xffffff, vertexColors: THREE.FaceColors} );
material.needsUpdate = true;
var solidModel = new THREE.Mesh( geometry, material );
solidModel.dynamic = true;
solidModel.name = "solid";
The model is then added to the scene for rendering:
scene.add( solidModel );
This process works fine. However, when I trigger the color() function on click, nothing happens:
console.log("Coloring...");
// Color the object
var solid = scene.getObjectByName("solid"); // retrieve the object from the scene
// change colors
for ( var i = 0; i < solid.geometry.faces.length; i ++ ) {
var face = solid.geometry.faces[ i ];
for( var j = 0; j < 3; j++ ) {
color = new THREE.Color( 0xffffff );
color.setHex( Math.random() * 0xffffff );
face.vertexColors[ j ] = color;
}
}
// raise the update flag
solid.geometry.colorsNeedUpdate = true;
Even removing the solid object from the scene and adding a new one with the same geometry didn't work. It's interesting to note that in the chrome debugger, the colorsNeedUpdate flag on the "solid" object is indeed true at rendering time.
I'm using three.js r84.
Any insights would be appreciated.