两个网格，相同的纹理，不同的偏移？ [英] two meshes, same texture, different offset?

问题描述

使用three.js，我正在网页上显示一个翻转立方体（又名魔术立方体;参见例如，而不是材料或网状物。因此，看起来您不能在两个不同的位置使用不同位置的单个纹理。

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

以下是一段相关的代码：

  //用纹理创建一个数组
 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'））; 
}）; 
 
 //为每个纹理创建一个材质。 （var y = 0; y< = 1; y ++）{
 for（var z = 0）（$ x $ b $ for ; z <= 1; z ++）{
 var materialArray = []; 
 textureArray.map（function（tex）{
 //获知：无法为一种材质设置此偏移量，
 //没有影响所有使用此材质的材质
 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）; 
 
 
 
 $ / code $ / pre 
 
 
如果你看看它，  http://www.huttar.net/lars-kathy/tmp/flipcube。 html ），即使在不同的cubelet上设置了不同的偏移量，您仍将看到所有纹理图像在每个cubelet面上都被相同的量偏移显示。这似乎证实，您不能在不同的偏移量下使用相同的纹理。
 
 
 
如何获得不同的网格以在不同的偏移处使用相同的纹理，所以我不需要多次将相同的图像加载到多个纹理中？
解决方案
你说的是真的。而不是调整纹理偏移量，调整几何体的顶点UV。
 
 
 
编辑：还有另一种解决方案更符合你想要做的。你可以像这样克隆一个纹理： 
 
 
  var tex = new THREE.Texture.clone（）; 
  
克隆纹理会导致被加载的图像被重用，而新的纹理可以拥有自己的偏移量。但是，不要尝试克隆纹理，直到图像加载。
 
 
 
使用这种替代方法，您不必调整UV，并且不必加载image不止一次。 
 
 
 three.js r.58 
 
Using three.js, I'm working on a web page to display a flip cube (a.k.a. magic cube; see e.g. the video on this page).



On a flip cube, there are typically images that are spread out across multiple pieces of the cube. For example, the boat image shown above is spread across the faces of four cubelets. In three.js terms, there are multiple meshes that need to use the same image for their material texture, but each at a different offset.

As far as I understand it, in three.js, offset is a property of a texture, not of a material or a mesh. Therefore, it would appear that you cannot have a single texture that is used at a different offset in two different places.

So does that mean that in order to have different parts of the boat image shown on four different faces, I have to create four separate textures, meaning that we load the boat image into memory four times? I'm hoping that's not the case.

Here's a relevant piece of the code:
  // 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);
      }
    }
  }
If you look at it on http://www.huttar.net/lars-kathy/tmp/flipcube.html, you'll see that all the texture images are displayed offset by the same amount on each cubelet face, even though they are set to different offsets on different cubelets. This seems to confirm that you can't have different uses of the same texture with different offsets.

How can I get different meshes to use the same texture at different offsets, so I don't have to load the same image multiple times into multiple textures?
解决方案
What you say is true. Instead of adjusting the texture offsets, adjust the face vertex UVs of the geometry.

EDIT: There is another solution more in line with what you want to do. You can clone a texture like so:
var tex = new THREE.Texture.clone();
Cloning a texture will result in the loaded image being reused, and the new texture can have it's own offsets. Do not try to clone the texture until the image loads, however.

With this alternate approach, you do not have to adjust UVs, and you do not have to load an image more than once.

three.js r.58

                        
这篇关于两个网格，相同的纹理，不同的偏移？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！