
# 结论

**祝贺你！** 你完成了本课程的学习。🎉

希望你**喜欢这个课程**并且**学到了很多**。我尽量让课程对初学者友好，同时也希望通过真实世界的案例展示一些更高级的概念。

如果你有任何反馈或未来课程的建议，请在[Discord 服务器](https://lessons.wawasensei.dev/discord)上让我知道。我很乐意听到你的意见。🙏

如果你能在[TrustPilot](https://www.trustpilot.com/review/lessons.wawasensei.dev)上留下评论，我将非常感激。这将帮助我接触更多人，创造更多内容，并改进课程。🚀

## 接下来该做什么？

你现在已经有了用 **React Three Fiber** 创建自己的 3D 网络体验的坚实基础。但仍然有很多东西可以学习和探索。📚

以下是我建议的继续学习和提升技能的清单：

- 查看 React Three Fiber 的[示例](https://docs.pmnd.rs/react-three-fiber/getting-started/examples)和[文档](https://docs.pmnd.rs/react-three-fiber)。
- 加入 [Poimandres Discord 社区](https://discord.gg/poimandres)。
- 某些组件文档不足？查阅 [Threejs 文档](https://threejs.org/docs/)、[R3F Drei 源代码](https://github.com/pmndrs/drei) 和 [Threejs 源代码](https://github.com/mrdoob/three.js)。
- **创建项目** → 不要局限于你的技能，而是设定目标，尝试通过学习来实现这些目标。将这些项目加入你的作品集。
- 尝试重现 [Awwwards 网站](https://www.awwwards.com/)或其他你喜欢的 3D 网站的部分。
- 订阅我的[YouTube 频道](https://www.youtube.com/@WawaSensei)，观看我的免费 3D 网络开发教程。
- 分享你的作品，获得反馈，并提升 ♻️

**科技 Twitter**（现在叫 **X** 呢...）是学习和发现新事物的好地方。以下是我推荐关注的一些账号：

- [0xca0a](https://twitter.com/0xca0a)
- [Threejs](https://twitter.com/threejs)
- [Adam](https://twitter.com/_Axiome_)
- [Bruno Simon](https://twitter.com/bruno_simon)
- [Anderson Mancini](https://twitter.com/Andersonmancini)
- [Immersive Studios](https://twitter.com/ImmersivStudios)
- [Maxime Heckel](https://twitter.com/MaximeHeckel)
- [Faraz](https://twitter.com/CantBeFaraz)
- [The Ebenezer](https://twitter.com/th_ebenezer)
- [Andrew Woan](https://twitter.com/andrewwoan)
- [Alvaro](https://twitter.com/alvarosabu)
- [Wawa Sensei](https://twitter.com/WawaSensei)

## 感谢 🙏


React Three Fiber: The Ultimate Guide to 3D Web Development

祝贺你，学习了 React Three Fiber 的基础知识。接下来是什么？

结论

Fundamentals

Welcome to this getting started tutorial on how to use react-three-fiber to create unique 3D web experiences.

Introduction

欢迎参加入门教程，学习如何使用 react-three-fiber 创建独特的3D网页体验。

介绍

Learn what React Three Fiber is and why we are using it.

React Three Fiber

了解 React Three Fiber 是什么以及我们为什么使用它。

什么是 React Three Fiber?

Setup your environment with all the tools you need to start building your first 3D application.

Setup

设置你的环境，准备好开始构建你的第一个3D应用所需的所有工具。

环境搭建

Discover the basics of 3D objects: geometries, materials, and meshes.

3D Objects

探索3D对象的基础知识：几何体、材质和网格。

Learn how to transform meshes in 3D space using the position, rotation and scale properties.

Transforms

学习如何使用 position、rotation 和 scale 属性在3D空间中变换网格。

变换

Discover the different types of cameras available in threejs and how and when to use them.

Camera

了解 threejs 中可用的不同类型的相机，以及如何和何时使用它们。

相机

Debug your React Three Fiber scenes with useful helpers and Leva

Debug

使用有用的helpers和Leva调试你的React Three Fiber场景

调试

Learn how to add lights to your scene to illuminate objects.

Lights

学习如何在场景中添加灯光来照亮物体。

灯光

Learn how to cast and receive shadows on your 3D objects.

Shadows

学习如何在 3D 对象上投射和接收阴影。

阴影

Learn how to use React hooks with React Three Fiber.

React Hooks

了解如何在 React Three Fiber 中使用 React hooks。

Core

Learn how to use the essential hooks provided by React Three Fiber.

React Three Fiber Hooks

学习如何使用 React Three Fiber 提供的基本钩子。

React Three Fiber 钩子

Discover how to setup a React Three Fiber project with TypeScript for your next 3D project.

TypeScript

了解如何使用 TypeScript 设置一个 React Three Fiber 项目，为你的下一个 3D 项目做好准备。

Drei provides a set of useful controls to navigate in your scene and interact with objects.

Controls

Drei 提供了一组有用的控件来在场景中导航和与对象交互。

控件

Learn how to handle mouse, keyboard and touch events in React Three Fiber.

Events

学习如何在 React Three Fiber 中处理鼠标、键盘和触摸事件。

事件

Learn how to load and display 3D models in React Three Fiber.

3D Models

学习如何在 React Three Fiber 中加载和显示 3D 模型。

3D 模型

Use images and videos textures in your React Three Fiber projects

Image and video textures

在你的 React Three Fiber 项目中使用图像和视频纹理

图像和视频纹理

Combine HTML elements to your 3D experiences in your React Three Fiber projects

Html

在您的 React Three Fiber 项目中将 HTML 元素结合到您的 3D 体验中

HTML

Add 2D and 3D text to your React Three Fiber experiences.

Text

在你的 React Three Fiber 项目中添加 2D 和 3D 文字。

Add a loading screen to your React Three Fiber experiences.

Loading Screen

为你的 React Three Fiber 体验添加一个加载屏幕。

加载屏幕

Learn how to handle page scroll on HTML and 3D elements in your React Three Fiber projects

Scroll

了解如何在 React Three Fiber 项目中处理 HTML 和 3D 元素的页面滚动

滚动

Discover the different ways to animate 3D elements in your React Three Fiber projects

Animations

探索在 React Three Fiber 项目中为 3D 元素添加动画的不同方式

动画

Master

Discover how to add physics to your 3D projects with React Three Fiber to create realistic simulations or games.

Physics

了解如何使用 React Three Fiber 在您的3D项目中添加物理效果，以创建逼真的模拟或游戏。

物理

Discover ways to make your React Three Fiber projects more attractive.

Staging

探索让您的 React Three Fiber 项目更具吸引力的方法。

场景搭建

Learn how to perfectly display multiple 3D views within your HTML page.

Views

学习如何在 HTML 页面中完美展示多个 3D 视图。

视图

Animate your 3D scene camera with a variety of controls to create beautiful transitions.

Camera Controls

使用各种控制动画化您的3D场景相机，实现美丽的过渡效果。

相机控制

Learn how to render your 3D scene to a texture to create a variety of effects.

Render Target

学习如何将3D场景渲染到纹理以创建各种效果。

渲染目标

Post processing effects with React Three Fiber

Post Processing

使用 React Three Fiber 进行后期处理特效

后期处理

Learn how to create cinematic 3D transitions with React Three Fiber and Theatre.js.

Theatre.js

通过 React Three Fiber 和 Theatre.js 学习如何创建电影般的 3D 过渡效果。

Give the best experience to your users whatever their device is

Optimization

为用户提供最佳使用体验，不论他们使用什么设备

优化

Shaders

Learn about shaders and how to use them in React Three Fiber.

Introduction to Shaders

学习在 React Three Fiber 中如何使用着色器。

着色器简介

Control your shader's output with shaping functions.

Shaping functions

使用塑形函数控制着色器的输出。

塑形函数

Create a shader based responsive image slider with React Three Fiber.

Image slider

使用 React Three Fiber 创建基于 shader 的响应式图像滑块。

图像滑块

Create an advanced water shader using React Three Fiber and GLSL.

Water shader

使用 React Three Fiber 和 GLSL 创建高级水效果着色器。

水着着色器

Learn how to create screen and model transitions using shaders with React Three Fiber.

Shader transitions

学习如何在 React Three Fiber 中使用 shaders 创建屏幕和模型转场。

Shader 转场

Learn what VFX is and how it can be used in Three.js and React Three Fiber to add more life to your 3D scenes.

VFX Introduction

学习什么是 VFX 以及如何在 Three.js 和 React Three Fiber 中使用它来为您的 3D 场景增添更多生气。

VFX 简介

Discover how to use instancing to create particles with Threejs and R3F

Particles

了解如何使用 Threejs 和 R3F 创建粒子

粒子

Learn how to create trails with Threejs and React Three Fiber

Trails

学习如何使用 Threejs 和 React Three Fiber 创建 trails

Build a simple VFX engine using React Three Fiber to emit particles in your 3D web projects.

VFX Engine

使用 React Three Fiber 构建一个简单的 VFX 引擎，以在您的3D网页项目中发射粒子。

Learn how to create beautiful fireworks with Three.js, React Three Fiber, and our VFX engine.

Fireworks

学习如何使用 Three.js、React Three Fiber 和我们的 VFX 引擎创建美丽的烟花效果。

烟火

Create an immersive 3D wizard game with Three.js and React Three Fiber where you'll implement spell-casting mechanics, enemy AI, and dazzling magical effects using custom VFX techniques.

Wizard Game

使用 Three.js 和 React Three Fiber 创建一个沉浸式的 3D 魔法师游戏，在游戏中您将实现施法机制、敌人 AI 和使用自定义 VFX 技术的惊人魔法效果。

魔法师游戏

Learn how to use WebGPU with Threejs and discover the new Three Shading Language (TSL) with React Three Fiber.

WebGPU / TSL

了解如何在 Three.js 中使用 WebGPU，并通过 React Three Fiber 探索新的 Three Shading Language (TSL)。

Leveraging TSL and WebGPU for GPGPU particle simulation

GPGPU particles with TSL & WebGPU

利用 TSL 和 WebGPU 进行 GPGPU 粒子模拟

利用 TSL 和 WebGPU 实现 GPGPU 粒子

Portfolio

Create a great looking portfolio with everything you've learned so far.

3D World

利用你到目前为止所学的一切创建一个看起来很棒的作品集。

作品集：3D 世界

Part 2 of the portfolio project: create the HTML interface.

HTML interface

作品集项目的第 2 部分：创建 HTML 界面。

作品集：HTML 界面

Final part of the portfolio project. We will make our website responsive.

Responsive

作品集项目的最后一部分。我们将使我们的网站响应式。

Portfolio: 响应式

Congratulations, you learnt the fundamentals of React Three Fiber. What's next?