Jump to content

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.


Link to comment
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);


Link to comment
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.



Link to comment
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!

Link to comment
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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...