Repeat texture on different meshes of different sizes

Questions
1

Hi there,
I have a basic scene with a Mesh that has a BoxGeometry and a set of 6 MeshBasicMaterial that use a Texture based on a PNG. That would look like this:

const threeTexture = new THREE.Texture(image);
threeTexture.magFilter = THREE.LinearFilter;
threeTexture.minFilter = THREE.LinearFilter;
threeTexture.wrapS = THREE.RepeatWrapping;
threeTexture.wrapT = THREE.RepeatWrapping;

const material0 = new THREE.MeshBasicMaterial({
  map: threeTexture,
  side: THREE.DoubleSide,
  transparent: true,
});
// Same for material1, material2, etc.

const geometry = new THREE.BoxGeometry(10, 4, 1);

const meshBox = new THREE.Mesh(geometry, [material0, material1, material2, material3, material4, material5]);

I would like to make it so that on each face of the box, the image on which the texture is based is repeated in a way that it appears everywhere with the same aspect ratio and size.

To do so, I used the texture.repeat.set(x, y) but since the texture is shared by all the material, I can’t apply separate repeat configurations on each face of my box (that each have different sizes).

Is there a way to configure a repetition directly on the material object so that I can use the same texture for every face?

Thanks for your time,
Alexandre

2

You can clone the texture. Theoretically this will reuse the same image data. Here is an example (see line 57):

https://codepen.io/boytchev/full/ZEqybxW

image

However, you might consider adjusting the UV coordinates instead of using multiple texture.

3

Thanks for the example! Do you know if the clone operation is resource consuming?
I have a use-case where the box dimensions change on each frame, so I’m afraid it would slow things done.

Furthermore, would you have an example that changes the UV coordinates for such a purpose? I’m not familiar with them.

4

Cloning creates a new JS object (so it uses some memory, but rather small). The image data is reused without cloning.

If you want to dynamically modify the number of repeat-s, DO NOT clone the texture every time. Cloning is done only once, then you can freely change the repeat of each material’s texture.

I will prepare an example with UV.

Edit: here is the example with UV modification (the size changes every second, only one texture is used):

https://codepen.io/boytchev/full/wvYeMrG

image

Edit 2: I also modified my previous example (the one with 6 cloned textures) – now it has dynamically changed size too

2 Likes
5

Thanks, that works just fine!
A bit complicated to understand how to set the mapping but I managed to get to what I want after many tests.

1 Like