# "Fill" texture on a Plane using uv manipulation

**URL:** <https://discourse.threejs.org/t/fill-texture-on-a-plane-using-uv-manipulation/29049>\
**Category:** Questions\
**Tags:** plane, uv-mapping, textures\
**Created:** [August 18, 2021, 4:16pm UTC](https://discourse.threejs.org/t/fill-texture-on-a-plane-using-uv-manipulation/29049 "2021-08-18T16:16:23Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![orion\_prime](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/orion_prime/32/15785_2.png) [@orion\_prime](https://discourse.threejs.org/u/orion_prime)\
**Post date:** [August 18, 2021, 4:16pm UTC](https://discourse.threejs.org/t/fill-texture-on-a-plane-using-uv-manipulation/29049/1 "2021-08-18T16:16:23Z")

</div>

i have images of different aspect ratio and mesh plane of different aspect ratio.  
Using uv manipulation how can i fill the image onto the plane ?

i tried writing some logic from scratch but it seems too convoluted and the result is only correct when the image is square

here’s a fiddle  
[https://jsfiddle.net/orion\_prime/7qtn1ha9/9/](https://jsfiddle.net/orion_prime/7qtn1ha9/9/)

in the fiddle:  
uv manipulation part at the end

image is 200x300 and plane initialsed with image dimension & its adjustable using GUI

to change image aspect:  
`imgUrl:"https://picsum.photos/200/500"` change the last two number to change image aspect

i don’t want to use repeat or offset as i want to do export the file and not all external viewers supports these features.

 ![uv](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/b/4b707e792c5d05b1d94244d3fb89d1ed179d9284.png)

---

<div class="post-metadata">

**Author:** ![orion\_prime](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/orion_prime/32/15785_2.png) [@orion\_prime](https://discourse.threejs.org/u/orion_prime)\
**Post date:** [August 19, 2021, 3:22pm UTC](https://discourse.threejs.org/t/fill-texture-on-a-plane-using-uv-manipulation/29049/2 "2021-08-19T15:22:05Z")

</div>

another failed attempt but image aspect is maintained 💔 💓

 ![uv](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/0/c01ae131f1ee9a2db2eb0dceaf2d47d9928c1c00.jpeg)

[https://jsfiddle.net/orion\_prime/7qtn1ha9/12/](https://jsfiddle.net/orion_prime/7qtn1ha9/12/)

---

<div class="post-metadata">

**Author:** ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)\
**Post date:** [August 19, 2021, 7:08pm UTC](https://discourse.threejs.org/t/fill-texture-on-a-plane-using-uv-manipulation/29049/3 "2021-08-19T19:08:06Z")

</div>

Everything you’re trying to accomplish here (discarding the UVs, then re-building them manually) can already be handled natively by the Three.js engine with the following texture properties:

- [Texture.repeat()](https://threejs.org/docs/#api/en/textures/Texture.repeat)
- [Texture.offset()](https://threejs.org/docs/#api/en/textures/Texture.offset)
- [Texture.center()](https://threejs.org/docs/#api/en/textures/Texture.center)

If you want to scale the texture down by 1/2, for example, just do this, without re-building your PlaneGeometry:

```javascript
texture.center.set(0.5, 0.5);
texture.repeat(2, 2);

```

Now, that “stretchy” look in your second example is because the [`texture.wrapS` property](https://threejs.org/docs/#api/en/textures/Texture.wrapS) is by default `THREE.ClampToEdgeWrapping`. Your 2 other options are Repeat or MirroredRepeat. If you don’t want the texture to repeat at all, you can just scale down your plane mesh along the x-axis:  
`mesh.scale.set(0.5, 1, 1);`

---

<div class="post-metadata">

**Author:** ![orion\_prime](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/orion_prime/32/15785_2.png) [@orion\_prime](https://discourse.threejs.org/u/orion_prime)\
**Post date:** [August 20, 2021, 5:26pm UTC](https://discourse.threejs.org/t/fill-texture-on-a-plane-using-uv-manipulation/29049/4 "2021-08-20T17:26:04Z")

</div>

i want to export usdz and gltf .and some viewers don’t support these texture offsets …usdz does seem to have offset and repeat. [usdzExporter](https://github.com/mrdoob/three.js/blob/6cca448b2a067d71ff2624ff62690f1d0ac1e429/examples/jsm/exporters/USDZExporter.js#L368)

uv manipulation would have helped in all cases  
and  
since this is a flat plane plus the operation is only done once it is super light to process too.

for now i will try with texture offsets and check if they export well in each format and viewer

---

<div class="post-metadata">

**Author:** ![orion\_prime](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/orion_prime/32/15785_2.png) [@orion\_prime](https://discourse.threejs.org/u/orion_prime)\
**Post date:** [August 21, 2021, 3:38pm UTC](https://discourse.threejs.org/t/fill-texture-on-a-plane-using-uv-manipulation/29049/5 "2021-08-21T15:38:14Z")

</div>

using @Mugen87 's [Post](https://discourse.threejs.org/t/how-to-fit-the-texture-to-the-plane/12017/2) which uses texture matrix multiplication technique i can visualise what the results should look like. 😍

but the gltf exporter does not handle this case 🥶

[https://jsfiddle.net/orion\_prime/7qtn1ha9/17/](https://jsfiddle.net/orion_prime/7qtn1ha9/17/)