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.

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.

• javascript
• three.js
• webgl

3 Answers 3

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

As per Geometry Document, To signal an update in this faces, Geometry.elementsNeedUpdate needs to be set to true.

The following snippet changes the colors of all faces.

var faces = mesh.geometry.faces;

for(var i = 0 ; i < faces.length; i++){
  var face = faces[i];
  var color = new THREE.Color("rgb(255, 0, 0)");
  face.color = color;
}

mesh.geometry.elementsNeedUpdate = true;

render();

Did you try geometry.colorsNeedUpdate = true; instead of needsColorUpdate?