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

然后我设置材料及其标志

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调试器中，＆＃34; solid＆＃34;上的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示例

threejs colorsNeedUpdate不会触发更新

1 个答案: