问题
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:
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
来源：https://stackoverflow.com/questions/17504531/change-material-or-color-in-mesh-face