This is the playground I have Camera movement | Babylon.js Playground (babylonjs.com)
It works well but have some edge case, for example, if I zoom out very far, to test it, you can change the main camera to be alpha:1.500, beta: 1.47, radius: -28.3142
then click the button “Sphere1”, the animation feels flip instead of the animation I set up.
Is there any way to solve this?
The “flipped” feeling is caused by the radius going into negative values. Since the ArcRotateCamera has a pretty specific behavior, I’m not sure if using it to interpolate between camera positions will be the best choice. @PolygonalSun any thoughts?
The animation looks fine to me (at least from a Maths perspective). It moves from your minus value without limits for the camera through your mesh to get to the positive value. I think this is expected.
All you have to do here is:
Edit: already implementing a lower limit for the camera radius will avoid having your cam going through the mesh. Mastering the direction and transition will require you to (as I said) handle the negative and over 360 values (to make sure the cam rotates in the desired direction depending on cam position)
I think it can be fine. Shouldn’t be an issue.
Yeah, it’s totally possible, but the ArcRotateCamera has a pretty specific behavior controlled by alpha/beta/radius, while Free/UniversalCamera lets you set the camera’s position/orientation freely.
Yes, I guess I understand what you are saying. It would eventually require to start with a camera at alpha and beta zero position. Would make things easier. The point is the arc rotate camera just adds on rotations on alpha and beta so you need to be able to calculate half of each revolution to have the anim go in either direction. Just very quickly started a dirty PG to assess this when realizing about this part. Still, it seems like it can be done (without all too much effort).
Interpolating between two different sets of alpha/beta/radii should be easily doable without issue, as long as the radius value before movement is not negative. Changing the camera’s target (eg. panning), on the other hand, is where things can get a bit complicated.
I need to change the camera alpha/beta/radius and target position x, y, z at the same time for the animation. Could you explain why it’s more complicate and how to solve this?
I just checked we have a limit for radius, the radius won’t become 0 in our case, so it won’t flip like that if the radius is always greater than 0?
I would have phrased it differently but I guess ‘Yes’.
Setting a lowerLimit above 0 to your ‘camera.radius’ will make it so that the camera will not be allowed to go into negativ values for the ‘radius’.
Next, it will rotate around the ‘alpha’ and ‘beta’ to reach your final coordinates.
The only thing here is that this behavior does not let you master how the camera will rotate on alpha and beta to reach your targeted coordinates.
In order to do this (master if the camera rotates left or right and up or down to reach the new view), you would need to detect how the camera is currently looking at your object on the alpha and beta and run the appropriate animation (going either left or right, up or down).
agreed. Apart from the panning, it should be easy. I guess I’m just too lazy to do the PG for it 
Just joking of course. I’m just a bit struggling with my own agenda at this very moment (sry).
What I mean by complicated is that you’re affecting up to 6 variables with your animations, rather than 3 so it may require a bit more coordination and planning for some movement scenarios.
One thing that I would suggest to do, when you add the target animations, is to set overrideCloneAlphaBetaRadius to true in your ArcRotateCamera object. When this override is false, it may recalculate some of your other values with each frame and may change your results just a bit.
Thank you, I set the limit of the radius in my playground as 1, it does not flip like before. Camera movement | Babylon.js Playground (babylonjs.com)
I’m also a little confused about what animation should I use with these 6 variables, now I’m using
scene.beginDirectAnimation(camera,
[cameraAnim.cameraRadius, cameraAnim.cameraAlpha, cameraAnim.cameraBeta,
cameraAnim.cameraPostionX, cameraAnim.cameraPositionY, cameraAnim.cameraPositionZ],
startFrame, endFrame, false);
Do you have any suggestion about should i use this to play the consecutive animation to make the animation play smoother?
Given the dynamic nature of your starting point, I think that scene.beginDirectAnimation as you are, should be fine. What I’d recommend doing though, is to change all instances of camera.position to camera.target on lines 70, 74 and 78 in your PG. This should give you that smooth, dynamic movement.
Thank you for taking a look, I have updated the playground Camera movement | Babylon.js Playground (babylonjs.com)
Yes, you can close this one, thanks