javascript - Threejs ColorsNeedUpdate 不触发更新

Question

我试图在外部事件按钮上触发面部颜色的变化。尽管有很多类似的问题，但到目前为止所提供的解决方案都没有解决。因此，我有一个交互式模型，并且希望能够切换其颜色。

模型在 init() 上进行渲染和着色(忽略它在 for 循环中着色的事实，存在一些着色条件，这里与此无关)

首先，我遍历面孔并为其着色

geometry = new THREE.Geometry().fromBufferGeometry( object );
var faceIndices = [ 'a', 'b', 'c' ];
for ( var i = 0; i < geometry.faces.length; i ++ ) {
    var face  = geometry.faces[ i ];
    for( var j = 0; j < 3; j++ ) {
        color = new THREE.Color( 0xff0000 );
        face.vertexColors[ j ] = color;
    }
}

然后我设置 Material 及其标志

var material = new THREE.MeshPhongMaterial( { color: 0xffffff, vertexColors: THREE.FaceColors} );
material.needsUpdate = true;
var solidModel = new THREE.Mesh( geometry, material );
solidModel.dynamic = true;
solidModel.name = "solid";

之后我将其添加到正在渲染的场景中

scene.add( solidModel );

效果很好。令人不安的部分来了。单击时，我调用 color() 函数

console.log("Coloring...");
// Color the object
var solid = scene.getObjectByName("solid"); // retrieve the object from the scene
// change colors
for ( var i = 0; i < solid.geometry.faces.length; i ++ ) {
    var face  = solid.geometry.faces[ i ];
    for( var j = 0; j < 3; j++ ) {
        color = new THREE.Color(  0xffffff );
        color.setHex( Math.random() * 0xffffff );
        face.vertexColors[ j ] = color;
    }
}
// raise the update flag
solid.geometry.colorsNeedUpdate = true;

什么也没发生。我还尝试从场景中删除实体对象，从相同的几何体创建新的对象，然后再次将其添加到场景中。也不起作用。

真正令人好奇的是，在 Chrome 调试器中，“solid”对象上的 colorsNeedUpdate 标志在渲染时实际上为 true。

我使用 Threejs r84

任何见解都会有帮助

Answer 1

试试这个:

for (var i = 0; i < solid.geometry.faces.length; i++) {
  var face = solid.geometry.faces[i];
  for (var j = 0; j < 3; j++) {
    face.vertexColors[j].setHex(Math.random() * 0xffffff);
  }
}

jsfiddle示例