在three.js中爲四面體着色

Question

在three.js中，我試圖使用THREE.TetrahedronGeometry繪製一個四面體，其中每個面都是不同的顏色。當我使用MeshNormalMaterial時，每個頂點具有不同的顏色，但面是頂點之間的顏色漸變。這適用於BoxGeometry，但不適用於四面體幾何。

我試過使用PhongMaterial與shading: THREE.FlatShading，但這只是給我黑色或白色的臉。

我嘗試編寫自己的ShaderMaterial，並在片段材質中使用法線向量着色，但也得到漸變效果。

我敢肯定，我失去了一些東西很明顯，但還看不出來......

Answer 1

這是你如何做到這一點：

var geo = new THREE.TetrahedronGeometry(sphereRadius, 0); 
for (var i = 0; i < geo.faces.length; i ++) { 
    geo.faces[ i ].color.setHex(Math.random() * 0xffffff); 
} 

var material = new THREE.MeshBasicMaterial({ 
    side: THREE.DoubleSide, 
    shading: THREE.FlatShading, 
    vertexColors: THREE.VertexColors 
}) 
var mesh = new THREE.Mesh(geo, material); 

所以，你需要THREE.FlatShader，三.VertexColors，然後您需要分配臉部顏色。