How can I achieve smooth camera movement?

Questions
1

I have implemented the ability to focus on different models by double clicking on them:

function ondblclick(event){
    pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
    raycaster.setFromCamera( pointer, camera );
    const intersects = raycaster.intersectObjects( scene.children );

    if(intersects.length > 0) {
        var pos = new THREE.Vector3();
        intersects[0].object.getWorldPosition(pos);
        controls.target = pos;
    }
}

It work fine, but the movement is instant so it looks and feel bad. What I want is for camera to slowly fly to the new position, instead of teleporting there. I know about the existence of lerp, but I’m very confused about how to use it.

2

You can use gsap to easily implement complex and smooth animations.

npm i --save gsap

Code looks similar to this:

import gsap from 'gsap';

// ...

gsap.to(camera.position, {z: 5, duration: 3});

// ...

This would move the camera from z=currentPos to z=5 in 3 seconds.

2 Likes
3

Thanks sir, this is perfect. Keep up the good work!

4

there’s also pmndrs/maath GitHub - pmndrs/maath: 🪶 Math helpers for the rest of us

it’s unities damping algo but integrated into three. it supports all the common constructs like vec2, 3, 4, quaternion, color, euler, spherical, etc.

5

How would you use it for easing it for a camera animation?

6

Yup good topic. I’d like to keep reading too.

7

Do the code shown above work on mobile ‘onclick’ or, in that case 'function ondblclick(event) ’ -is mobile, or no? Thanks.