Javascript 如何使用三个JS在Rubik Cube上的每个小立方体上加载图像

我必须开发一个5x5的魔方，魔方有6个面，所以我必须在每个面上的每个小盒子上显示25个图像，整个5x5魔方总共有150个图像。魔方显示得很完美，但当我插入图像时，什么都不显示，甚至魔方也不显示

//5x5x5 rubik cube is constructed here...
for(var i = 0; i < dimensions; i ++) {
    for(var j = 0; j < dimensions; j ++) {
      for(var k = 
      0; k < dimensions; k ++) {

        var x = (i - positionOffset) * increment,
            y = (j - positionOffset) * increment,
            z = (k - positionOffset) * increment;

        newCube(x, y, z);
      }
    }
  }


//newCube function...

function newCube(x, y, z) {
    const loader = new THREE.TextureLoader();

  const cubeMaterials = [
    new THREE.MeshBasicMaterial({map: loader.load('https://threejsfundamentals.org/threejs/resources/images/flower-1.jpg')}),
    new THREE.MeshBasicMaterial({map: loader.load('https://threejsfundamentals.org/threejs/resources/images/flower-2.jpg')}),
    new THREE.MeshBasicMaterial({map: loader.load('https://threejsfundamentals.org/threejs/resources/images/flower-3.jpg')}),
    new THREE.MeshBasicMaterial({map: loader.load('https://threejsfundamentals.org/threejs/resources/images/flower-4.jpg')}),
    new THREE.MeshBasicMaterial({map: loader.load('https://threejsfundamentals.org/threejs/resources/images/flower-5.jpg')}),
    new THREE.MeshBasicMaterial({map: loader.load('https://threejsfundamentals.org/threejs/resources/images/flower-6.jpg')}),
  ];
    var cubeGeometry = new THREE.CubeGeometry(cubeSize, cubeSize, cubeSize);
    const loader = new THREE.TextureLoader();

    var cube = new THREE.Mesh(cubeGeometry,cubeMaterials);
    cube.castShadow = true;

    cube.position = new THREE.Vector3(x, y, z);
    cube.rubikPosition = cube.position.clone();

    cube.on('mousedown', function(e) {
      onCubeMouseDown(e, cube);
    });

    cube.on('mouseup', function(e) {
      onCubeMouseUp(e, cube);
    });

    cube.on('mouseout', function(e) {
      onCubeMouseOut(e, cube);
    });

    scene.add(cube);
    allCubes.push(cube);
  }

---

1仅以数组形式传递多个材质是不够的，您应该创建MeshFaceMaterial的实例，并将其作为最终材质传递给网格：

var cubeMaterials = [
    new THREE.MeshBasicMaterial({map: image1}),
    new THREE.MeshBasicMaterial({map: image2}),
    new THREE.MeshBasicMaterial({map: image3}),
    new THREE.MeshBasicMaterial({map: image4}),
    new THREE.MeshBasicMaterial({map: image5}),
    new THREE.MeshBasicMaterial({map: image6}),
];
cubeMaterials = new THREE.MeshFaceMaterial( cubeMaterials );

另一个需要注意的重要事项是，拥有5x5x5立方体——这是对纹理加载程序的750次调用。在实际使用资产之前预加载资产