使用react在Three.js中对摄像机进行动画处理

Question

希望在Three.js中对照相机进行动画处理...我发现了一个移动式摄影车即时通讯工具，我想知道围绕此问题的最佳做法是什么？是使用补间吗？

这是onclick动作

function Dolly({zoom, pos, scene}) {

  useFrame(state => {
    if(!zoom) return;
    state.camera.position.z = pos[2] + Math.sin(state.clock.getElapsedTime()) * 3
    state.camera.updateProjectionMatrix() 
  })
  return null
}

这是场景

export default function App() {
  const [showPlane, set] = useState(true);
  const [pos, setPos] = useState([-10, 0, 15]);
  const [zoom, setZoom] = useState(false);

  useEffect(() => void setTimeout(() => set(false), 5000), [])
  const scene = new THREE.Scene();

  const onPlaneClick = (e) => {
    setZoom(true);
  };

  return (
    <Page>
      <Canvas className="main" shadowMap camera={{ position: pos }}>
        <ambientLight intensity={0.5} />
        <spotLight intensity={0.6} position={[30, 30, 50]} angle={0.2} penumbra={1} castShadow />
        <Provider>
          <Plane position={[0, 0, 0]} onPlaneClick={onPlaneClick} />
          <Box position={[0,0,3]} />
        </Provider>
        <Dolly zoom={zoom} pos={pos} scene={scene}/>
      </Canvas>
      <h1 style={{ color: 'white' }}>
        f***ing
        <br />
        good
      </h1>
    </Page>
  )
}