How we can stop useFrame animation in react-three-fiber

Questions
1

I want to know has any way to stop useFrame animation in react-three-fiber such as cancelAnimationFrame ?

2

as ive written in the other post: <Canvas frameloop="demand"

export function lerp(
  object: { [key: string]: any },
  prop: string,
  goal: number,
  speed = 0.1,
  eps = 0.001,
) {
  object[prop] = THREE.MathUtils.lerp(object[prop], goal, speed);
  // If the value is not finished processing invalidate the frame-loop
  if (Math.abs(object[prop] - goal) > eps) {
    invalidate();
  }
}

useFrame(() => {
  lerp(ref.position, "x", someFlag ? 0 : 1, 0.1)
})

there are many other ways. essentially you can also have your own frameloop and do whatever you want:

<Canvas frameloop="never">

const advance = useThree(state => state.advance)

useEffect(() => {
  function loop(t) {
    // Process one frame, this calls all useFrames and effects as well
    advance(t)
    requestAnimationFrame(loop)
  }
  loop()
, [])

though again, before you go there ask yourself why. it often makes sense to have a running loop, 99.9% of all threejs apps and games have that for a reason. browsers are very clever in managing raf. i would only start to mess with this if there was a real problem and otherwise let the loop run.

1 Like