How can I force a texture to fit a Plane without change it ratio

Questions
1

Hello :smiley:,

Its been few days I tried to search an answer to this but cant figured out how to do it, I hope I can find help here ^^

I’m using the “GooeyEffect” in this tutorial : Making Gooey Image Hover Effects with Three.js | Codrops

I’m trying to make the texture image fit a plane in three.js while keeping the ratio of it in case of page resize.
My problem is that the image fit the Plane

bugEffect
bugEffect984×801 131 KB
.

What I want is to “reproduce” the object-fit: cover behavior of css in three.js :slight_smile:
So the image fit the height of the plane and the width “exceeds” outside of it

Wanted effect :

wantedEffect
wantedEffect983×800 173 KB

As you can see I have three Planes side by side in one single canvas. I am using a PerspectiveCamera if that can help in anyway :slight_smile:

I hope I’m clear about what I want, sorry for my bad english btw :sweat_smile:
Thanks you in advance!

Cheers.

2

Hi!
Have a look at this forum topic: Centered background texture
You need to know ratios of width and height of an image, and width and height of a plane.

1 Like
3

Hey!
I will try this thanks you very much.

4

drei’s useAspect which is a css cover implementation https://github.com/pmndrs/drei#useaspect it’s just a small function, you could copy the code and adapt it. It doesn’t touch the textures but scales the mesh so that it fills the screen.

6

I cant make it work, maybe because im using the texture as uniform in my vertexFragment ? I got some results but none of them are doing what I want…
Here my code :
Tile : tile :: Sharemycode
Scene : scene :: Sharemycode

I’m quite lost, sorry im still a beginner :slight_smile:

7

This is it, I figured out, thanks to @drcmda’s answer
Thanks guys for your replies :slight_smile:

8

Care to share? I’m trying to work out drcmda’s code but cant seem to get it right…