threejs创建一个每个面都不同色的立方体,基于 BoxGeometry 的 faces 属性,不需要使用 BufferGeometry 创建复杂的顶点颜色缓冲区。直接上代码,原理很简单不加赘述:
const sphereGeometry = new THREE.SphereGeometry(5, 20, 20);
// 每个面由两个三角形(face)组成
for (let i =0; i< cubeGeometry.faces.length; i +=2){
const random_color = 0xFFFFFF * Math.random()
cubeGeometry.faces[i].color = new THREE.Color(random_color);
cubeGeometry.faces[i + 1].color = new THREE.Color(random_color);
}
// 开启顶点色
const meshMaterial = new THREE.MeshBasicMaterial({vertexColors:true});
const cube = new THREE.Mesh(cubeGeometry, meshMaterial);
cube.position.set(-20, 20, 0);
cube.castShadow = true;
scence.add(cube);
效果如下👇