Wawa Sensei logo

什么是 React Three Fiber?

在我们开始编码之前，让我们看看为什么使用 React Three Fiber 以及它是什么。

WebGL

WebGL 是一种用于在任何兼容 web 浏览器中渲染交互式 2D 和 3D 图形的 JavaScript API，无需使用插件。

它基于 OpenGL ES，这是一种用于嵌入式设备的低级 3D 图形 API。WebGL 允许进行硬件加速的 2D 和 3D 图形渲染，这使得在浏览器中创建运行流畅的复杂可视化和游戏成为可能。

但直接编写 WebGL 代码非常困难且耗时。这就是 Three.js 的用武之地...

Three.js

Three.js 是一个 JavaScript 库，提供了一个简单的 API，用于使用 WebGL 在浏览器中创建和动画化 3D 图形。

它抽象了 WebGL 的许多底层细节，使创建复杂的 3D 场景和动画变得更加容易。

React Three Fiber

React Three Fiber 是 Three.js 的一个 React 渲染器，它允许你以声明的方式使用 Three.js，类似于你如何使用 React 构建用户界面。

它也被称为 R3F。

R3F 提供了一组与 Three.js 对象对应的 React 组件，例如 meshes、lights 和 cameras，并允许你使用 React 的组件模型来构建复杂的 3D 场景和动画。

对于相同的结果，React Three Fiber 代码比 Three.js 代码更简短且更易读。

以下是使用两个库显示立方体的简单示例：

// Three.js
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// React Three Fiber
<mesh>
  <boxGeometry />
  <meshBasicMaterial color={0x00ff00} />
</mesh>

Poimandres

Poimandres 亦称为 pmndrs，是一个非常活跃的开发者集体，他们开发了 React Three Fiber 及其他非常有用的库，如：

  • drei: 一个为 r3f 提供实用 helpers 和全功能组件的集合
  • gltfjsx: 一个命令行工具，它能从 gltf 文件（3D 模型文件格式）生成可直接使用的组件
  • react-spring: 一个基于弹簧物理的动画库
  • zustand: 一个小巧、快速且可扩展的状态管理解决方案
  • react-xr: 一组 React 组件，可以轻松使用 R3F 创建 VR 和 AR 体验 ... 以及更多！

我们将在本课程中使用一些这些库。

我建议您查看这些库，并经常关注它们，因为它们会不断更新新功能和改进。

替代品

还有其他库为其他前端框架提供类似功能，例如 Svelte 的 Threlte，Vue 的 TresJS，以及 Angular 的 Angular Three。

最近 pmndrs 也发布了 drei-vanilla，这是 drei 的一个原生版本，适合那些希望在不使用 React 的情况下使用其组件的人。

< Introduction
Setup >