更改网格面的材质或颜色答案

【问题标题】：Change material or color in mesh face更改网格面的材质或颜色
【发布时间】：2013-07-08 02:11:03
【问题描述】：

我有由许多顶点和面（网格）组成的 Three.Geometry 对象。我想动态更改所选面的颜色或材质。

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

以上代码使新的颜色不透明度变得奇怪。它的行为就像它不会替换颜色，而是将新颜色与旧颜色混合。因此，用较浅的颜色覆盖较深的颜色是不可能的。如何解决这个问题？我的材料确实适用：

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

我想做的另一种方法也是更改对其他材料的引用：

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

已经set material.needsUpdate flag to true 并检查了https://github.com/mrdoob/three.js/wiki/Updates

仍然没有变化。

【问题讨论】：

你能提供一个（简单的）活生生的例子来展示你所看到的不寻常的效果吗？
OFC。这是 JsFiddle 代码 - jsfiddle.net/VsWb9/1163
这里是 zip 版本。它比 JsFiddle 更好的代码。我不得不重写一些东西以使其在 JS fiddle 中工作。 sendspace.com/file/ap1l4n

标签： javascript three.js webgl

【解决方案1】：

您正在混合苹果和橙子。不要同时使用面部颜色和MeshFaceMaterial。

首先，在 WebGLRenderer 中，你不能在网格渲染一次后更改面部materialIndex。但是，您可以更改材质数组中的一种材质。

您需要为网格材质使用MeshBasicMaterial，并指定vertexColors: THREE.FaceColors。这样您就可以控制每种面部颜色。确保初始化每种面部颜色，以便获得棋盘图案。还要将材质颜色设置为0xffffff，否则你会看到你试图避免的乘法效应。

three.js r.58

【讨论】：

我修好了。谢谢。奇怪的是它不像我想的那样工作。我需要更好地解释多种材料的工作原理。这样一个微不足道的问题花了我 2 天时间：] 大声笑