Animating ArcRotateCamera's target may cause the camera to flip

Questions
,
1

Hello, could you please help me with the following.

I am using an ArcRotateCamera, and set its lowerBetaLimit to null , in order to allow it to move freely, without constraints, in its beta axis.
I want to animate the camera’s target and toggle its position up or down.
Everything works fine provided one does not rotate the view upside down.

In this playground here : https://playground.babylonjs.com/#HZ9RQC#1

Press the “Click me” button at the top right corner. The camera’s target moves down. ( good ).
Then, press that button again. The camera’s target moves up again ( good ).

Now, drag to rotate the view until you view the scene from the bottom ( floor on top, ball beneath it ).

Press that “Click me” button again : the view abruptly “jumps” as if you no longer see it from the bottom but from above.

Why does this happens and how can I fix it? ( I do not want the “perspective” to change at all , I want only the camera’s target to animate )

Many thanks for your time

2

@Evgeni_Popov would be so coool if you can have a look ?

3

Setting the target will recompute the alpha/beta angles and the radius independent from the current values. Maybe trying to set the upVector of the camera would help but I could not come up with a way that worked. Maybe @PolygonalSun has some ideas?

4

Thanks a lot guys for having a look… @ RaananW hi Raanan, apologies for the cold invite , I just noticed that you commented on a similar question ( CreateAndStartAnimiation ease in for mesh rotation (flips) - #9 by jcharnley ) and was hoping , if you could spare some time, to perhaps have a look at my issue as well. Many thanks in advance for your time

5

I had something similar. I ‘fixed’ the issue by first setting camera setTarget and then set the ‘target’. I used it for handling camera panning depending on context. Something like this, don’t know if this helps or is any good:

    camera.setTarget(scene.getMeshByID("sphere6"));
    camera.target = new BABYLON.Vector3(0,3.14,0);
    camera.targetScreenOffset = new BABYLON.Vector3(4.5, 0, 0); 
    camera.panningDistanceLimit = 20;
6

Another solution would be to create two more animations after the target animation - one for alpha, and one for beta. The beta flips, which is the issue. You will need to find the right mechanism in which you compare newAlpha, and newBeta. Something like this - ArcRotateCamera target animation flips camera | Babylon.js Playground (babylonjs.com)

This will fail on different constraints, you will probably need to imrove my very simple algorithm :slight_smile:

7

Many thanks to everyone for your time looking at this issue. @RaananW I was able to do what I had in mind using your solution - in fact I ended up using a variation of it - thanks a lot!

One thing I noticed in your draft solution in https://playground.babylonjs.com/#HZ9RQC#3 , was the following :

  1. start by rotating the view : drag the mouse horizontally, say 40 degrees or so.
  2. furher rotate the view : drag the mouse vertically to bring the view upside down ( floor at the top, sphere below it )
  3. press the “Click me” button at the top right corner
    What we see is that the camera’s alpha rotation also transitions - which I did nt quite want to happen.

After some trial and error , I noticed that one, in fact, does not have to flip neither alpha nor beta but, as you said, you do have to animate them. So, I animate them but I am using the same value for “from” and for “to”. This seems odd but it works : animating both alpha and beta using the same “from” and “to” values (something that at first feels like a “no-op” ) actually seems to “cancel” the undesired effect of the target animation flipping the camera view and “forces” the camera “perspective” to remain as it used to be before.

Example playground that demonstrates above : https://playground.babylonjs.com/#HZ9RQC#4

1 Like
8

I forgot to mention : whilst looking at the docs , in this link here : Camera Introduction | Babylon.js Documentation

where it shows the camera axis diagram.

Now, for the “beta” , both highlighted items seem to be “Math.PI/2”. Should nt one of them be more like “-Math.PI/2” ? ( in a similar manner as for the “alpha” )

image

9

It sure makes you wonder :slight_smile:

-PI / 2 and PI / 2 are actually the same here. The difference between them is, well, Math.PI, which is 360 degrees. So while it does look like it is wrong, it is technically not. Try setting line 19 here multiplying Math.PI in any integer, it will be clearer - Example of Camera | Babylon.js Playground (babylonjs.com)

1 Like