Hello, I am trying to precisely position a plane with threejs on a background, however I am facing two problems:
- Every time I resize the window (both vertically and horizontal) the plane moves and loses its position referenced to the plane. I need that on every screen size the planes are perfectly positioned in relation to each other.
- I need the background to be full screen, but it gets distorted if i don’t apply the correct aspect ratio (consequently if it gets distorted the planes position changes as well)
Is there a way to make the background image full screen and still position the red square in front of the Volkswagen logo?
I made a codepen:
Reference images (I need the red square to align with the Volkswagen bus logo regardless the screen resolution)
There is no way to avoid this. If you want to cover the entire background with a plane, you essentially replicate the CSS background-size: cover in your 3D app. That looks like so Edit fiddle - JSFiddle - Code Playground
I have never solved such a use case but if you know the uv coordinate of the logo’s center, you could use the uv transformation matrix (from the cover() function) in order to transform it. In the next step, you have to determine the 3D position from the transformed uv coordinate. AFAIK, this is not a trivial task.
Thanks for your suggestions Mugen87, The fiddle you posted replicating background-size: cover is perfect for me, as for the object positioning i will try your suggestion of using the uv tranformation matrix. If I solve this problem I will update my fiddle and post it here for the community.
