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.


Share this post

Link to post
Share on other sites

hi saltemishel,

i can't take credit for this PG, but does a gradual rotation with Quaternion.SlerpToRef:

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 this post

Link to post
Share on other sites


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 this post

Link to post
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 this post

Link to post
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.  :D

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

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.