javascript - 在 THREEjs 中为每张脸设置随机颜色会导致黑色对象

Question

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

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

场景包含两个定向光，以及环境光。如果我使用 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 );

我使用的是three.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;
    }
}