react-three/drei中PerspectiveCamera组件的使用

在使用 `react-three/drei` 中的 `PerspectiveCamera` 组件时，需要先导入该组件：

import { PerspectiveCamera } from 'react-three/drei';

然后在 `Canvas` 组件中使用 `PerspectiveCamera` 组件，并将其作为子组件传入：

<Canvas>
  <PerspectiveCamera
    makeDefault
    fov={75}
    near={0.1}
    far={1000}
    position={[0, 0, 5]}
  />
  {/* 其他组件 */}
</Canvas>

在 `PerspectiveCamera` 中，有一些属性需要进行配置：

- `makeDefault`：设置为 `true` 时，该相机将成为默认相机。
- `fov`：相机视锥体垂直视野的角度，单位为度。
- `near`：相机视锥体近端面的距离。
- `far`：相机视锥体远端面的距离。
- `position`：相机在三维空间中的位置，以数组形式传入。

此外，还可以通过 `React.forwardRef` 将 `ref` 传递给 `PerspectiveCamera` 组件，以便在代码中对相机进行操作：

import { PerspectiveCamera } from 'react-three/drei';

const MyComponent = React.forwardRef((props, ref) => {
  return (
    <PerspectiveCamera
      makeDefault
      fov={75}
      near={0.1}
      far={1000}
      position={[0, 0, 5]}
      ref={ref}
    />
  );
});

const App = () => {
  const cameraRef = useRef();

  useEffect(() => {
    // 对相机进行操作
  }, []);

  return (
    <Canvas>
      <MyComponent ref={cameraRef} />
      {/* 其他组件 */}
    </Canvas>
  );
};