# How do I repeat texture with fixed size?

**URL:** <https://discourse.threejs.org/t/how-do-i-repeat-texture-with-fixed-size/9158>\
**Category:** Questions\
**Tags:** textures, geometry\
**Created:** [August 21, 2019, 5:17am UTC](https://discourse.threejs.org/t/how-do-i-repeat-texture-with-fixed-size/9158 "2019-08-21T05:17:07Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![11120](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/11120/32/6806_2.png) [@11120](https://discourse.threejs.org/u/11120)\
**Post date:** [August 21, 2019, 5:17am UTC](https://discourse.threejs.org/t/how-do-i-repeat-texture-with-fixed-size/9158/1 "2019-08-21T05:17:07Z")

</div>

I have been trying to apply brick texture to ExtrudedGeometry mesh. I couldn’t find anything relating to this issue.

I wanted to achieve fixed texture size no matter the geometry dimension  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/f/f172155945600ca9e3e6c95e914158ffb0e08cc4.jpeg)

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/b/b75bcb5e6294d25a8e15b33519634d085c84231d.jpeg)  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/5/51bdd0f5c22b268900894dd5a155c7f8f085772a.jpeg)  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/6/67721cf1c14d6618d9968758659cb6f7dd898c92.jpeg)  
obj File : [floor.obj](https://discourse.threejs.org/uploads/short-url/1w8J8pQNLi6bnz4fr8Eg1bbhWAB.obj) (1.0 MB)

similar problem: [THREE.JS UV Mapping on ExtrudeGeometry - Stack Overflow](https://stackoverflow.com/questions/28174840/three-js-uv-mapping-on-extrudegeometry)  
-seems likes ExtrudedGeometry is the problem(not 100% sure)

---

<div class="post-metadata">

**Author:** ![yogZ-codeR](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yogz-coder/32/6632_2.png) [@yogZ-codeR](https://discourse.threejs.org/u/yogZ-codeR)\
**Post date:** [August 21, 2019, 5:41am UTC](https://discourse.threejs.org/t/how-do-i-repeat-texture-with-fixed-size/9158/2 "2019-08-21T05:41:37Z")

</div>

You can go through this [link](https://threejs.org/docs/index.html#api/en/textures/Texture). It gives an idea of how to repeat textures.

You can map the loaded texture to any material that you are using for the generated geometry mesh.

---

<div class="post-metadata">

**Author:** ![11120](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/11120/32/6806_2.png) [@11120](https://discourse.threejs.org/u/11120)\
**Post date:** [August 21, 2019, 5:56am UTC](https://discourse.threejs.org/t/how-do-i-repeat-texture-with-fixed-size/9158/3 "2019-08-21T05:56:24Z")

</div>

Thanks for the link. But I have went through that links and theoretically `texture.wrapS = texture.wrapY = RepeatWrapping` should have handled the repetition part. I wanted to understand why only certain side’s texture is being ‘strenched’.

---

<div class="post-metadata">

**Author:** ![yogZ-codeR](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yogz-coder/32/6632_2.png) [@yogZ-codeR](https://discourse.threejs.org/u/yogZ-codeR)\
**Post date:** [August 21, 2019, 6:20am UTC](https://discourse.threejs.org/t/how-do-i-repeat-texture-with-fixed-size/9158/4 "2019-08-21T06:20:19Z")

</div>

you might also look to add the below

> texture.repeat.set( 4, 4 );

Play with the numbers as required, 4 might be too small for our requirement.

---

<div class="post-metadata">

**Author:** ![11120](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/11120/32/6806_2.png) [@11120](https://discourse.threejs.org/u/11120)\
**Post date:** [August 21, 2019, 8:53am UTC](https://discourse.threejs.org/t/how-do-i-repeat-texture-with-fixed-size/9158/5 "2019-08-21T08:53:08Z")

</div>

hmm. from further inspection, I believe there is something wrong with the uvs coordinates. looks like texture is projected in an angle

---

<div class="post-metadata">

**Author:** ![yogZ-codeR](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yogz-coder/32/6632_2.png) [@yogZ-codeR](https://discourse.threejs.org/u/yogZ-codeR)\
**Post date:** [August 21, 2019, 9:07am UTC](https://discourse.threejs.org/t/how-do-i-repeat-texture-with-fixed-size/9158/6 "2019-08-21T09:07:34Z")

</div>

Can you please share your example in a [jsfiddle](https://jsfiddle.net/theo/VsWb9/) ?

---

<div class="post-metadata">

**Author:** ![11120](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/11120/32/6806_2.png) [@11120](https://discourse.threejs.org/u/11120)\
**Post date:** [August 21, 2019, 9:33am UTC](https://discourse.threejs.org/t/how-do-i-repeat-texture-with-fixed-size/9158/7 "2019-08-21T09:33:28Z")

</div>

yes of course but unfortunately I have never used js fiddle before and I want to create as similar scene as possible.

---

<div class="post-metadata">

**Author:** ![11120](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/11120/32/6806_2.png) [@11120](https://discourse.threejs.org/u/11120)\
**Post date:** [August 22, 2019, 1:57am UTC](https://discourse.threejs.org/t/how-do-i-repeat-texture-with-fixed-size/9158/8 "2019-08-22T01:57:47Z")

</div>

sorry about the delay.  
sad news is I was not able to recreate the project in js fiddle…☹  
But I made a new repository in github ([GitHub - jhlee4/texture-mapping-testing](https://github.com/jhlee4/texture-mapping-testing))  
`npm install` then  
`npm start`  
should open start the project.

I’ll try to upload the project on online playground.

---

<div class="post-metadata">

**Author:** ![11120](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/11120/32/6806_2.png) [@11120](https://discourse.threejs.org/u/11120)\
**Post date:** [August 23, 2019, 9:15am UTC](https://discourse.threejs.org/t/how-do-i-repeat-texture-with-fixed-size/9158/9 "2019-08-23T09:15:14Z")

</div>

I couldn’t solve it using ExtrudedGeometry, so I found the workaround to this issue. I just created thin BoxGeometry for each wall and placed it in front of the original wall.  
**Before:**

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/7/701bc1a77ef476940ba6b3462a328f55eb1661f2.jpeg)  
**After:**  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/f/f77de707fd8ce7413026f8a22f2d1ba3978129e5.jpeg)  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/0/0f4a02617080ba52e41df7451d4c9a8d56dadac6.jpeg)

---

<div class="post-metadata">

**Author:** ![tsv83](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tsv83/32/31103_2.png) [@tsv83](https://discourse.threejs.org/u/tsv83)\
**Post date:** [November 15, 2022, 6:50pm UTC](https://discourse.threejs.org/t/how-do-i-repeat-texture-with-fixed-size/9158/10 "2022-11-15T18:50:19Z")

</div>

Could you please share your solution? I’m trying to build brick walls, similar to yours. Thank you in advance!