THREE.BufferGeometry - 顔色を手動で設定するにはどうすればいいですか？

Question

私は、面ごとに色を設定したいBufferedGeometryを持っています。しかし、私が理解するように、ジオメトリのcolor属性は、面ではなく頂点ごとに色を設定します。 とFloat32Arrayの色属性を1面につき3つのアイテム（RGB、それぞれ0から1の範囲）で設定することで、それを使ってみました。これには望ましい出力がありませんでした。

Answer 1

あなたはBufferGeometryを使用しているときの顔の色を割り当てます。これを行うには、以下を実行してください。

インデックスされていないBufferGeometryを使用してください。

color属性を追加します。 color属性で

geometry.addAttribute('color', new THREE.BufferAttribute(colors, 3)); 

、同じ色を持つように、各顔のすべての3つの頂点を割り当てます。

あなたは内蔵の材料three.jsを使用している場合は、材料の定義では、あなたがShaderMaterialを使用している場合は、そのシェーダを自分で記述する必要があります

vertexColors: THREE.VertexColors 

を設定します。

three.js r.83

Answer 2

多くの顔にはMeshFaceMaterialを使用してください。例として、この材料は、6面を持つオブジェクトに対して次のようになります。

var material = new THREE.MeshFaceMaterial([ 
    new THREE.MeshBasicMaterial({ 
     color: 0x00ff00 
    }), 
    new THREE.MeshBasicMaterial({ 
     color: 0xff0000 
    }), 
    new THREE.MeshBasicMaterial({ 
     color: 0x0000ff, 
    }), 
    new THREE.MeshBasicMaterial({ 
     color: 0xffff00 
    }), 
    new THREE.MeshBasicMaterial({ 
     color: 0x00ffff 
    }), 
    new THREE.MeshBasicMaterial({ 
     color: 0xff00ff 
    }) 
]);