Auto Fit on Screen Resize With Preset Camera Orientation

[Tworck]

Is your feature request related to a problem? Please describe.

Use a bounding box to autofit the camera to a 3d model on horizontal and vertical viewport changes using while preserving the camera position which is set beforehand or via orbital controls by the user. A generalized feature may add more flexibility in building screen size independent scenes.

Describe the solution you'd like

Minimal Example: camera-tools .fitToObject on Page Load Not Working

We want to dynamically adjust the camera settings so that my object - in this example, the spaceships — fit into the viewport of our canvas. This should work both on window resize and page load. The pan/dollyTo of the camera works as intended when resizing the window. However, it does not work on the initial page load: The camera performs some type of fitting on inital load.

On initial page load, it does not zoom in close enough to the model. We suspect that this is due to the canvas not perfectly fitting the whole viewport on the initial page load, but we are unsure. This can best be seen when choosing a very small screen size (like a phone screen) and then reloading the window. The model will be zoomed out too much. When dragging the window a tiny bit, the resize works as intended.

Interestingly, the problem "gets better" by calling renderer.render on the scene prior to calling fitObject. See World.ts line 49.

Does anyone have an idea how to resolve this issue?

Most of the relevant code is in:

• src/lib/components/Scene/systems/cameraControls.ts,
• src/lib/components/Scene/World.ts,
• src/lib/components/Scene/systems/Resizer.ts

Describe alternatives you've considered

Camera-controls has the fitToBox and fitToSphere methods, but we found that the fitToSphere does not work well on elongated and more flat objects, or object groups. Therefore we wanted to have something similar to fitToBox. However, fitToBox points the camera only to the flat surfaces of the bounding box which is not necessarily applicable for some models. We are drawing a rectangle from the edges in the boundingBox and then using this rectangle to dolly the camera there

Additional context

1. Clone this repository. Navigate to folder.
2. Install dependencies: npm i
3. Start the server: npm run dev
4. Open the page in your browser.
5. Observe: The camera is not perfectly fitted to the spaceships on initial page load. (To best see the issue, make sure to use a narrow window, like a phone size)
6. Now resize the browser window by a very small margin: The camera fits itself perfectly.
7. To try it out again, reload the window and repeat steps 4 and 5.
8. Comment in an out line 49 from src/lib/components/Scene/World.ts to see strange behaviour/ worsening of the fitting.