三种具有顶点颜色的 JS 网格颜色变化

Question

我在 Three JS 中遇到颜色变化问题。我正在使用 stl 文件中的顶点颜色将网格添加到我的场景中。颜色添加正确，但是当我尝试通过以下代码更改颜色时：

this.meshArray[elementName].material.color.setHex( colorValue );

颜色没有正确改变。它们看起来像是新旧颜色的混合。在图片上，您可以看到示例。我试图将两部分的颜色更改为红色。灰色部分变为浅红色，但蓝色部分已变为几乎黑色。我不知道这有什么问题，但我认为问题是因为我从顶点颜色中获取颜色并且以后不更改此设置？有人知道如何解决吗？

Answer 1

您遇到此问题是因为您同时使用 vertexColors 和 material.color 属性。每个顶点都有自己指定的颜色，当应用通用材质颜色时，它们会相乘，从而产生不想要的结果。例如，蓝色 * 红色 = 黑色，因为 255 * 0 = 0

0x0000ff // blue
  ****** // multiply
0xff0000 // red
0x000000 // result

您将不得不更改 vertexColors 或 material.color，但不能同时更改。要访问几何体中的顶点颜色，可以使用 geometry.getAttribute("color") 方法，然后更改每个顶点的每个 RGB 值。 See this working demo 的 vertexColors 属性示例。