"Fill" texture on a Plane using uv manipulation

Questions
, ,
1

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/

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
uv1657×827 141 KB

2 Likes
2

another failed attempt but image aspect is maintained :broken_heart: :heartbeat:

uv
uv1090×918 75.6 KB

https://jsfiddle.net/orion_prime/7qtn1ha9/12/

3

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:

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

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 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);

1 Like
4

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

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

5

using @Mugen87 's Post which uses texture matrix multiplication technique i can visualise what the results should look like. :heart_eyes:

but the gltf exporter does not handle this case :cold_face:

https://jsfiddle.net/orion_prime/7qtn1ha9/17/