參考 BufferGeometry.groups

Split the geometry into groups, each of which will be rendered in a separate WebGL draw call. This allows an array of materials to be used with the bufferGeometry.

const geometry = new THREE.TetrahedronGeometry();
for (let i = 0; i < 4; ++i) {
    geometry.addGroup(
        i * 3, //start : Integer, 從第幾個點開始
        3,     //count : Integer, 每 3 個點為一組
        i      //materialIndex : Integer, 使用第幾個 material
    );
}

//材質
const materials = [
    new THREE.MeshPhysicalMaterial({ color: 0xff0000 }),
    new THREE.MeshPhysicalMaterial({ color: 0x00ff00 }),
    new THREE.MeshPhysicalMaterial({ color: 0x0000ff }),
    new THREE.MeshPhysicalMaterial({ color: 0xffff00 }),
];

// .Mesh 的第二個參數可以是陣列，geometry 需要用 addGroup 分群
const tetrahedron = new THREE.Mesh(geometry, materials);
scene.add(tetrahedron);

我昨天看到這題也有興趣查了很久...

結果繪了個四不像的東西XD

/*
* Add Object
*/

    const geometry = new THREE.TetrahedronGeometry(2, 0)
    const position = geometry.attributes.position.clone();
    const material = new THREE.MeshBasicMaterial({
      vertexColors: THREE.FaceColors,
    });
    const colors = [];
    const color = new THREE.Color();
    for ( let i = 0; i < position.count; i ++ ) {
      const z =  Math.random() * 0.2;
      position.setZ( i, z );
      const s = z * 5; // values  in the range [0,1]
      color.setHSL( s, s, s );
      colors.push( color.r, color.g, color.b );
    }
    geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
    const tetrahedron = new THREE.Mesh(geometry, material)
    scene.add(tetrahedron)

沒想到解法是像 淺水員 回答的這麼簡單