# Dynamic uv texture mapping

**URL:** <https://discourse.threejs.org/t/dynamic-uv-texture-mapping/71122>\
**Category:** Questions\
**Tags:** canvas-texture, fabricjs, uv-mapping, textures\
**Created:** [September 24, 2024, 2:55pm UTC](https://discourse.threejs.org/t/dynamic-uv-texture-mapping/71122 "2024-09-24T14:55:49Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Abomel\_puka](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/abomel_puka/32/51196_2.png) [@Abomel\_puka](https://discourse.threejs.org/u/Abomel_puka)\
**Post date:** [September 24, 2024, 2:55pm UTC](https://discourse.threejs.org/t/dynamic-uv-texture-mapping/71122/1 "2024-09-24T14:55:49Z")

</div>

In Blender, within the **UV Editing** section, there is a standard square (often referred to as the UV space) that represents the 2D area onto which textures are mapped. This square ranges from coordinates `(0, 0)` in the bottom-left corner to `(1, 1)` in the top-right. When a texture is applied, the UV coordinates on the model tell Blender how to project the texture onto specific portions of the 3D model. It acts like a stencil, ensuring that different parts of the texture are applied to different parts of the model’s surface.

Similarly, in my Three.js project, I have a square canvas that I want to use as a texture for my model. However, I believe that the size or aspect ratio of my canvas doesn’t match the UV square used in Blender. This mismatch is causing my texture to be applied incorrectly or stretched. I need my canvas texture to dynamically correspond to the same UV space (0 to 1) that Blender uses, so the texture applies correctly across the model’s surface, similar to how it behaves in Blender’s UV Editor.

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [September 24, 2024, 4:15pm UTC](https://discourse.threejs.org/t/dynamic-uv-texture-mapping/71122/2 "2024-09-24T16:15:49Z")

</div>

Can you show screenshot of what it is vs what it should be?

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [September 24, 2024, 8:38pm UTC](https://discourse.threejs.org/t/dynamic-uv-texture-mapping/71122/3 "2024-09-24T20:38:58Z")

</div>

UVs work the same in threejs as they do in blender.

However, textures in webGL/openGL are flipped vertically by default due to historical gl reasons.  
You can change that behavior by setting .flipY = false on the texture immediately after loading it.

---

<div class="post-metadata">

**Author:** ![Abomel\_puka](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/abomel_puka/32/51196_2.png) [@Abomel\_puka](https://discourse.threejs.org/u/Abomel_puka)\
**Post date:** [September 25, 2024, 5:20am UTC](https://discourse.threejs.org/t/dynamic-uv-texture-mapping/71122/4 "2024-09-25T05:20:52Z")

</div>

I don’t have the picture which might give you the complete context but thanks my issue has been solved.

---

<div class="post-metadata">

**Author:** ![Abomel\_puka](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/abomel_puka/32/51196_2.png) [@Abomel\_puka](https://discourse.threejs.org/u/Abomel_puka)\
**Post date:** [September 25, 2024, 5:21am UTC](https://discourse.threejs.org/t/dynamic-uv-texture-mapping/71122/5 "2024-09-25T05:21:12Z")

</div>

Yeah I realised it, thanks a lot for the help