Question

我必须开发一个5x5的魔方，立方体有6个面，所以我必须在每个面上的每个小盒子上显示25张图像（整个5x5立方体中总共150张图像）。 Rubik多维数据集可以完美显示，但是当我插入图像时，连多维数据集都没有显示。

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

Answer 1

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

Here is an example of how it should be done

另一个需要注意的重要事项是拥有5x5x5多维数据集-对纹理加载器的调用是 750 。在实际使用资产之前先对其进行预加载。

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

1 个答案: