Farbe ein Tetraeder in three.js

Question

In three.js versuche ich ein Tetraeder mit THREE.TetrahedronGeometry zu zeichnen, wo jedes Gesicht eine andere Farbe hat. Wenn ich MeshNormalMaterial verwende, hat jeder Scheitelpunkt eine andere Farbe, aber die Flächen sind Farbverläufe zwischen den Scheitelpunkten. Dies funktioniert für eine BoxGeometry, aber nicht für TetrahedronGeometry.

Ich versuchte mit PhongMaterial mit shading: THREE.FlatShading, aber das gibt mir nur schwarze oder weiße Gesichter.

Ich habe versucht, mein eigenes ShaderMaterial zu schreiben und in das Fragmentmaterial, das ich unter Verwendung des normalen Vektors einfärbe, aber das bekommt auch den Gradient Affekt.

Ich bin sicher, dass ich etwas offensichtlich fehlt bin, aber kann es nicht sehen ...

Answer 1

Dies ist, wie Sie es tun:

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

So müssen Sie THREE.FlatShader, THREE .VertexColors, und dann müssen Sie die Gesichtsfarben zuweisen.