Repeat texture on different meshes of different sizes

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,

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


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

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.

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):


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


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