Three.js - 为每个面定制材质 MeshFaceMaterial

MeshFaceMaterial存在于旧版本中，并且这个对象不是一个材质，而是一个材质数组。新版本中被THREE.Mesh()所代替，因为Mesh的第二个参数material可以接受一个对象数组，所以就是可以实现为每个面定制材质。
示例：https://ithanmang.gitee.io/threejs/home/201808/20180806/04-meshFaceMaterial.html
每个面颜色都不同的魔方。

首先，要创建一个材质数组，这里使用的是基础材质，每个材质的颜色不一样。

 // 创建材质数组
 let matArray = [];
 matArray.push(new THREE.MeshBasicMaterial({
   color: 0xFF7F50}));
 matArray.push(new THREE.MeshBasicMaterial({
   color: 0x9B30FF}));
 matArray.push(new THREE.MeshBasicMaterial({
   color: 0x9ACD32}));
 matArray.push(new THREE.MeshBasicMaterial({
   color: 0x63B8FF}));
 matArray.push(new THREE.MeshBasicMaterial({
   color: 0xc41e3a}));
 matArray.push(new THREE.MeshBasicMaterial({
   color: 0xffffff}));

然后，循环创建网格

// 循环创建立方体
for (let x = 0; x < 3; x++){
   

    for (let y = 0; y < 3; y++){
   

        for (let z = 0; z < 3; z++){
   

            let boxGeometry = new THREE.BoxGeometry(10.8, 10.8, 10.8);
            let box = new THREE.Mesh(boxGeometry, matArray);
            box.position.set(x * 11 - 11, y * 11 - 11, z * 11 - 11);
            group.