THREEjsの各面にランダムな色を設定すると、黒いオブジェクトになります。

Question

各面がランダムな色で塗りつぶされたジオメトリをレンダリングしようとしています。

私はgeometry.facesまで繰り返し、各顔にランダムな色を設定します。それに応じて、私はメッシュに追加される新しいマテリアルを作成します。私には必要なフラグをすべて設定しているように見えますが、私のオブジェクトは現場で黒く表示されます。

シーンには2つの指向性ライトと周囲光が含まれています。 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

Huh！わかった！ 顔に色を割り当てることはできませんが、各頂点に割り当てる必要があります。はい、私たちは補間をしていますが、これは私が欲しいものではありませんが、少なくとも私たちは色を見ることができます。補間なしで顔の色を直接割り当てる方法を知っている人は、アドバイスに感謝したいと思います！

これはちょうどforループ適応する、新しいバージョンのコードです：それは `fromBufferGeometry（object.geometry）`でなければなりません

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