ReactThreeFiber完整指南：组件、API与示例
React Three Fiber 完整指南：组件、API 与示例
引言
React Three Fiber 是一个用于 React 的 Three.js 渲染器。它允许你使用声明式的 React 组件构建高性能的 3D 图形。与直接使用 Three.js 相比，React Three Fiber 提供了许多优势，包括：
- 声明式编程： 使用 React 组件构建 3D 场景，更易于理解和维护。
- 组件化： 将 3D 场景分解成可重用的组件，提高代码的可复用性和可维护性。
- 与 React 生态系统集成： 可以轻松地与其他 React 库集成，例如状态管理库和 UI 库。
- 性能优化： 利用 React 的 reconciliation 算法，高效地更新 3D 场景。
- 热重载： 在开发过程中可以实时查看更改，提高开发效率。
本指南将深入探讨 React Three Fiber 的各个方面，包括其核心组件、API 和实际示例，帮助你全面掌握这个强大的库。
1. 安装与设置
开始使用 React Three Fiber 之前，你需要安装以下依赖项：
bash
npm install three @react-three/fiber
或者使用 yarn：
bash
yarn add three @react-three/fiber
这里安装了 three（Three.js 库）和 @react-three/fiber（React Three Fiber 库）。
如果你使用 create-react-app 创建项目，则可以直接使用以上命令安装。
2. 核心组件
React Three Fiber 提供了几个核心组件，用于构建 3D 场景：
<Canvas>： 这是 React Three Fiber 的根组件，负责创建 Three.js 的WebGLRenderer、Scene和Camera。所有其他的 React Three Fiber 组件都必须放在<Canvas>组件内部。<mesh>： 表示一个网格物体，是构成 3D 场景的基本单元。它需要一个几何体（geometry）和一个材质（material）来定义其形状和外观。<ambientLight>： 环境光，为场景提供整体照明。<directionalLight>： 平行光，模拟来自特定方向的光源，例如太阳光。<pointLight>： 点光源，从一个点向四周发射光线。<spotLight>： 聚光灯，模拟锥形光束的光源。<perspectiveCamera>： 透视相机，模拟人眼的视角。<orthographicCamera>： 正交相机，没有透视效果，常用于 2D 场景或 UI 元素。
3. 常用 API
React Three Fiber 提供了一些常用的 API，用于处理交互、动画和状态管理：
useFrame： 这个 hook 在每一帧渲染时被调用，用于创建动画和处理实时更新。useThree： 这个 hook 提供了对 Three.js 对象的访问，例如scene、camera和renderer。extend： 用于将 Three.js 类扩展为 React Three Fiber 组件，方便使用自定义的几何体、材质和着色器。- 事件处理： React Three Fiber 组件支持常见的鼠标和触摸事件，例如
onClick、onPointerOver、onPointerOut等，用于实现交互。 useLoader: 这个 hook 方便从外部文件加载 3D 模型，比如 GLTF，OBJ 等格式的模型。
4. 示例代码
4.1 基本场景
以下代码创建了一个简单的场景，包含一个旋转的立方体：
```javascript
import React, { useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
function Box(props) {
// This reference gives us direct access to the THREE.Mesh object
const ref = useRef()
// Hold state for hovered and clicked events
const [hovered, hover] = useState(false)
const [clicked, click] = useState(false)
// Subscribe this component to the render-loop, rotate the mesh every frame
useFrame((state, delta) => (ref.current.rotation.x += delta))
// Return the view, these are regular Threejs elements expressed in JSX
return (
onPointerOver={(event) => hover(true)}
onPointerOut={(event) => hover(false)}>
)
}
export default function App() {
return (
)
}
```
代码解释：
<Canvas>组件创建了 Three.js 的渲染环境。<ambientLight>组件添加了环境光。<pointLight>组件添加了一个点光源。Box组件是一个自定义组件，渲染了一个立方体。useRef用于获取对mesh对象的引用。useFrame用于在每一帧更新立方体的旋转。useState用于处理鼠标悬停和点击事件，并根据状态改变立方体的颜色和大小。
4.2 加载外部模型
以下代码展示了如何使用 useLoader 加载一个 GLTF 模型：
```javascript
import React, { Suspense } from 'react'
import { Canvas } from '@react-three/fiber'
import { useGLTF, OrbitControls } from '@react-three/drei'
function Model(props) {
const { scene } = useGLTF('/model.gltf') // 替换为你的模型路径
return
export default function App() {
return (
)
}
```
代码解释：
useGLTF是@react-three/drei库提供的 hook，用于加载 GLTF 模型。@react-three/drei是一个常用的 React Three Fiber 工具库，提供了许多实用组件和 hooks。需要额外安装：npm install @react-three/drei。Suspense组件用于处理模型加载过程中的异步操作，fallback属性指定了加载过程中显示的占位内容。OrbitControls组件允许用户通过鼠标控制相机视角。<primitive>组件用来添加已有的 Three.js object。
5. 进阶主题
5.1 状态管理
对于复杂的 3D 场景，可以使用 React 状态管理库（例如 Zustand, Redux）来管理场景状态。这将有助于更好地组织代码和处理复杂的交互逻辑。
5.2 着色器
React Three Fiber 可以与自定义着色器一起使用，以创建更高级的视觉效果。你可以使用 extend 将自定义着色器材质扩展为 React 组件。
5.3 性能优化
- 使用 InstancedMesh： 对于大量重复的几何体，可以使用
InstancedMesh来减少 draw call，提高渲染性能。 - 几何体和材质复用： 尽可能复用相同的几何体和材质对象。
- 使用 BufferGeometry： 直接操作顶点数据，可以获得更高的性能。
- 代码分割： 将不常用的组件或模型进行代码分割，按需加载。
6. 生态系统
除了 @react-three/fiber 和 @react-three/drei，还有许多其他库可以与 React Three Fiber 结合使用，例如：
react-spring： 一个基于物理的动画库，可以创建流畅的动画效果。leva： 一个 GUI 库，可以方便地调整组件的参数。postprocessing: 一个后期处理库, 可以实现例如景深，辉光等后期效果。需要额外安装：npm install postprocessing
7. 总结
React Three Fiber 是一个强大且易用的库，它将 React 的声明式编程和组件化特性带入了 Three.js 的 3D 世界。通过本指南，你应该已经对 React Three Fiber 的核心概念、API 和使用方法有了深入的了解。现在，你可以开始构建自己的 3D 项目，并探索 React Three Fiber 提供的无限可能！
8. 进一步学习
- React Three Fiber 官方文档： https://docs.pmnd.rs/react-three-fiber/getting-started/introduction
- Three.js 官方文档： https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene
- Awesome React Three Fiber： https://github.com/pmndrs/awesome-react-three-fiber
希望这篇指南对你有帮助！