# Repeat texture on different meshes of different sizes

**URL:** <https://discourse.threejs.org/t/repeat-texture-on-different-meshes-of-different-sizes/50875>\
**Category:** Questions\
**Tags:** textures\
**Created:** [April 26, 2023, 4:12pm UTC](https://discourse.threejs.org/t/repeat-texture-on-different-meshes-of-different-sizes/50875 "2023-04-26T16:12:36Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![alexandresi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alexandresi/32/35732_2.png) [@alexandresi](https://discourse.threejs.org/u/alexandresi)\
**Post date:** [April 26, 2023, 4:12pm UTC](https://discourse.threejs.org/t/repeat-texture-on-different-meshes-of-different-sizes/50875/1 "2023-04-26T16:12:36Z")

</div>

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:

```js
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

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [April 27, 2023, 9:58am UTC](https://discourse.threejs.org/t/repeat-texture-on-different-meshes-of-different-sizes/50875/2 "2023-04-27T09:58:13Z")

</div>

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](https://codepen.io/boytchev/full/ZEqybxW)

[![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/8/b841e9353f803536054083087a12908e15ce0b7a.jpeg)](https://codepen.io/boytchev/full/ZEqybxW)

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

---

<div class="post-metadata">

**Author:** ![alexandresi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alexandresi/32/35732_2.png) [@alexandresi](https://discourse.threejs.org/u/alexandresi)\
**Post date:** [April 27, 2023, 10:02am UTC](https://discourse.threejs.org/t/repeat-texture-on-different-meshes-of-different-sizes/50875/3 "2023-04-27T10:02:34Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [April 27, 2023, 10:19am UTC](https://discourse.threejs.org/t/repeat-texture-on-different-meshes-of-different-sizes/50875/4 "2023-04-27T10:19:15Z")

</div>

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](https://codepen.io/boytchev/full/wvYeMrG)

[![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/7/2796cf4de4d3a49f253473844047ff055e810f5f.jpeg)](https://codepen.io/boytchev/full/wvYeMrG)

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

---

<div class="post-metadata">

**Author:** ![alexandresi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alexandresi/32/35732_2.png) [@alexandresi](https://discourse.threejs.org/u/alexandresi)\
**Post date:** [April 28, 2023, 12:43pm UTC](https://discourse.threejs.org/t/repeat-texture-on-different-meshes-of-different-sizes/50875/5 "2023-04-28T12:43:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Parisa\_Shahbazi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/parisa_shahbazi/32/43776_2.png) [@Parisa\_Shahbazi](https://discourse.threejs.org/u/Parisa_Shahbazi)\
**Post date:** [October 1, 2024, 3:55pm UTC](https://discourse.threejs.org/t/repeat-texture-on-different-meshes-of-different-sizes/50875/6 "2024-10-01T15:55:29Z")

</div>

Hi  
Did you solve this problem ?

---

<div class="post-metadata">

**Author:** ![alexandresi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alexandresi/32/35732_2.png) [@alexandresi](https://discourse.threejs.org/u/alexandresi)\
**Post date:** [October 2, 2024, 6:54am UTC](https://discourse.threejs.org/t/repeat-texture-on-different-meshes-of-different-sizes/50875/7 "2024-10-02T06:54:23Z")

</div>

Hi,  
After a lot of fails and retries, I ended up with this: [GDevelop/Extensions/3D/Cube3DRuntimeObjectPixiRenderer.ts at fe743bbe57658b433d90784e14201a5ae56e6eb9 · 4ian/GDevelop · GitHub](https://github.com/4ian/GDevelop/blob/fe743bbe57658b433d90784e14201a5ae56e6eb9/Extensions/3D/Cube3DRuntimeObjectPixiRenderer.ts#L122)

Maybe I should have taken more time to understand how they work beforehand. I remember spending a lot of time playing with parameters to get the textures start from the right corner and repeat with the right aspect ratio

---

<div class="post-metadata">

**Author:** ![Parisa\_Shahbazi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/parisa_shahbazi/32/43776_2.png) [@Parisa\_Shahbazi](https://discourse.threejs.org/u/Parisa_Shahbazi)\
**Post date:** [October 15, 2024, 2:01pm UTC](https://discourse.threejs.org/t/repeat-texture-on-different-meshes-of-different-sizes/50875/8 "2024-10-15T14:01:28Z")

</div>

Can you explain it for me a little