图形 – 两个网格,相同的纹理,不同的偏移？

2019年8月4日 254次阅读

使用three.js,我正在一个网页上显示一个翻转立方体(例如魔术立方体;参见例如
the video on this page).

在翻转立方体上,通常存在跨多个立方体展开的图像.例如,上面显示的船形图像分布在四个立方体的面上.在three.js术语中,有多个网格需要使用相同的图像作为其材质,但每个网格都有不同的偏移.

据我了解,在three.js,offset is a property of a texture中,不是材料或网格.因此,看起来您不能在两个不同的位置使用在不同偏移处使用的单个纹理.

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

这是代码的相关部分：

  // 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上看它,你会发现所有纹理图像在每个cubelet面上都显示相同的偏移量,即使它们在不同的cubelet上被设置为不同的偏移量.这似乎证实了您不能对具有不同偏移的相同纹理进行不同的使用.

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

最佳答案 你说的是真的.而不是调整纹理偏移,调整几何体的面顶点UV.

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

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

克隆纹理将导致重载的图像被重用,新纹理可以拥有它自己的偏移量.但是,在图像加载之前不要尝试克隆纹理.

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

three.js r.58

点赞