如何为Three.js立方体的不同面设置不同颜色？

要实现六个面分别为红、橙、黄、绿、蓝、紫的效果，只需要把原来的单一材质改成材质数组即可——BoxGeometry默认对应6个面，数组里的材质会按顺序分配给正X、负X、正Y、负Y、正Z、负Z这六个面。

修改你的createCube函数如下，其他代码保持不变：

function createCube() {
  var geometry = new THREE.BoxGeometry(1, 1, 1);
  // 按顺序定义六个面的材质：红、橙、黄、绿、蓝、紫
  var cubeMaterials = [
    new THREE.MeshBasicMaterial({ color: 0xff0000 }),   // 正X面
    new THREE.MeshBasicMaterial({ color: 0xffa500 }),   // 负X面
    new THREE.MeshBasicMaterial({ color: 0xffff00 }),   // 正Y面
    new THREE.MeshBasicMaterial({ color: 0x00ff00 }),   // 负Y面
    new THREE.MeshBasicMaterial({ color: 0x0000ff }),   // 正Z面
    new THREE.MeshBasicMaterial({ color: 0x800080 })    // 负Z面
  ];
  cube = new THREE.Mesh(geometry, cubeMaterials);
  scene.add(cube);
}

替换后运行代码，你就能看到每个面颜色不同的立方体，方向键旋转的逻辑也能正常工作。

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