WebGL Model not display at center and not fit on whole canvas

Questions
,
1

I have thousands of 3D models, primarily floorplans, that I need to display fully fitted within a React Three.js (@react-three/fiber) canvas. I attempted to implement functions to center and calculate the appropriate zoom dynamically, but they didn’t work as expected.

As a workaround, I applied conditional zoomFactor values based on the model dimensions, using hardcoded values to achieve the best fit.

Is this an effective approach, or is there a better way to dynamically fit and center each floorplan within the canvas? If so, how can I properly manage this?

2

did you try DREI Bounds
In this example, the slider changes the object size drastically, but bounds keeps it in the view.

3

yes i have tried Bounds but see still some floorplans still goes out of canvas or camera-view port