Three.js WebGL渲染器不更新面上的Color属性

Question

我有一个简单的平面网格,我想在运行时改变一个面的颜色(实际上当一个角色走过"地板砖").

我尝试以下方法:

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

设置vertexColors = THREE.FaceColors在材料中.

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

colorsNeedsUpdate颜色变化后设置.

mesh.geometry.colorsNeedUpdate = true;

three.js.r.76