时间戳

首页 > 解决方案 > 如何使用三个 JS 在魔方上的每个小方块上加载图像

javascript - 如何使用三个 JS 在魔方上的每个小方块上加载图像

问题描述

我要开发一个 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);
  }

标签： javascripthtmlthree.js

解决方案

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次调用。在实际使用之前预加载您的资产。

推荐阅读