javascript - threejs colorsNeedUpdate不触发更新

我正在尝试在外部事件-按钮上触发面部颜色的更改。即使存在许多类似的问题，到目前为止，所提供的解决方案均未解决。因此，我有一个交互式模型，并且希望能够切换其颜色。

在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;
    }
}

然后我设置材料及其标志

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一起工作

任何见解都会有所帮助

最佳答案

尝试这个：

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示例

关于javascript - threejs colorsNeedUpdate不触发更新，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43121906/