# solved LookAt with gradual trasition

## Recommended Posts

Hi All,

I would like to use lookAt to make the mesh rotate towards a target, but currently it face the angle immediately.

How do I make it turn towards the target angle gradually?

Also, I notice a strange behavior, when I change the value of rotationQuaternion of the mesh directly by perhaps doing mesh.rotationQuaternion.x+=0.02; the mesh get stretched instead of rotated.

Thanks

##### Share on other sites

hi saltemishel,

i can't take credit for this PG, but does a gradual rotation with Quaternion.SlerpToRef: https://www.babylonjs-playground.com/#UMQ4UR#2

Change the "slerpAmount" to adjust the speed.  ie: 0.1 will slow it down.

For rotating the mesh on X you can use rotate function instead of working on rotationQuaternion directly - i think amount is in radians.

``mesh.rotate(BABYLON.Axis.X, Math.PI / 4, BABYLON.Space.LOCAL);``

##### Share on other sites

Hi brianzinn,

It's still cool, thanks a lot for your help!

##### Share on other sites

Hi,

Doing rotationQuaternion.x += 0.02 will not make the mesh rotate around anything, it's not the way Quaternion work. You'd better do something like

rotationQuaternion = BABYLON.Quaternion.RotationAxis(BABYLON.Axis.X, 0.02).multiply(rotationQuaternion)

I'm facing the same issues with the LookAt method, as it does not return a Quaternion (so you can't make a Slerp from your current rotationQuaternion to the lookAt rotationQuaternion),

Here's a method (at the end of the script) that returns a lookAt Quaternion from which you can call slerp.

##### Share on other sites

Hi SvenFrankson,

Cool, will try that out.

##### Share on other sites

Here they try to explain what you might want to do with quaternion addition :

The reason why you add vectors to compose translations and multiply quaternions to compose rotations is out of my math knowledge ^^

##### Share on other sites

Thanks~ I'll try to digest it as much as I can lol

##### Share on other sites

Hi guys!  Here's another way.

Recently, I made some utility funcs... move, moveTo, spin, spinTo, scale, scaleTo  (yawn).  They are each wrappers for BABYLON.Animation.CreateAndStartAnimation

You can see them at the top of that playground.

Let's go find the call.  Lines 144-149.

PRETEND that the pink box is called dummyLookAtTarget and it is set .visibility = 0;

Using the moveTo animator (with cubic ease in/out built-in, but also removable)... you can make box4 do an animated-lookAt... by just animating the dummy target position... to the ACTUAL target position.  (The first parameter in moveTo() is un-used and can be removed.)

Hard to explain, but easy to see it happen.  Grab that moveTo function for your project... and borrow some test lines from 144 - 149 area, if you wish.

It's probably not the BEST solution, but it still IS one.  Party on!

##### Share on other sites

Hi Wingnut,

Woaw! That's gonna be really useful for many projects!

Will definately play around with it.

Thanks for sharing!

##### Share on other sites

Cool.  I wish I could take credit... but really... all this power comes from the ability to make a mesh invisible.  That feature opened-up a ton of possibilities. Invisible grouping-parents, cam gizmos, light gizmos, physicsImpostors, etc.  Invisible mesh, and un-rendered "empty mesh"... have been "the solution" for tons of projects/issues.

Adam used a blank mesh, recently, to make ONLY a bounding box.  I bookmarked that puppy a few hundred times.  We might never finish the list of things possible with invisible and blank mesh.  I love 'em.

And the spinTo/moveTo/scaleTo/colorTo stuff... all possible because of createAndStartAnimation().  I look good (sometimes)... because-of tools written by others, and not because of anything seen when Wingnut looks into a mirror.

PS: I had an un-used skybox in that #75 playground, so I removed it and updated link to #76.

##### Share on other sites

well you still need to have gone through all those process in your brain to gain your "Wingnut" experience.

So the credit is definitely yours for sure as no one have the same experience as everyone else!