Set the camera's viewport to fit the size of the object

Questions
1

Hi all :slight_smile:

I’m trying to create a mesh from a glb file and I want the camera’s viewport to fit the size of the object, like the example below:

image
image1365×767 133 KB

I’m using free camera, is there any way to do it?

this is my PG : Babylon.js Playground

Thank you

1 Like
2

In a quick answer I think you are likely going to want this that was posted earlier today. Using and arc rotate camera and calling useFramingBehavior

Let me try to get a playground working with your example since you are loading a mesh and then will want to attach it.

2 Likes
3

Modified the position of the FreeCamera and the rotation of the TransformNode.
https://playground.babylonjs.com/#3TE6AD#1
I support msDestiny . rotate camera It’s better and easier to do it.

2 Likes
4

Here is the version with the ArcRotateCamera: make the camera viewport fit the object | Babylon.js Playground (babylonjs.com)

Notice I have to adjust the starting position of the camera to match the initial loading in of the mesh:

var camera = new BABYLON.ArcRotateCamera(“Camera”, Math.PI / 2, Math.PI / 2, 50, BABYLON.Vector3.Zero(), scene);

What’s good about the framing behavior is you don’t need to account for the radius part since that will now be calculated for your mesh to fit the screen just right. Let me know if you have any questions about this! :slight_smile:

3 Likes
5

but I want when I load a smaller object, the camera will adjust the viewport automatically

6

Is it not exactly what Camera Behaviors | Babylon.js Documentation is for ?

1 Like
7

thank you @sebavan this is very helpful :slight_smile: