在 THREEjs 中为每个人脸设置随机颜色会导致黑色对象

Question

我正在尝试渲染一个几何图形，每个面都用随机颜色着色。

我遍历geometry.faces并为每张脸设置随机颜色。在此之后，我创建了一个添加到网格中的新材质。在我看来，我已经设置了所有必要的标志，但我的对象在场景中仍然显得漆黑。

场景包含两个定向光源以及环境光。如果我使用THREE.MeshPhongMaterial物体也显示为黑色，但有一些来自定向光的反射。

这是代码：

var geometry = new THREE.Geometry().fromBufferGeometry( object );
for ( var i = 0; i < geometry.faces.length; i ++ ) {
    var face = geometry.faces[ i ];
    face.color.setHex( Math.random() * 0xffffff );
}
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, vertexColors: THREE.FaceColors } );
var mesh = new THREE.Mesh( geometry, material);
mesh.dynamic = true;
mesh.geometry.colorsNeedUpdate = true;
scene.add( mesh );

我使用的是最新版本的三个.js：r84

有人看到我错过了什么吗？

Answer 1

呵呵！知道了！我们不能只为面分配颜色，而是需要将其分配给每个顶点。是的，然后我们有插值，这不是我真正想要的，但至少我们可以看到颜色。如果有人知道如何直接为面部分配颜色而无需插值，我将不胜感激！

这是新版本的代码，只需调整for循环：

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( 0xffffff );
        color.setHex( Math.random() * 0xffffff );
        face.vertexColors[ j ] = color;
    }
}

Answer 2

我使用了这个：

function addStar() {
  const geometry = new THREE.SphereGeometry(0.25, 24, 24)
  const color = THREE.MathUtils.randInt(0, 0xffffff)
  const material = new THREE.MeshStandardMaterial({color: color})
  const star = new THREE.Mesh(geometry, material)
  const [x, y, z] = Array(3).fill().map(() =>THREE.MathUtils.randFloatSpread(100))
  star.position.set(x, y, z)
  scene.add(star) 
}
Array(200).fill().forEach(addStar)

}