Hello,
I am trying to animate an ArcRotateCamera so that it would focus on a point which lies on the surface of a mesh.
My example Babylon.js Playground
just puts the point into the camera’s center when you click on a red dot.
However I’d like to let the camera rotate around the sphere’s center until the dot is aligned with the camera.
Not sure if this requires some trigonometry or if the camera has a built in function for that.
Thanks!
Though this could easily be an involved and long answer it doesn’t have to be; create a TransformNode and position it where you want the camera to actually look. Set that node as the camera target, and set the parent node of the TransformNode to be the mesh. Use the camera’s framing and rotation behaviors to do the rest!
No maths, no hidden camera magic 
HTH
Hello and thanks for the reply.
I did create a playground to work with this:
https://playground.babylonjs.com/#H73H1X#3
However, I guess I must have missed something crucial as the camera still does not rotate around the sphere.
Maybe you could have a look?
Thanks
Two things:
First, you set the framingTime and elevationReturnTime to -1 and 0, respectively. Those settings effectively disable the behavior entirely.
Second, you need to enable the autorotation behavior by setting camera.useAutoRotationBehavior = true
I saved a revised snippet that shows it as your next revision (#4) Babylon.js Playground
Thanks.
But, well that would not be the behavior I am looking for.
The camera does not rotate around the sphere it just moves it off-center to put the clicked point in the center. Also that auto-rotation is not desired. I could probably set the idleRotationSpeed to near zero but that feels quite hacky.
Seems I do need to get the old trigonometry out.
https://playground.babylonjs.com/#H73H1X#5
I think you can do something like this. Check it out and try to adjust to what you need.
Ahhh!
Thanks so much!
1 Like
Hello again,
so I have been playing with the animation a bit and there are some issues I do not understand quite correctly it seems.
I changed the value for the duration of the animation but for some reason some transitions are still very fast.
Also when zoomed out the animation first zooms in and then rotates around.
Is there a way to synchronize all the parameters?
As I understand the “CreateAndStartAnimation” function only animates the “cameraAnimationX” property and I am not sure where the zoom comes from.
Here is an updated version of the playground with a different easing and speed to illustrate what i mean.
https://playground.babylonjs.com/#H73H1X#7
Thanks for all suggestions.
As far as I can tell, the PG you are linking is just moving the position of the camera in a straight line towards the target point. This will end up in the right place, but the motion won’t feel correct. I think what you really want to be doing is staying the same distance from the sphere, but changing the alpha value of the ArcRotateCamera so that it orbits the sphere. I tried to put together a simple diagram for this:
What you have right now is the red line, but what you want is closer to the blue line; a path that travels along an imaginary circle centered at the origin, rather than a straight line.
In order to do this, what you’ll need to do is calculate the target alpha value (and maybe beta value, too), and then animate those properties, rather than animating the position property. If you hold the radius constant, this will create the desired spinning effect. (At least, I think this is what you are going for.) In order to calculate the correct values, you will need to do a bit of trigonometry…this forum thread might help you get started.
Let me know if you’re able to get that working 
Well, so I do have to get ye olde trigonometry-knowledge out of the bottom drawer of the deepest recesses of my brain…
YUP and this is the step you will think about the school lesson you did not listen too thinking you will never need that
Oh, well I did listen. And I even liked it.
But that was a looooooooooooooooong time ago
last time I used it was 10 years ago, when I created a little cannon game
I wish I listened lol cause I love it way too much now
1 Like