Change material or color in mesh face

1
votes

I have Three.Geometry object consisting of many vertexes and faces (grid). I want to dynamically change the color or material of selected face. 

geometry.colorsNeedUpdate = true; 
geometry.faces[1].color.setHex(0xcccccc);   //this doesn't work

Above code makes new color opacity weird. It behaves like it doesn't replace the color but blends new color with old. Therefore overwriting darker color with ligher is imposible. How to fix this ? My materials do apply :

mat = new THREE.MeshBasicMaterial({color:"white",shading: THREE.FlatShading,side: THREE.DoubleSide,vertexColors: THREE.FaceColors, needsUpdate : true});

Another approach i wanted to do is also with changing the reference to other material:

geometry.faces[0].materialIndex = 1; // works only when disabled OpenGL in browser

Already set material.needsUpdate flag to true and checked https://github.com/mrdoob/three.js/wiki/Updates

still no change.

1
javascriptthree.jswebgl
Can you provide a (simple) live example to demonstrate the unusual effect you are seeing? – WestLangley
OFC. Here is JsFiddle code - jsfiddle.net/VsWb9/1163 – user2550696
AND here is zip version. It's better code than JsFiddle. I had to rewrite some stuff to make it work in JS fiddle. sendspace.com/file/ap1l4n – user2550696

1 Answers

1
votes

You are mixing apples and oranges. Do not use both face colors and MeshFaceMaterial simultaneously.

First of all, in WebGLRenderer, you can't change the face materialIndex after the mesh has been rendered once. You can change one of the materials in the material array, however.

You need to use MeshBasicMaterial for your mesh material, and specify vertexColors: THREE.FaceColors. That way you can control each face color. Be sure to initial each face color so you get the checkerboard pattern. Also set the material color to 0xffffff, otherwise you will see the multiplicative effect you are trying to avoid.

three.js r.58