三个具有顶点颜色的JS网格颜色变化答案

【问题标题】：Three JS mesh color change which has vertex colors三个具有顶点颜色的JS网格颜色变化
【发布时间】：2021-07-31 22:17:18
【问题描述】：

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

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

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

【问题讨论】：

标签： angular typescript three.js

【解决方案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 属性示例。

【讨论】：

好的，谢谢您的解释。现在我面临另一个问题。它在添加新元素期间有效，但是当我尝试通过按钮动态更改现有元素时，以下代码不起作用。你知道为什么它不工作吗？ let geometry = this.scene.getObjectByName("myFile.stl").geometry const color = new THREE.Color(0xFF0000); // @ts-ignore for(let idx = 0; idx < geometry.attributes.color.count; idx++) { // @ts-ignore geometry.getAttribute("color").setXYZ( idx, color.r, color.g, color.b ) }
请为这个新问题打开一个新问题。