Camera animation zoom in does backflip - animateCameraTargetToPosition and animateCameraToPosition methods

Questions
1

Hi!

In my project, I have used functions to animate the ArcCamera to zoom into a mesh when clicked. I was looking for a cinematic way to animate the camera from a top down view into a particular object of the scene. I found this code [https://www.babylonjs-playground.com/#3U658N#13] and modified it.

It works OK but it has issues when the mesh is clicked for the first time and when the page is refreshed. The camera appears to do an unnecessary ‘backflip’. A simplification of the issue can be found in:

https://playground.babylonjs.com/#3FX9BH#4

First, refresh the page, then run the code and click the sphere. The first time, the camera circles the scene before zooming into the sphere (which does not look good and is undesirable for our project). If one manually zooms out and clicks on the mesh, the animation behaves reasonably and no backflips are done.

I was wondering if anyone had an idea of what the issue could be and how to solve it. Alternatively, another suggestion on how to cinematically zoom into an object would be appreciated. Any of these would be very helpful.

Thank you!
Laura

2

Hi @laura, welcome to the forum :slight_smile:

Is there a reason your alpha is negative Math.PI / 2 ?

Is that working as expected? Camera animation. Initial weird movement | Babylon.js Playground (babylonjs.com)

3

Thank you so much for the swift response!
It made me realised that the earlier playground which I made was too simplified. I have now created a playground that resembles very closely the code that I am using in the project:

https://playground.babylonjs.com/#3FX9BH#20

When a mesh is clicked initially, the camera does a weird move. When zooming out of the station manually and clicking the station again, the camera behaves normally.

Any idea on what could be the issue here?

Thank you,
Laura