Couleur un tétraèdre dans trois.js

Question

Dans trois.js, j'essaye de dessiner un tétraèdre en utilisant THREE.TetrahedronGeometry où chaque visage est une couleur différente. Quand j'utilise MeshNormalMaterial, chaque vertex a une couleur différente mais les faces sont des dégradés de couleurs entre les vertex. Cela fonctionne pour un BoxGeometry, mais pas pour TetrahedronGeometry.

J'ai essayé d'utiliser PhongMaterial avec shading: THREE.FlatShading mais cela me donne juste des visages noirs ou blancs.

J'ai essayé d'écrire mon propre ShaderMaterial et dans le matériau de fragment, je colore en utilisant le vecteur normal, mais cela obtient également l'effet de dégradé.

Je suis sûr que je manque quelque chose évidente, mais ne peut pas le voir ...

Answer 1

Voici comment vous le faites:

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

Vous avez donc besoin THREE.FlatShader, TROIS .VertexColors, puis vous devez affecter les couleurs de la face.