LookAt smooth rotation or animation

Hi,

I’m using the lookAt() function to rotate a 3D character towards a vector. However this is instant and doesn’t look natural. Is it possible to animate the lookAt() or have slower rotation so that the result is more natural instead of instant?

Thanks!

Hi!
Use Tween.js or GSAP libraries for that purpose.
Or write something your own.

I just need a way to rotate an object towards a target xyz position but not instantly. I can’t use the built in Three JS functions for this?

@vielzutun.ch feels like you’re being aggressive for no reason - he just asked if there’s a built in function that may help him :face_with_raised_eyebrow:

And there is one indeed :relaxed: Rants aside, you can mix using state with (s-)lerping to create smooth movement / rotation.

let targetQuaternion;

// NOTE Put this function in your animation loop, so that it’s called on each frame:
const onFrame = () => {
  if (!targetQuaternion) {
    return;
  }

  character.quaternion.slerp(targetQuaternion, 0.2);
};

const smoothLookAt = (target) => {
  const mock = new Three.Object3D();

  character.parent.add(mock);
  mock.position.copy(character.position);
  mock.lookAt(target);

  targetQuaternion = mock.quaternion.clone();

  mock.parent.remove(mock);
};
1 Like

I had a bad day and let it out on the wrong occasion. I apologise.

3 Likes

@mjurczyk Thank you for the solution, if I have the following xyz target position within the world that I would like the object to rotate to:

x: -3.45, y: 1.43, z: -6.62

How would I be able to calculate the targetQuaternion you mentioned?

Are you looking for something like this?

What you could do is first create a mock object at that position, and then use that as target in the smoothLookAt function.

I solved it using this method: