如何用React Three Fiber构建惊人的3D场景

15th November, 2021

2021年11月15日

WebGL is the magic sauce behind Solar Storm , an audio-reactive music video that renders live in the browser. After fumbling around with Three.js for many years, WebGL finally clicked for me thanks to React Three Fiber. That’s because I could use the familiar concepts—components, props, hooks and state—and transfer my app development skills to 3D graphics.

WebGL是Solar Storm背后的魔力，这是一个在浏览器中实时渲染的音频反应式音乐视频。在使用Three.js摸索了多年之后，WebGL终于让我眼前一亮，这要感谢React Three Fiber。这是因为我可以使用熟悉的概念--组件、道具、钩子和状态，并将我的应用开发技能转移到3D图形上。

This article shows you how to create breathtaking 3D animations using React Three Fiber (R3F). We’ll walk through setting up a stage, creating geometry, adding lighting and enabling post-processing effects. What’s more, you’ll get to learn by recreating the animation below from scratch.

本文向你展示如何使用React Three Fiber（R3F）创建令人惊叹的3D动画。我们将通过设置舞台、创建几何体、添加灯光和启用后期处理效果来进行讲解。更重要的是，你将通过从头开始重新创建下面的动画来学习。

Declarative and Componentized WebGL

声明式和兼容式的WebGL

Before we begin, it’s worth covering why building with components offers more benefits than just familiarity.

在我们开始之前，值得一提的是，为什么使用组件构建提供了比熟悉更多的好处。

Breaking up the UI into components makes it easier to reason through your code and build complex interfaces. The structure, styling and associated logic get encapsulated into one reusable module. You can test all its variants and work through its edge cases. The same is true for WebGL.

将用户界面分解成组件，使你更容易推理你的代码和建立复杂的界面。结构、样式和相关的逻辑被封装在一个可重用的模块中。你可以测试它的所有变体，并通过它的边缘案例进行工作。这对WebGL来说也是如此。

With Three.js, the code for creating the geometry & material, combining it into a mesh and animating is split across multiple parts of the file. R3F enables you to package all of that into a single component. That way, you can start by building basic meshes, then progressively combining them to create scenes and finally, layer on post-processing effects.

在Three.js中，创建几何体和材料、将其组合成网格和动画的代码被分割在文件的多个部分。R3F能让你把所有这些都打包成一个单一的组件。这样，你就可以从构建基本网格开始，然后逐步将它们组合成场景，最后再叠加后期处理效果。

Build it up part by part

一部分一部分地建立起来

Storybook is my go-to tool for ...