Create object with different colors on faces - three.js

Question

Drawing a Tetrahedron, I would like to set one color per face, for example, red, green, blue and orange.
Here is the code :
const divid = document.getElementById("myid");
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(
70,
window.innerWidth / window.innerHeight,
1,
1000
);
let renderer = new THREE.WebGLRenderer({ alpha: true });
divid.appendChild(renderer.domElement);
camera.position.z = 3;
let triangle = new THREE.Mesh(
new THREE.TetrahedronBufferGeometry(),
new THREE.MeshBasicMaterial({ color: 0xff0000 })
);
scene.add(triangle);
let animate = function() {
requestAnimationFrame(animate);
triangle.rotation.x += 0.005;
triangle.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
Can't we pass an array of 4 colors to set on each face ?
Code available here too : https://codepen.io/jeffprod/pen/JjdLdjO

Answer 1

Use .vertexColors: true with the material and add color attribute to the geometry, setting the same colour to each vertex of a face:
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(
70,
innerWidth / innerHeight,
1,
1000
);
let renderer = new THREE.WebGLRenderer({
alpha: true
});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
camera.position.z = 3;
let geom = new THREE.TetrahedronBufferGeometry();
geom.setAttribute("color", new THREE.Float32BufferAttribute([
1, 0, 0, //red
1, 0, 0,
1, 0, 0,
0, 1, 0, //green
0, 1, 0,
0, 1, 0,
0, 0, 1, //blue
0, 0, 1,
0, 0, 1,
1, 0.75, 0.25, //orange (sort of)
1, 0.75, 0.25,
1, 0.75, 0.25
], 3));
let triangle = new THREE.Mesh(
geom,
new THREE.MeshBasicMaterial({
vertexColors: true
})
);
scene.add(triangle);
let animate = function() {
requestAnimationFrame(animate);
triangle.rotation.x += 0.005;
triangle.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
body {
overflow: hidden;
margin: 0;
}
<script src="https://threejs.org/build/three.min.js"></script>