两个网格，相同的纹理，不同的偏移量？

Question

使用three.js，我正在一个网页上显示一个翻转立方体（又称魔术立方体；请参见例如此页面上的视频）。

在翻转的多维数据集上，通常存在分布在多维数据集的多个块中的图像。例如，上面显示的船形图像分布在四个立方体的面上。用three.js术语来说，有多个网格需要使用相同的图像作为其材质，但每个网格的偏移量不同。

据我了解，在three.js中，offset是纹理的属性，而不是材质或网格的属性。因此，似乎您不能在两个不同的位置以不同的偏移量使用单个纹理。

那么这是否意味着要在四个不同的面上显示船图像的不同部分，我必须创建四个单独的纹理，这意味着我们将船图像四次加载到内存中？我希望事实并非如此。

这是一段相关的代码：

  // create an array with the textures
  var textureArray = [];
  var texNames = ['boat', 'camels', 'elephants', 'hippo',
    'natpark', 'ostrich', 'coatofarms-w', 'kenyamap-w', 'nairobi-w'];
  texNames.map(function(texName) {
    textureArray.push(THREE.ImageUtils.loadTexture(
      'images/256/' + texName + '.jpg' ));
  });

    // Create a material for each texture.
  for (var x=0; x <= 1; x++) {
    for (var y=0; y <= 1; y++) {
      for (var z=0; z <= 1; z++) {
        var materialArray = [];
        textureArray.map(function(tex) {
          // Learned: cannot set this offset for one material,
          // without it affecting all materials that use this texture.
          tex.offset.x = x * 0.2;
          tex.offset.y = y * 0.2;

          materialArray.push(new THREE.MeshBasicMaterial( { map: tex }));
        });
        var cubeMaterial = new THREE.MeshFaceMaterial(materialArray.slice(0, 6));
        var cube = new THREE.Mesh( cubeGeom, cubeMaterial );
        cube.position.set(x * 50 - 25, y * 50 - 25, z * 50 - 25);
        scene.add(cube);
      }
    }
  }

如果您在http://www.huttar.net/lars-kathy/tmp/flipcube.html上查看，您会看到所有纹理图像在每个立方体表面上的偏移量都是相同的，即使它们在不同的多维数据集上设置为不同的偏移量。这似乎可以确认您不能对具有相同偏移量的相同纹理进行不同的使用。

如何获得不同的网格以不同的偏移量使用相同的纹理，因此不必将同一图像多次加载到多个纹理中？

Answer 1

你说的是真的。调整几何体的面顶点 UV，而不是调整纹理偏移。

编辑：还有另一种解决方案更符合您想要做的事情。您可以像这样克隆纹理：

var tex = new THREE.Texture.clone();

克隆纹理将导致重新使用加载的图像，并且新纹理可以有自己的偏移量。但是，在图像加载之前，请勿尝试克隆纹理。

使用这种替代方法，您不必调整 UV，也不必多次加载图像。

三.js r.58