Three.js 管理几何体上的顶点/面颜色（r71与r73）

我正在尝试在我的应用程序中升级ThreeJS的发布版本。我将在3D场景中显示一些网格，并允许用户设置它们的颜色映射。网格可以通过两种方式着色，即通过顶点着色或通过面着色

创建网格材质时，我将vertexColors属性设置为THREE.vertexColors或THREE.FaceColors，具体取决于我想要的行为

在rev71上，我实现了如下颜色更改：

var geometry = mesh.geometry;
/* For each face, change it's face colour or vertex colour */
for(var i = 0; i < geometry.faces.length; i++) {
    if (colourFace) {
        geometry.faces[i].color = myColorFace;
    } else {
        geometry.faces[i].vertexColors =
            [myColorVert1, myColorVert2, myColorVert3];
    }
}

然后WebGLRenderer使用buffergeometry属性来更新WebGL数组缓冲区（在我的例子中是颜色缓冲区）。似乎在从网格更新几何体时，WebGLGeometry的几何体永远不会更新

---

是否有人有解决方案，或者我是否应该发布问题或请求来解决问题？

添加/删除设置超时以查看更改：

setTimeout（函数（）{
对于（变量i=0；i

在添加网格（即无超时）后的下一次渲染调用之前修改颜色时，它会起作用

在下一次渲染调用后修改颜色时，它将不起作用

我深入研究了3JS代码，发现geometry用于生成DirectGeometry，然后生成BufferGeometry，并将其推送到GPU。修改几何图形后，不会更新DirectGeometry。请看第333行

BufferGeometry似乎已使用DirectGeometry正确更新，但DirectGeometry仅创建一次，从未更新。为了测试，我成功地破解了ThreeJS，只要在需要时更新DirectGeometry，一切都正常

---

我考虑发送一个拉请求，但我不确定我是否会遵守规则。至少有2-3种方法可以解决这些问题，但可能我没有正确使用这些功能；）

如我在评论中所述，您不能重新分配颜色（使用

=

），必须使用

copy（）

或

set（）

更改颜色。更改颜色时，还需要设置

colorsenedupdate

标志

使用您的示例，首先创建几何体，并在渲染之前实例化顶点颜色数组：

for (var i = 0; i < size; i++) {

    face = faces[i];
    var color = new THREE.Color( 1, 0, 1 );
    face.vertexColors = [ color, color, color ];

  }

for（变量i=0；i

渲染后，更新颜色，如下所示：

for (var i = 0; i < size; i++) {

    face = faces[i];
    var color = new THREE.Color().setHSL( (i / size) * 0.8, 1.0, 0.5 );
    // change colors
    face.vertexColors[ 0 ].copy( color );
    face.vertexColors[ 1 ].copy( color );
    face.vertexColors[ 2 ].copy( color );

}

mesh.geometry.colorsNeedUpdate = true;

for（变量i=0；i

小提琴：

---

three.js r.74

试试r.74。另外，不要用

=

使用

copy（）

或

set（）

重新分配颜色。在应用更改后，rev73/74仍然无法工作，我快速查看了ThreeJS代码，似乎在WebGLGeometrics上创建了BufferGeometrics以将其发送到GPU之后，此缓冲区几何图形在其关联的几何图形被修改时从不更新。是否设置了必要的

needsUpdate

标志？否则，请通过编辑提供问题的简单工作示例。代码片段不够。好的，它正在工作，谢谢：）我正在尝试更好地理解ThreeJS如何与WebGL一起工作，但我似乎还需要很长时间才能做到：oYou使用调试器逐步检查three.js源代码是正确的。这是一个很好的方式开始让你的手臂围绕它。

for (var i = 0; i < size; i++) {

    face = faces[i];
    var color = new THREE.Color( 1, 0, 1 );
    face.vertexColors = [ color, color, color ];

  }

for (var i = 0; i < size; i++) {

    face = faces[i];
    var color = new THREE.Color().setHSL( (i / size) * 0.8, 1.0, 0.5 );
    // change colors
    face.vertexColors[ 0 ].copy( color );
    face.vertexColors[ 1 ].copy( color );
    face.vertexColors[ 2 ].copy( color );

}

mesh.geometry.colorsNeedUpdate = true;