Three.js, React Three Fiber, Drei, React Spring & More
Three.js、React Three Fiber、Drei、React Spring 等
了解使用 Three JS 和 React 构建身临其境的创意网站所需的一切
教程演示🔗
更多开发教程
What you’ll learn 学习内容
-
How to install ThreeJs library and import it into your project
如何安装 ThreeJs 库并将其导入到您的项目中 -
Learn the basics of ThreeJs with many demonstrations and example code
通过许多演示和示例代码学习 ThreeJs 的基础知识 -
Learn about the ThreeJs Scene, Camera and Renderer
了解 ThreeJs 场景、摄像机和渲染器 -
Creating our very first scene in ThreeJs
在 ThreeJs 中创建我们的第一个场景 -
How to move and animate the Objects
如何移动对象并为其添加动画效果 -
Learn about Webpack, NodeJs ,and serving ES6 modules to the browser clients.
了解 Webpack、NodeJs 以及向浏览器客户端提供 ES6 模块。 -
Learn about Geometries such as Box, Sphere, Plane, Torus, TorusKnot and more
了解几何图形，如“盒子”、“球体”、“平面”、“圆环”、“圆环结”等 -
Learn about the Basic, Normal, Lambert, Phong, Standard, Matcap and other materials
了解 Basic、Normal、Lambert、Phong、Standard、Matcap 和其他材料 -
We also will learn how to create a stunning Scene using Particles
我们还将学习如何使用粒子创建令人惊叹的场景 -
Learn React Basics and hooks such as useState,useEffect,useRef, etc
学习 React 基础知识和钩子，例如 useState、useEffect、useRef 等 -
Learn what is meant by JSX
了解 JSX 的含义 -
Will also learn about React Rules, Styles, etc
还将学习 React 规则、样式等 -
Will bring everything we have done so far in native threejs to react environment under what is called React Three Fiber
将把我们迄今为止在原生 threejs 中所做的一切带到所谓的 React Three Fiber 下的反应环境中 -
A lot of Drei components will be covered
将涵盖许多 Drei 组件 -
Learn how to animate things while scrolling
了解如何在滚动时为事物添加动画效果 -
How to add sound in the project
如何在项目中添加声音 -
Shader Materials 着色器材质
-
We will learn an animation library called React Spring
我们将学习一个名为 React Spring 的动画库 -
React Post Processing React 后处理
-
And so much more . . .
还有更多……
Requirements 要求
-
A device that you can install VSCode or any Code Editor
可以安装 VSCode 或任何代码编辑器的设备 -
Basic JavaScript knowledge, you should be familiar with let, const, loops, arrays, functions
基本的JavaScript知识，你应该熟悉let、const、循环、数组、函数 -
And the most two important things are to be patient ( please be patient ), and to have a desire to build 3D Web Applications
最重要的两件事是要有耐心（请耐心等待），以及有构建3D Web应用程序的愿望
Description 描述
Welcome to my course on React Three Fiber, where you will learn how to build immersive and creative 3D websites using Three.js and React
欢迎来到我的 React Three Fiber 课程，您将学习如何使用 Three.js 和 React 构建身临其境的创意 3D 网站
In this course, you will learn all about Three.js and some of React basics so that you are able to create 3D websites under a library called React Three Fiber
在本课程中，您将学习所有关于 Three.js 和 React 基础知识的知识，以便能够在名为 React Three Fiber 的库下创建 3D 网站
This course is in 6 main sections,
本课程分为 6 个主要部分，
1. Three.js Refresher: Some lessons from my three.js course will be reviewed, so you can understand what will be explained later
1. Three.js复习：将回顾我three.js课程中的一些课程，以便您了解稍后将解释的内容
2. React: Some React basics will be explained cause this course is mainly about writing React code
2. 反应：将解释一些 React 基础知识，因为本课程主要是关于编写 React 代码
3. React Three Fiber: This is where the actual course begins, where you will learn how to write and combine Three.js with React
3. React Three Fiber：这是实际课程的开始，您将学习如何编写Three.js并将其与 React 结合起来
4. React Three Drei: React is about building reusable components, We will cover a lot of the components that Drei have
4. React Three Drei：React 是关于构建可重用组件的，我们将介绍 Drei 拥有的很多组件
5. React Spring: We will learn a physics-based animation library to make your site looks better
5. React Spring：我们将学习一个基于物理的动画库，让你的网站看起来更好
6. React Post-Processing: Post-processing are filters that will add beauty to the scene
6. 反应后处理：后处理是为场景增添美感的滤镜
All code is provided in the resources folder where you can find the Startup folder which is the code at the beginning of the lecture, and the Last Code folder which is the written code after we finished the lesson.
所有代码都提供在 resources 文件夹中，您可以在其中找到 Startup 文件夹（讲座开始时的代码）和 Last Code 文件夹（我们完成课程后编写的代码）。
If you encounter any questions regarding a particular lesson, I hope that you will ask the question in the questions section I will answer all questions, so don’t be afraid to ask any question
如果您遇到有关特定课程的任何问题，我希望您能在问题部分提出问题，我将回答所有问题，所以不要害怕提出任何问题
Thanks for participating in my course, and I will see you there.
感谢您参加我的课程，我会在那里见到你。
Ahmad 艾哈迈德
Who this course is for:
本课程适用于谁：
- Beginner Web developers who wants to learn about ThreeJs and React Three Fiber
想要了解 ThreeJs 和 React Three Fiber 的初学者 Web 开发人员 - Front end developers wanting to learn about ThreeJs and React Three Fiber concepts
想要了解 ThreeJs 和 React Three Fiber 概念的前端开发人员 - Web developers who wants to create immersive and creative 3D websites
想要创建身临其境且富有创意的 3D 网站的 Web 开发人员
Embark on a journey with our React Three Fiber course to master building immersive 3D websites using Three.js and React. From Three.js fundamentals to advanced applications in React Three Fiber, encompassing Drei components and React Spring animations, equip yourself to create captivating 3D web experiences.
加入我们的React Three Fiber课程，深入了解如何利用Three.js和React技术栈构建引人入胜的3D网站。从Three.js基础到React Three Fiber应用，覆盖Drei组件和React Spring动画，让您轻松打造创意十足的3D网络体验。
本教程相关视频已公开投稿B站：
