Best method for moving camera to target object

Hi,

I’m currently working in a project in babylonjs, where we are trying to make an environment where each element in the scene is interactable. At the moment we are trying to make a camera feature that “zoom” in on a specific element (which has been interacted with) in the scene. Me and my friend has slightly different views on how to approach this problem - he is a skilled programmer, I have a background in film production (and have occasionally worked on projects in Cinema 4D, Blender, After Effects etc.)

In essence, the scene as it stands is using a slightly limited arc camera, where the user can rotate in a a half circle around the origo of the scene and click on objects. Later down the road, I would want to make a dolly camera, much like the one we have now, but instead of dragging around the scene, uses simply the pointer for movement, where the focus point of the camera is always at the center of the screen, but the camera itself moves on an arced rail to create more “feel” to the scene. In any case, requirements like this created the need for the starting position to be very flexible.

I have two suggested solutions.

  1. Making a spline with a fixed amount of positions, animating the camera as on a dolly, with rotation set to target the focus object (the object that the user has interacted with).

This is less ideal as this approach makes travel to an object which is pretty far down the spline quite long. And also, it is unclear how this “rail” would correspond to the starting position, which will likely be outside the scope of the spline. So the other potential solution I am thinking of would be something like:

  1. A given start position, and some fixed end position + target based rotation, where you animate the camera down an arc/spline to this fixed position.

My friend, who has been reading more around the internet on this topic than me at the moment suggests:

  1. Creating three camera instances. One camera on the start position, and one camera on each end position (which is variable and due to what object the user interact with), and then another camera that moves between the starting point and the end point, where the arc is generated relative to the positions of each of the other camera instances.

It is very similar to my latter solution, but to me it seems like a slightly atypical way of doing things, and I think more control can be achieved by simply using splines. Especially if you can import them from Blender and use them as rails for the camera.

So my questions are basically:

How would you solve this?

Is it possible to solve it in any of these ways?

Is it possible to import splines and use them as a dolly?

What is the most optimal way from a BabylonJS point of view to the problem?

Thanks in advance,
Henrik

1 Like