找了一圈没找到react-three/drei的中文文档，那就根据自己组件的使用频率来试着自己写写。写下来可能会不太规范。大部分翻译来自翻译软件。
查看threeJs：基础概念
three.js中文：一些比官方文档讲解的更直观（有免费threejs相关视频教程和一些例子）
查看react-three/drei：收集对@react three/fiber有用的助手和功能齐全的现成抽象

js 复制代码

npm install @react-three/drei

基础用法

js 复制代码

import { PerspectiveCamera, PositionalAudio, ... } from '@react-three/drei'

具体内容

Cameras相机

PerspectiveCamera(透视摄像机)

最常使用

OpenGL帧缓存对象(FBO：Frame Buffer Object )

js 复制代码

type Props = Omit<JSX.IntrinsicElements['perspectiveCamera'], 'children'> & {
  /** 将相机注册为系统默认值，fiber将使用它开始渲染 */
  makeDefault?: boolean
  /** 手动将停止响应，您必须自己计算纵横比。 */
  manual?: boolean
  /** 内容将跟随相机，或者在拍摄时隐藏（如果您传递函数） */
  children?: React.ReactNode | ((texture: THREE.Texture) => React.ReactNode)
  /** 要渲染的帧数, 0 */
  frames?: number
  /** 帧缓存分辨率？？ 未找到合适的翻译, 256 */
  resolution?: number
  /** 功能使用的可选环境贴图 */
  envMap?: THREE.Texture
}

一个响应式 THREE.PerspectiveCamera，可将自己设置为默认设置。

xml 复制代码

<PerspectiveCamera makeDefault {...props} />
<mesh />

您同样可以使用children，这样它将占据与摄像机相同的位置，并随着摄像机的移动而移动。

xml 复制代码

<PerspectiveCamera makeDefault {...props}>
  <mesh />
</PerspectiveCamera>

您也可以手动驱动它，但它不会响应，而且您必须自己计算长宽比。

ini 复制代码

<PerspectiveCamera manual aspect={...} onUpdate={(c) => c.updateProjectionMatrix()}>

您可以使用 PerspectiveCamera 将内容渲染到 RenderTarget 中，与 CubeCamera 类似。作为子代，您必须提供一个 render-function 函数，该函数的第一个参数是纹理。该函数的结果将不会跟随摄像机，而是在 FBO 渲染时将其设置为不可见，以避免接收纹理的网格相互干扰的问题。

xml 复制代码

<PerspectiveCamera position={[0, 0, 10]}>
  {(texture) => (
    <mesh geometry={plane}>
      <meshBasicMaterial map={texture} />
    </mesh>
  )}
</PerspectiveCamera>

OrthographicCamera（正交相机）

一个响应式 THREE.OrthographicCamera，可将它自己设置为默认设置。

xml 复制代码

<OrthographicCamera makeDefault {...props}>
  <mesh />
</OrthographicCamera>

您可以使用 OrthographicCamera 将内容渲染到目标中，它的 API 与 PerspectiveCamera 相同。

xml 复制代码

<OrthographicCamera position={[0, 0, 10]}>
  {(texture) => (
    <mesh geometry={plane}>
      <meshBasicMaterial map={texture} />
    </mesh>
  )}
</OrthographicCamera>

CubeCamera（立方相机）

THREE.CubeCamera 会将其纹理作为渲染属性返回。在渲染到内部缓冲区时，它会让子代不可见，这样它们就不会包含在反射中。 (threejs中CubeCamera定义：创建6个渲染到WebGLCubeRenderTarget的摄像机)

css 复制代码

type Props = JSX.IntrinsicElements['group'] & {
  /** 渲染帧数，无限 */
  frames?: number
  /** 帧缓存分辨率, 256 */
  resolution?: number
  /** Camera near, 0.1 */
  near?: number
  /** Camera far, 1000 */
  far?: number
  /** 临时设置为场景背景的自定义环境贴图 */
  envMap?: THREE.Texture
  /** Custom fog that is temporarily set as the scenes fog 什么场景烟雾？ */
  fog?: Fog | FogExp2
  /** 拍摄立方体时，将隐藏 CubeCamera 的内容 */
  children: (tex: Texture) => React.ReactNode
}

使用帧属性可以控制摄像机是无限渲染还是静态渲染（给定次数）。例如，如果场景中有两个静态物体，可以设置帧数={2}，这样两个物体就都能在反射中 "看到 "对方，而这需要多次渲染。如果有移动的物体，可以取消设置属性，改用更小的分辨率。

javascript 复制代码

<CubeCamera>
  {(texture) => (
    <mesh>
      <sphereGeometry />
      <meshStandardMaterial envMap={texture} />
    </mesh>
  )}
</CubeCamera>

Controls控制器

如果可用控件默认已启用阻尼，它们会管理自己的更新，在卸载时自行移除，并与 frameloop="demand" 画布标志兼容。它们从底层的 THREE 控件继承所有属性。它们是在所有其他 useFrames 之前运行的第一个效果，以确保其他组件可以在它们之上更改摄像机。

有些控件允许设置 makeDefault，类似于 PerspectiveCamera。这将在根存储中设置 @react-three/fiber 的控件字段。在您希望控件为人所知，且应用程序的其他部分可以对其做出响应的情况下，这将使您的工作变得更加轻松。一些 drei 控件已经考虑到了这一点，如 CameraShake、Gizmo 和 TransformControls。

xml 复制代码

<CameraControls makeDefault />

javascript 复制代码

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

Drei 目前导出了 OrbitControls , MapControls , TrackballControls, ArcballControls, FlyControls, DeviceOrientationControls, PointerLockControls , FirstPersonControls CameraControls 和 FaceControls

所有控件都会对默认摄像机做出反应。如果您的场景中有一个 <PerspectiveCamera makeDefault />，它们就会对其进行控制。如果您需要注入一个命令式摄像机或一个非默认摄像机，请使用摄像机属性： <OrbitControls camera={MyCamera} />
此外，PointerLockControls 还支持一个选择器属性，可将用于激活控件的点击事件处理程序绑定到文档以外的其他元素上（例如 "点击此处播放 "按钮）。所有与选择器属性匹配的元素都将激活控件。默认情况下，它还会将光线投射事件置于中心位置，因此网格上的常规 onPointerOver 等事件将继续有效。

CameraControls

xml 复制代码

<CameraControls />

typescript 复制代码

type CameraControlsProps = {
  /** 要控制的摄像机，默认为camera */
  camera?: PerspectiveCamera | OrthographicCamera
  /** 要连接的 DOM 元素，默认为 `gl` 渲染器 */
  domElement?: HTMLElement
  /** 将此 CameraControls 实例作为 `controls` 引用 */
  makeDefault?: boolean
  /** 事件回调, see: https://github.com/yomotsu/camera-controls#events */
  onStart?: (e?: { type: 'controlstart' }) => void
  onEnd?: (e?: { type: 'controlend' }) => void
  onChange?: (e?: { type: 'update' }) => void
}

react-three/drei 慢慢翻译的中文文档

基础用法

具体内容

Cameras相机

PerspectiveCamera(透视摄像机)

OrthographicCamera（正交相机）

CubeCamera（立方相机）

Controls控制器

CameraControls