Two grids, the same texture, another offset?

Question

Using three.js, I am working on a web page to display a flip cube (otherwise a magic cube, for example, the video on this page ).

A flip cube usually has images that are scattered across several pieces of the cube. For example, the image of a boat shown above spreads over the faces of four cubes. In terms of three.js, there are several grids that should use the same image for their material texture, but each with a different offset.

As far as I understand, in three-dimensional .js, the offset is a property of the texture , not the material or mesh.Therefore, it seems that you cannot have a single texture that is used in another offset in two different places.

Does this mean that in order to have different parts of the boat image shown on four different faces, I need to create four separate textures, which means that we load the image of the boat into memory four times? I hope this is not the case.

Here is the relevant code snippet:

// 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 http://www.huttar.net/lars-kathy/tmp/flipcube.html , you will see that all texture images are displayed offset by the same amount on each cubic face, even if they are set at different offsets on different cubels. This seems to confirm that you cannot use different uses of the same texture with different offsets.

How can I get different cells to use the same texture at different offsets, so I don’t need to load the same image several times in several textures?

Answer 1

What you are saying is true. Instead of adjusting the texture offsets, adjust the boundary vertices of the UV geometry.

EDIT: There is another solution that matches what you want to do. You can clone a texture like this:

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

Cloning a texture will reuse the loaded image, and the new texture may have its own offsets. Do not try to clone the texture until the image loads.

With this alternative approach, you do not need to configure UVs, and you do not need to upload an image more than once.

three.js r.58