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

Answer 2

根据Geometry文档，要表示此面孔中的更新，Geometry.elementsNeedUpdate需要设置为true。

以下代码段会更改所有面的颜色。

var faces = mesh.geometry.faces;

for(var i = 0 ; i < faces.length; i++){
  var face = faces[i];
  var color = new THREE.Color("rgb(255, 0, 0)");
  face.color = color;
}

mesh.geometry.elementsNeedUpdate = true;

render();

Answer 3

您是否尝试geometry.colorsNeedUpdate = true;代替needsColorUpdate？

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

3 个答案: