I'm using React Three Fiber to display 3D models (.gltf files) like a computer, a book, and a planet in my React portfolio.
Everything loads fine, but the alignment and positioning of the 3D models are off — they appear misaligned or floating weirdly, especially on different screen sizes.

I'm using , , and , but still facing inconsistent placement across devices.

I tried adjusting position, scale, and rotation, but the issue persists, especially when combining multiple models in one section.

🔍 What I'm Using
React Three Fiber

@react-three/drei (OrbitControls, Preload, useGLTF)

GLTF 3D models

React + Tailwind CSS layout

📍 What I Need Help With
How to correctly align and position multiple 3D models inside a React component using React Three Fiber so that they look good and stay consistent across screen sizes.