Slowly turning camera

[oschakravarthi]

Hi, I have Sphere1, Camera and Sphere2 in a straight line,  Camera is now looking Sphere1. Now I need to very slowly turn camera to Sphere2. (May be 60 degrees per second)

I tried doing so but it is turning very fast.  

Here is the PG.

https://www.babylonjs-playground.com/#HI70D3

 

Please help me.

 

Thanks in advance.

[bghgary]

The problem is that you've set up the animation to transition between two positions that are exact opposite of each other which will result in the animation interpolation jumping from one rotation to the other rotation in the middle. You can fix this by adding a new point and use tangents to smooth out the animation, but if you just need to rotate, then it might be better to animate the rotation value instead of lockedTarget.

https://www.babylonjs-playground.com/#HI70D3#1

 

[Wingnut]

https://www.babylonjs-playground.com/#HI70D3#2

There's another version... with some simple utility animators at the top.

Here, I set the lockedTarget pivotPoint... so it is offset.  Then we can rotation-animate the lockedTarget, and it goes "around" instead of "past", as @bghgary teaches us.

Enable line 68 and disable line 71... for a wide-view of what's being done.

Yeah, this is a strange issue.  When do we turn the camera (without using a locked target)?  When do we use a target or lockedTarget (with invisible mesh)?

Sometimes one way, socould be a problem... IF spheres are sometimes CLOSE-TO camera and sometimes FAR-WAY.  Then, it's best to make a moveTO animator for the (invisible) lockedTarget... moving it from clicked-mesh, to clicked-mesh, or whatever.

Camera-aiming adventures!  Part of the fun of 3D land, eh?  You betcha. 

[oschakravarthi]

Thank you @bghgary and @Wingnut

@bghgary, in my example, we need to rotate the camera for 90 degrees and then 180 degrees. The same you implemented (hard-coded the values).  

When we generalize the problem, it will become  "How to rotate camera (with animation) towards a point".

So, now we need to compute the required Rotation Vector3 based on: 

1. The current position of camera.

2. The current rotation of the camera.

3. The point to look at

 

So,  I am looking for a way to implement the below function.

function computeRotationVectorToLookAtAPoint(currentPositionOfObject, currentRotationOfObject, pointToLookAt){

////Compute the required rotation vector;

return computedRotationVector.

};

[Sebavan]

We have all the functions you want in the framework in the math class: https://github.com/BabylonJS/Babylon.js/blob/master/src/Math/babylon.math.ts

For instance on the Matrix class: https://doc.babylonjs.com/api/classes/babylon.matrix#lookatlh

And then on the Quaternion(https://doc.babylonjs.com/api/classes/babylon.quaternion top links might help if you do not know what it is), you have the fromRotationMatrix : https://doc.babylonjs.com/api/classes/babylon.quaternion#fromrotationmatrix

I guess coupling both you could extract the required rotation.