Help centering and rotating camera around irregular shaped objects

Hi there, I have a program that essentially creates a range of sizes of rectangular prisms.

A new rectangular prism is created each time the user presses a button.

Each time a new prism loads I try to center the camera on the object, which is tricky because of all the different sizes. Here is how I currently do it:

camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 400, new BABYLON.Vector3(0, 0, 0), scene);
var xc = 1.5*rectangularPrism.sel_x_size;
    var yc = 1.5*rectangularPrism.sel_y_size;
    var zc = 2*rectangularPrism.sel_z_size;
    camera.setPosition(new BABYLON.Vector3( xc, yc, zc));

This works OK, but there are still end cases for example with really tall rectangular prisms where the camera does not position well and the prism is very tiny on the screen.


The second issue I am having is I would a second button which rotates the camera somewhere randomly around the object.

I was thinking I would have to calculate a circle or sphere around the rectangular prism and then choose a random point on it to set the camera position?

Thank you

Hi @summer-3D and welcome to the forum.

is this not the same as a cuboid? Creating A Box | Babylon.js Documentation

For arcRotateCamera parameters see

https://doc.babylonjs.com/typedoc/classes/babylon.arcrotatecamera

camera.setTarget = rectangularPrism.position

camera radius should be at least minSize = sqrt(width/2 * width / 2 + height / 2 * height/2 + depth/2 * depth/2)

camera.radius = minSize + a bit

set alpha and beta

camera.alpha = 2 * Math.PI * Math.random();
camera.beta = 2 * Math.PI * Math.random();
2 Likes

It worked perfectly, thank you so much!

Hi John, I was wondering if you knew if it is possible to animate rotation of camera around the object along that same radius? I could run a loop to iterate the alpha and beta numbers I guess. But I was thinking there must be a built-in function for this I’m not seeing?

You can use the auto rotation behaviour of the arc rotate camera:

https://playground.babylonjs.com/#NA2M3S

1 Like