Camera.lookAt() but smoothly

Hello, is there a simple way to add a time pera meter to camera.lookAt() function?
for example…

Camera.lookAt(object.position, time);

I’ve been looking into tween and quaternion. Slerp but they are update/animation frame based so a solution for say scrolling events, where a camera is moving on scroll, becomes pretty complex!

any suggestions would be greatly appreciated

Hi!

What difficulty you had with it?

If the time per meter is known, then you just calculate the duration of tweening, by multiplying distance (between current location and destination) with that time value.

Thanks for the reply, ideally I want to use pure threejs without having to use tween library, if I don’t find a way I will have to, but trying to use minimal resources, trying a few things out but I will let you know if I end up using tween!

A bit of background info about tween.js
It is included in the libs when you run
npm install three@latest

And one of it earliest contributing developers was mrdoob.

So I consider it as good as being official.

You could use Vector3#lerp – three.js docs and then calculate alpha depending on time since last update * your meter unit * a percentage of how long it should take. I’ve never tried it it, so i don’t know the function. But you’d also use the lerp inside your animation loop, or other regularly called render update function otherwise you wouldn’t see it update on the canvas.

Hey dude, thanks for your reply! I have done a few really simple bits with tween before but didn’t seem necessary for what I needed, I’ve managed to do it by simply setting up a 3d object as cameraTarget, then with camera.lookAt(cameraTarget) in animation loop it’s just a case of moving the cameraTarget from one point to another with cameraTarget.position.lerp(new.position, 0.1) works a charm and is super simple just had to get my head around it!

Thanks everyone x