phil heslop phil heslop - 7 months ago 30
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
CanvasRenderer
, but when i switch to
WebGLRenderer
, it stops working.

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

(Using Three.js r59)

Thanks,

Phil.

Answer

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;

three.js.r.76

Comments