在three.js中着色四面体

Question

在three.js中，我正在尝试使用THREE.TetrahedronGeometry绘制四面体，其中每个面都是不同的颜色。当我使用MeshNormalMaterial时，每个顶点都有不同的颜色，但面是顶点之间的颜色渐变。这适用于BoxGeometry，但不适用于TetrahedronGeometry。

我尝试使用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，THREE.VertexColors，然后你需要指定面部颜色。