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
What I want is to “reproduce” the object-fit: cover behavior of css in three.js
So the image fit the height of the plane and the width “exceeds” outside of it
Wanted effect :
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
I hope I’m clear about what I want, sorry for my bad english btw
Thanks you in advance!
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.
I will try this thanks you very much.
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.
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
This is it, I figured out, thanks to @drcmda’s answer
Thanks guys for your replies
Care to share? I’m trying to work out drcmda’s code but cant seem to get it right…