convert position to alpha, beta for ArcRotateCamera

[ZenZoy]

I have an ArcRotateCamera targeted on a sphere like this:

    camera = new BABYLON.ArcRotateCamera("camera", 0, 0, 10, BABYLON.Vector3.Zero(), scene);

 

    earth = BABYLON.Mesh.CreateSphere("earth", 16, 2, scene);

 

After clicking on the sphere at point P1 = (x1, y1, z1) , I'd like for the camera to animate in a way that it would change its focus directed at P1.

Ideally I would like the camera to animate to a new position P2 = (x1 * 2, y1 * 2, z1 * 2)

 

but I realized that I need to animate an arcRotateCamera using its alpha, beta and radius.

So my question is how can I convert P2 position to its corresponding alpha, beta and radius to give me this animation affect.

 

thanks in advance,

Sima

 

[JCPalmer]

Some recommendations:

• create earth first, set target of camera to earth in its constructor, instead of Vector3.Zero.  Radius no longer needs calcing.
• do this twice: camera.animations.push(null); // you can now assign by index, so the next click throws away the last set
• calculate new values for alpha, & beta.  Your problem.
• create a set of animations, one for alpha, the other for beta, then assign them to camera.animations[0] & [1]
• scene.beginAnimation(camera, 0, 30, true, 1);

The animation should go something like:

var alphaAnim = new BABYLON.Animation('name', camera, 'alpha', 30, Animation.ANIMATIONTYPE_FLOAT);var keys = []; keys.push({frame: 0 , value: camera.alpha});keys.push({frame: 30, value: newAlpha});alphaAnim.setKeys(keys);

[ZenZoy]

Thanks for your reply but the part that you have noted as "Your Problem" is actually the part that I need help with!

 

I want to know how can I calculate this new alpha and new beta for arcRotateCamera based on a clicked position on an sphere.

[iiceman]

Hi there and welcome to the forum!

 

Do you already know the playground? --> http://www.babylonjs-playground.com/

 

It's always a good start to create a playground scene that illustrates your problem and what you already have. People can directly edit your scene and provide you ideas based on your code.

 

I started setting up a playground for the problem that gives you the alpha and beta values for the new camera position with the help of a "ghost camera". The idea is to set the ghost camera with the setPosition() function that the arc rotate camera has and then read the angle values. Seems to work well, maybe you already know how to animate it based on those values and that's already what you wanted. I played around a bit more since I wanted to show the animation of the camera, too. I didn't succeed. It's not as easy to animate the camera with the alpha and beta values as one might think. If you find a good way to do it, please show me!

 

Anyway, after trying out different stuff I ended up with animating the camera by moving it in a straight line from old to new position (ignoring the alpha and beta values). That works but looks a bit odd since you would expect the camera to move in an arc. So here is the playground, hope it helps: http://www.babylonjs-playground.com/#4IVMG#0

 

Maybe somebody else has a better idea about how to animate the camera so that it moves in an arc and doesn't mess up directions or getting stuck in some gimbal lock kinda of position.

 

By the way: bold move using your email as a nick name, not afraid of spam, eh?

[Convergence]

Maybe somebody else has a better idea about how to animate the camera so that it moves in an arc and doesn't mess up directions or getting stuck in some gimbal lock kinda of position.

 

Nice work A quick and dirty fix for the arc: http://www.babylonjs-playground.com/#4IVMG#1

 

By the way: bold move using your email as a nick name, not afraid of spam, eh?

Many websites use email as loginname nowadays, perhaps she was confused 

[iiceman]

@Convergence: nice, I didn't think about the camera.radius property!

 

Just found another way while playing around to set the radius that works, too: http://www.babylonjs-playground.com/#4IVMG#2

I ended up with scaling the position vector to have the same length as the target position before setting it in each step. But that might only work if the planet to rotate around is in the origin of the coordinate system. Not sure.... but it's too late, got to sleep.

[ZenZoy]

Thanks alooot guys, this is awesome!

I have joined the forum a day, I have learned so much and I already feel welcomed! 

 

email name no more! I go by ZenZoy from now on!

[iiceman]

I am glad we could help! Good luck with you project and don't forget to keep us up to date how things are going or if you need anything else!

[ZenZoy]

sure thing, tnx 

[FireFist]

Found a cool way to animate the position using TweenJS http://www.createjs.com/tweenjs.

createjs.Tween.get(camera).to({ alpha: Math.PI, radius: 20 }, 1000);