I’m building a 3D website in React Three Fiber, Three.js, and @react-three/drei. The scene is a 3d circular monument with 4 wall-mounted objects spread evenly around the monument: Mirror, ATM, Statue, and Orb. Each has a fixed aspect ratio (e.g., ATM = 2:1, Mirror = 1:1.5).
When a user taps one of them (say, the ATM), the camera zooms in using CameraControls.setLookAt(). The object then displays an HTML iframe (for ATM say 2:1 is aspect ratio of the html) on a mesh as overlay, and this should fill the screen as much as possible without cropping, whether on a wide desktop screen or a tall phone screen.
Right now, when zoomed in: On some screens the iframe is cropped (portrait or 1:1 screens). On others, there’s too much padding.
I need the camera to dynamically position so that each object’s HTML plane fits the viewport perfectly, respecting its aspect ratio:
Landscape → match height
Portrait → match width
In between → match dynamically
What I’ve tried
Manual fitting: Measured the mesh’s screen-space size, compared with window size, and adjusted camera distance. Result: oscillations and inconsistent fits across devices.
from drei: Wrapped the mesh in . Crashed (Cannot read properties of undefined (reading 'copy')) because the mesh mounts a few frames late.
Hybrid: Mounted only after mesh ready → fewer crashes but inconsistent results.
Goal: Find a reliable way to auto-frame each object (with unique aspect ratios) so its HTML content always fills the viewport without cropping, across all screen sizes and orientations, even if the mesh appears slightly delayed.
Context:
Controls: CameraControls (not OrbitControls)
Object example: (mesh appears after shader load)
Tried: manual math, useFrame, , conditional mounting
Thank you in advance!
