@react-three/fiber 怎么切换镜头

`@react-three/fiber` 是一个基于 React 的 Three.js 组件库，它提供了一种声明式的方式来编写三维应用。要切换镜头（通常是视角变化），你可以使用 `@react-three/fiber` 中的相机组件以及一些交互控制。

首先，你需要设置好一个主相机 (`useCamera`) 和可能的备用相机，例如 orthographic 或 perspective 相机：

import { useFrame } from '@react-three/fiber';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

function MyScene() {
  const camera = useThree(({ camera }) => camera);

  // 主视图相机
  const mainCamera = useCamera(() => ({
    position: [0, 0, 5],
    lookAt: [0, 0, 0],
  }));

  // 可能的备用摄像头 (比如 orthographic)
  const alternativeCamera = useCamera(() => ({
    position: [0, 10, 10], // 定义新的位置
    type: 'orthographic', // 设置为 orthographic 类型
  }));

  return (
    <mesh>
      {/* ... */}
    </mesh>
    <OrbitControls />
    {/* 添加切换镜头的逻辑，例如按钮或事件监听 */}
    <button onClick={() => setActiveCamera(alternativeCamera)}>
      切换到备选摄像机
    </button>
  );

  function setActiveCamera(camera) {
    camera.ref?.current?.setObject3D('camera', camera);
    if (mainCamera.ref.current) {
      mainCamera.ref.current.object3D.parent.remove(mainCamera.ref.current.object3D);
    }
    mainCamera.ref.current.object3D.parent.add(camera.ref.current.object3D);
  }

  // 更新镜头（这里用 useFrame 防止过度渲染）
  useFrame(() => controls.update());
}

在这个例子中，我们创建了两个相机并分别绑定了它们。当点击切换按钮时，会将当前活跃的相机替换为备选相机，并更新其在场景中的位置。`useFrame` 函数用于同步动画帧以更新 OrbitControls 控制器的状态。