Question

我试图在我的应用中升级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];
    }
}

每当我更改网格的当前映射时，它都会在场景中更新。

在rev73上，ThreeJS似乎只更新了第一个映射更改（就在Mesh之前，它的Geometry已被推送到GPU）。我得到的唯一线索是WebGLGeometries上的这些行：

/* ... */
} else if ( geometry instanceof THREE.Geometry ) {
    if ( geometry._bufferGeometry === undefined ) {
        geometry._bufferGeometry =
            new THREE.BufferGeometry().setFromObject( object );
    }
    buffergeometry = geometry._bufferGeometry;
}
/* ... */

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

有人有解决方案，还是应该发布问题或提出解决问题的请求？

Answer 1

添加/删除setTimeout以查看更改：http://jsfiddle.net/akmcv7Lh/28/

setTimeout(function() {
  for (var i = 0; i < size; i++) {
    face = faces[i];
    var color = new THREE.Color().setHSL((i / size) * 0.8, 1.0, 0.5);
    face.vertexColors = [color, color, color];
  } 
}, 1000);

在添加网格后修改下一个渲染调用之前的颜色（即没有超时）时，它可以正常工作。

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

我在ThreeJS代码中挖了一点，发现几何用于生成DirectGeometry，然后用于推送到GPU的BufferGeometry。修改几何体后，没有更新DirectGeometry。请参阅第333行的https://github.com/mrdoob/three.js/blob/master/src/core/BufferGeometry.js。

似乎使用DirectGeometry正确更新了BufferGeometry，但DirectGeometry仅创建一次并且从未更新过。我成功地攻击ThreeJS进行测试，只需在需要时更新DirectGeometry，一切正常。

我考虑发送一个Pull Request，但我不确定我会遵循ThreeJS概念规则。至少有2-3种方法可以解决问题，但也许我没有正确使用这些功能;）

Answer 2

正如我在评论中所述，您无法重新分配颜色（使用=），您必须使用copy()或set()更改颜色。您还需要在颜色更改时设置colorsNeedUpdate标志。

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

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;

小提琴：http://jsfiddle.net/akmcv7Lh/29/

three.js r.74

管理几何上的顶点/面颜色（r71 vs r73）

2 个答案: