# Stretched out texture after scaling

**URL:** <https://discourse.threejs.org/t/stretched-out-texture-after-scaling/42794>\
**Category:** Questions\
**Tags:** textures\
**Created:** [September 21, 2022, 4:12pm UTC](https://discourse.threejs.org/t/stretched-out-texture-after-scaling/42794 "2022-09-21T16:12:45Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jelena\_Lukic](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jelena_lukic/32/25651_2.png) [@Jelena\_Lukic](https://discourse.threejs.org/u/Jelena_Lukic)\
**Post date:** [September 21, 2022, 4:12pm UTC](https://discourse.threejs.org/t/stretched-out-texture-after-scaling/42794/1 "2022-09-21T16:12:45Z")

</div>

![texture](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/b/0b318951788647fb807de1fb5ce7e4d352f50bb2.png)

I have .obj and I load texture. In my code I have buttons for scale. When I scale Y, my texture looks  
stretched out. I want repeated texture adter scaling.  
I want to avoid stretching and the texture repeats and makes a nice pattern like here

 ![repeat](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/4/54019e809e5696ab5fb5c1d482d54ee993bf58fa.png)

---

<div class="post-metadata">

**Author:** ![tfoller](https://avatars.discourse-cdn.com/v4/letter/t/3e96dc/32.png) [@tfoller](https://discourse.threejs.org/u/tfoller)\
**Post date:** [September 21, 2022, 4:52pm UTC](https://discourse.threejs.org/t/stretched-out-texture-after-scaling/42794/2 "2022-09-21T16:52:33Z")

</div>

You can apply **.repeat** and **.offset** properties to the texture depending on the scale of the object:  
[https://threejs.org/docs/index.html?q=texture#api/en/textures/Texture.repeat](https://threejs.org/docs/index.html?q=texture#api/en/textures/Texture.repeat)

---

<div class="post-metadata">

**Author:** ![Jelena\_Lukic](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jelena_lukic/32/25651_2.png) [@Jelena\_Lukic](https://discourse.threejs.org/u/Jelena_Lukic)\
**Post date:** [September 22, 2022, 2:23pm UTC](https://discourse.threejs.org/t/stretched-out-texture-after-scaling/42794/3 "2022-09-22T14:23:14Z")

</div>

![s1](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/2/22b16f5233e9fdf3bc59b5e9a0ca1940317c5733.jpeg)

I use repeat but I want same size of pattern after scaling

```javascript
let scaleFirst=60;
let scaleSec= 60;

var texture2 = new THREE.TextureLoader().load( "1.jpg" );

texture2.wrapS = texture2.wrapT = THREE.RepeatWrapping;

let textureWidth = texture2.width;

let textureHeight = texture2.height;

//texture2.offset.set( 0, 0 );

texture2.repeat.set( scaleFirst, scaleSec );

document.getElementById("scaleX").addEventListener("click", function(){
    if(modelReady){
        x+=0.1;
        model.scale.set(x,y,z);
        document.getElementById("size").innerHTML ="X:" + (size.x*x).toFixed(0) + ",<br/> Y:" + (size.y*y).toFixed(0) + ", <br/> Z:" + (size.z*z).toFixed(0);
        scaleFirst = scaleFirst*x;
        texture2.repeat.set( scaleFirst, scaleSec);
       
        texture2.needsUpdate = true;
    }
});

document.getElementById("scaleY").addEventListener("click", function(){
    if(modelReady){
        y+=0.1;
        model.scale.set(x,y,z);
        document.getElementById("size").innerHTML ="X:" + (size.x*x).toFixed(0) + ",<br/> Y:" + (size.y*y).toFixed(0) + ", <br/> Z:" + (size.z*z).toFixed(0);
        scaleSec = scaleSec*y;
        texture2.repeat.set( scaleFirst, scaleSec);
        texture2.needsUpdate = true;
    }
});

document.getElementById("scaleZ").addEventListener("click", function(){
    if(modelReady){
        z+=0.1;
        model.scale.set(x,y,z);
        document.getElementById("size").innerHTML ="X:" + (size.x*x).toFixed(0) + ",<br/> Y:" + (size.y*y).toFixed(0) + ", <br/> Z:" + (size.z*z).toFixed(0);
        scaleFirst = scaleFirst*z;
        texture2.repeat.set( scaleFirst, scaleSec);
        texture2.needsUpdate = true;
    }
});

```

But size of pattern is wrong, I want same look of pattern

 ![s22](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/7/6746843fc9b6ed1dbf113d7b98d5d6fb55d9fbf2.jpeg)

---

<div class="post-metadata">

**Author:** ![tfoller](https://avatars.discourse-cdn.com/v4/letter/t/3e96dc/32.png) [@tfoller](https://discourse.threejs.org/u/tfoller)\
**Post date:** [September 22, 2022, 2:56pm UTC](https://discourse.threejs.org/t/stretched-out-texture-after-scaling/42794/4 "2022-09-22T14:56:01Z")

</div>

> [@Jelena\_Lukic](#):
>
> `scaleSec = scaleSec*y;`

you seem to multiply the previous scale by itself times the new **y** while when you set scale, it’s relative to the original **1.0** , so they do not grow proportionally.

Your code works with slight modification of that line:

> **[Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/tfoller/e7h3okw0/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

but I have a feeling this approach will not work for all shapes and UV unwrappings, it might depend on where the seam are.

---

<div class="post-metadata">

**Author:** ![Jelena\_Lukic](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jelena_lukic/32/25651_2.png) [@Jelena\_Lukic](https://discourse.threejs.org/u/Jelena_Lukic)\
**Post date:** [September 22, 2022, 3:17pm UTC](https://discourse.threejs.org/t/stretched-out-texture-after-scaling/42794/5 "2022-09-22T15:17:23Z")

</div>

![1](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/9/59693067f46debc808743fc2759cb364e72d6b64.jpeg)  
This is how pattern looks. I have to start with

```javascript
let scaleFirst=40;
let scaleSec= 40;
texture2.repeat.set( scaleFirst, scaleSec );

```

---

<div class="post-metadata">

**Author:** ![tfoller](https://avatars.discourse-cdn.com/v4/letter/t/3e96dc/32.png) [@tfoller](https://discourse.threejs.org/u/tfoller)\
**Post date:** [September 22, 2022, 3:24pm UTC](https://discourse.threejs.org/t/stretched-out-texture-after-scaling/42794/6 "2022-09-22T15:24:12Z")

</div>

You need to memorize the initial values and then use them to set new scale, please see the code I provided.

Like so:

```javascript
 let [x, y, z] = [1, 1, 1]; // <--- initial scale values

 let [_scaleFirst, _scaleSec] = [40,40]; // <--- initial repeat values

  document.getElementById("scaleY").addEventListener("click", function() {
    if (modelReady) {
      y += 0.1;
      model.scale.set(x, y, z);
      const scaleSec = _scaleSec * y; // <--- use **initial** repeat times y
      texture2.repeat.set(_scaleFirst, scaleSec);
...

```

---

<div class="post-metadata">

**Author:** ![Jelena\_Lukic](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jelena_lukic/32/25651_2.png) [@Jelena\_Lukic](https://discourse.threejs.org/u/Jelena_Lukic)\
**Post date:** [September 22, 2022, 3:35pm UTC](https://discourse.threejs.org/t/stretched-out-texture-after-scaling/42794/7 "2022-09-22T15:35:29Z")

</div>

> [@tfoller](#):
>
> ```javascript
> const scaleSec = _scaleSec * y; // <--- use **initial** repeat times y
> texture2.repeat.set(_scaleFirst, scaleSec);
> 
> ```

 ![same](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/4/14cad5e2d134d7dee9f1fbee33393003f3a08bfb.jpeg)

I changed, but I have same problem 😓

---

<div class="post-metadata">

**Author:** ![tfoller](https://avatars.discourse-cdn.com/v4/letter/t/3e96dc/32.png) [@tfoller](https://discourse.threejs.org/u/tfoller)\
**Post date:** [September 22, 2022, 3:39pm UTC](https://discourse.threejs.org/t/stretched-out-texture-after-scaling/42794/8 "2022-09-22T15:39:48Z")

</div>

You can either use my code and put your model / texture in it to see if it works or provide your own fiddle with a simplest example showing the problem, so other people can help you fix it.

Without seeing all your code live I can’t tell exactly what’s wrong.

---

<div class="post-metadata">

**Author:** ![Jelena\_Lukic](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jelena_lukic/32/25651_2.png) [@Jelena\_Lukic](https://discourse.threejs.org/u/Jelena_Lukic)\
**Post date:** [September 22, 2022, 3:51pm UTC](https://discourse.threejs.org/t/stretched-out-texture-after-scaling/42794/9 "2022-09-22T15:51:19Z")

</div>

> **[jecppec - JSFiddle - Code Playground](https://jsfiddle.net/jecpec/kud8zn2o/1/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

[zitkussen\_strak\_zijnaad.obj](https://discourse.threejs.org/uploads/short-url/h8pp2UCAmxFTBoUrDzK04TrDjKl.obj) (1.2 MB)

I do not know how to add 3d mode

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [September 22, 2022, 4:03pm UTC](https://discourse.threejs.org/t/stretched-out-texture-after-scaling/42794/10 "2022-09-22T16:03:23Z")

</div>

Seems that uv coordinates into model must be same at x,y,z into blender or 3ds max.

---

<div class="post-metadata">

**Author:** ![Jelena\_Lukic](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jelena_lukic/32/25651_2.png) [@Jelena\_Lukic](https://discourse.threejs.org/u/Jelena_Lukic)\
**Post date:** [September 22, 2022, 4:04pm UTC](https://discourse.threejs.org/t/stretched-out-texture-after-scaling/42794/11 "2022-09-22T16:04:55Z")

</div>

Please explain to me in more detail, how to fix that in blender?

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [September 22, 2022, 5:15pm UTC](https://discourse.threejs.org/t/stretched-out-texture-after-scaling/42794/12 "2022-09-22T17:15:33Z")

</div>

Into 3ds max i use UVW Map -\>Box

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/0/10cdfe35928e0ad790121d46e14d2a0d2c2692b7.jpeg)

---

<div class="post-metadata">

**Author:** ![Jelena\_Lukic](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jelena_lukic/32/25651_2.png) [@Jelena\_Lukic](https://discourse.threejs.org/u/Jelena_Lukic)\
**Post date:** [September 22, 2022, 5:28pm UTC](https://discourse.threejs.org/t/stretched-out-texture-after-scaling/42794/13 "2022-09-22T17:28:06Z")

</div>

Can you fix my model?

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [September 22, 2022, 6:03pm UTC](https://discourse.threejs.org/t/stretched-out-texture-after-scaling/42794/14 "2022-09-22T18:03:08Z")

</div>

Maybe fixed  
[model.obj](https://discourse.threejs.org/uploads/short-url/8migGZfoLPxdTQZSokcgEWOYzNI.obj) (1.5 MB)

---

<div class="post-metadata">

**Author:** ![tfoller](https://avatars.discourse-cdn.com/v4/letter/t/3e96dc/32.png) [@tfoller](https://discourse.threejs.org/u/tfoller)\
**Post date:** [September 22, 2022, 7:18pm UTC](https://discourse.threejs.org/t/stretched-out-texture-after-scaling/42794/15 "2022-09-22T19:18:47Z")

</div>

Your model is not broken and the UVs are fine.  
The problem is that when you scale a model, UVs do not change, so if two sides of your model, say top and left, use the same UV unwrap and you scale only left side, it will visually stretch a part of UV unwrap.  
To compensate for that you need to modify UVs only for that side and that is not a trivial task.

I put your files into a fiddle, just in case, maybe someone will solve this or maybe I’ll have time later.

> **[jecppec - JSFiddle - Code Playground](https://jsfiddle.net/tfoller/pua92kx1/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

---

<div class="post-metadata">

**Author:** ![Jelena\_Lukic](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jelena_lukic/32/25651_2.png) [@Jelena\_Lukic](https://discourse.threejs.org/u/Jelena_Lukic)\
**Post date:** [September 22, 2022, 9:08pm UTC](https://discourse.threejs.org/t/stretched-out-texture-after-scaling/42794/16 "2022-09-22T21:08:45Z")

</div>

Thanks a lot for detail explanation!!