javascript - Three.js WebGL 渲染器不更新面部的 Color 属性

Question

我有一个简单的平面网格，我想在运行时更改脸部的颜色(实际上是当 Angular 色走过“地砖”时)。

我尝试以下操作:

face.color.setRGB(Math.random(), Math.random(), Math.random());

这适用于 CanvasRenderer，但当我切换到 WebGLRenderer 时，它停止工作。

我已经尝试设置 geometry.colorsNeedUpdate 标志，但没有成功，网格和几何体被设置为 dynamic，还有什么我遗漏的吗？

(使用 Three.js r59)

谢谢，

菲尔。

Answer 1

对于 WebGLRenderer，这是您需要为 THREE.Geometry 遵循的模式。

为每张脸分配一种颜色。

for ( var i = 0; i < geometry.faces.length; i ++ ) {
    geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );
}

在 Material 中设置 vertexColors = THREE.FaceColors。

material = new THREE.MeshPhongMaterial( { color: 0xffffff, vertexColors: THREE.FaceColors } );

在颜色更改后设置 colorsNeedsUpdate。

mesh.geometry.colorsNeedUpdate = true;

三.js.r.76