LookAt smooth rotation or animation

Questions
,
1

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!

2 Likes
2

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

3

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?

1 Like
5

@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 :smiling_face: 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);
};
4 Likes
6

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

3 Likes
7

@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?

8

Are you looking for something like this?

9

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

10

I solved it using this method:

11

@Mugen87

Please forgive the simplicity of this question.

I have a camera and various objects located in different positions. Current when I click on an object, I perform the following code to for ce the camera to look at the object:

let wp = new THREE.Vector3();
object[current][active_index].getWorldPosition(wp);
camera.lookAt(wp)

How can I change this to gradually pan the camera to the object over, say, a 1 second period?

Thanks
Villmer

12

@POP

From what I know(and I don’t know much), it is easier to use something like Camera Controls to handle all of the rotations, quaternions etc than handling it yourself.

Instead of specifying exact animation duration with Camera Controls, you will need to play with smooth damping settings to fine tune the approx time it takes for animation/transition to reach the end.

Here is another example of a 3d party library that you may find useful - https://nytimes.github.io/three-story-controls/examples/demos/story-points/