threejs创建各面不同色的立方体

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);

效果如下👇