useFrame with Lerp for camera position animation

Discussion
1

Hello and hope you guys doing well…
im trying to animate camera movement and i tried this because it works well. i wanted to ask if its a good practice or not?

there is variable to control program flow, we call it processStep. when user click, this variable increases each time and by clicking, it moves camera.

Code:

const transferVec        = new THREE.Vector3(0,0,500);
const transferVecfinal = new THREE.Vector3(0,0,-100);

useFrame(() => {
    if (processStep == 3) {
        camera.position.lerp(transferVec,0.01);
    }

    if (processStep == 4) {
        camera.position.lerp(transferVecfinal,0.01);
    }
})
2

yes it’s fine. but better use maath unity damp. lerp looks pretty bad. maath damp has more support for threejs than threejs own lerp function. you can feed it arrays, vectors (2 and 3), quaternions, matrix4, euler, sphericals, colors, etc. also, always use deltas, or else the animation will depend on monitor refreshrate (it will run faster/slower on end user systems).

import { easing } from 'maath'

function Foo() {
  useFrame((state, delta) => {
    easing.damp3(camera.position, processStep == 3 ? [0,0,500] : [0,0,-100], 0.1, delta)
  })
1 Like
3

thanks a lot for your feedback :pray: it helps a lot…