5

使用three.js，我正在处理一个网页来显示一个翻转立方体（又名魔方；参见本页上的视频）。

翻转立方体

在翻转立方体上，通常有分布在立方体的多个部分上的图像。例如，上面显示的船图像分布在四个立方体的表面上。在three.js 术语中，有多个网格需要为其材质纹理使用相同的图像，但每个网格的偏移量不同。

据我了解，在 three.js 中，偏移量是纹理的属性，而不是材质或网格的属性。因此，看起来您不能在两个不同的地方以不同的偏移量使用单个纹理。

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

这是一段相关的代码：

  // 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上查看它，您会看到所有纹理图像在每个立方体表面上显示的偏移量相同，即使它们在不同的立方体上设置为不同的偏移量。这似乎证实了您不能对具有不同偏移量的相同纹理进行不同用途。

如何让不同的网格在不同的偏移处使用相同的纹理，这样我就不必多次将相同的图像加载到多个纹理中？

4

1 回答 1

2

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

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

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

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

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

三.js r.58

于 2013-06-07T14:02:20.237 回答