phil heslop phil heslop - 1 year ago 125
Javascript Question

Three.js WebGL renderer not updating Color property on faces

I have a simple plane mesh where i want to change the color of a face at run-time (actually when a character walks over the "floor tile").

I try the following:

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

This works fine with
, but when i switch to
, it stops working.

I have tried setting the
flag, with no success, the mesh and the geometry are set as
, is there something else i am missing?

(Using Three.js r59)



Answer Source

For WebGLRenderer, here is the pattern you need to follow for THREE.Geometry.

Assign a color to each face.

for ( var i = 0; i < geometry.faces.length; i ++ ) {
    geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );

Set vertexColors = THREE.FaceColors in the material.

material = new THREE.MeshPhongMaterial( { color: 0xffffff, vertexColors: THREE.FaceColors } );

Set colorsNeedsUpdate after a color change.

mesh.geometry.colorsNeedUpdate = true;