Three.js 如何为Icosahedron几何体的每个面设置单独纯色

• 索引模式的BufferGeometry默认复用顶点，单个顶点会被多个相邻面共用，顶点颜色会被GPU自动插值计算，产生渐变效果
• 原有代码给每个顶点单独赋值随机颜色，同一个面的三个顶点颜色不一致，进一步放大了渐变效果

先将几何体转为非索引模式，断开顶点共享，再按面为单位给同一个面的三个顶点赋值相同颜色即可，修改后的代码如下：

let g = new THREE.IcosahedronGeometry(8, 3)
// 转为非索引几何体，每个面独立持有三个不共享的顶点
g = g.toNonIndexed()

const count = g.attributes.position.count;
const color = new THREE.Color();

g.setAttribute( 'color', new THREE.BufferAttribute( new Float32Array( count * 3 ), 3 ) );
const colors1 = g.attributes.color;

// 每3个顶点对应1个面，同个面的三个顶点设置相同颜色
for ( let i = 0; i < count; i += 3 ) {
    color.setHex( Math.random() * 0xffffff );
    colors1.setXYZ( i, color.r, color.g, color.b);
    colors1.setXYZ( i + 1, color.r, color.g, color.b);
    colors1.setXYZ( i + 2, color.r, color.g, color.b);
}

let m =  new THREE.MeshLambertMaterial( {vertexColors: true,} );
let o = new THREE.Mesh(g, m);
scene.add(o);

修改后同一个面的三个顶点颜色完全一致，GPU不会触发颜色插值，即可实现每个面显示单一纯色的效果。
原有渐变效果参考：

内容的提问来源于stack exchange，提问作者TINTIN