内容 隐藏
1 Three.js、React Three Fiber、Drei、React Spring 以及更多
2 Three.js, React Three Fiber, Drei, React Spring & More
2.1 你将学到什么
2.2 要求
2.3 描述
2.4 本课程适合谁：

Three.js、React Three Fiber、Drei、React Spring 以及更多

Three.js, React Three Fiber, Drei, React Spring & More

了解使用 Three JS 和 React 构建沉浸式创意网站所需的一切

 

你将学到什么

  • 如何安装 ThreeJs 库并将其导入到您的项目中
  • 通过大量演示和示例代码了解 ThreeJs 的基础知识
  • 了解 ThreeJs 场景、相机和渲染器
  • 在 ThreeJs 中创建我们的第一个场景
  • 如何移动对象并为其设置动画
  • 了解 Webpack、NodeJs 以及向浏览器客户端提供 ES6 模块。
  • 了解长方体、球体、平面、环面、环面结等几何形状
  • 了解Basic、Normal、Lambert、Phong、Standard、Matcap等材质
  • 我们还将学习如何使用粒子创建令人惊叹的场景
  • 学习 React 基础知识和 hooks，例如 useState、useEffect、useRef 等
  • 了解 JSX 的含义
  • 还将了解 React 规则、样式等
  • 将把我们迄今为止在原生 Threejs 中所做的一切带到 React Three Fiber 下的 React 环境中
  • 许多 Drei 组件将被涵盖
  • 了解如何在滚动时为事物设置动画
  • 如何在项目中添加声音
  • 着色器材质
  • 我们将学习一个名为 React Spring 的动画库
  • 反应后处理
  • 还有更多。。。

要求

  • 可以安装 VSCode 或任何代码编辑器的设备
  • 基本的 JavaScript 知识，你应该熟悉 let、const、循环、数组、函数
  • 最重要的两件事是要有耐心（请耐心等待），以及有构建 3D Web 应用程序的愿望

描述

欢迎来到我的 React Three Fiber 课程，您将在其中学习如何使用 Three.js 和 React 构建沉浸式创意 3D 网站

在本课程中，您将学习有关 Three.js 的所有内容和一些 React 基础知识，以便您能够在名为 React Three Fiber 的库下创建 3D 网站

本课程分为 6 个主要部分，

1. Three.js Refresher：将回顾我的 Three.js 课程中的一些课程，以便您可以理解稍后将解释的内容

2. React：将解释一些React基础知识，因为本课程主要是关于编写React代码

3. React Three Fiber：这是实际课程开始的地方，您将学习如何编写 Three.js 并将其与 React 结合起来

4. React Three Drei：React是关于构建可重用组件的，我们将介绍Drei拥有的许多组件

5. React Spring：我们将学习一个基于物理的动画库，让你的网站看起来更好

6. React 后处理：后处理是为场景增添美感的滤镜

所有代码都在资源文件夹中提供，您可以在其中找到 Startup 文件夹，这是课程开始时的代码，以及 Last Code 文件夹，这是我们完成课程后编写的代码。

如果您遇到有关特定课程的任何问题，我希望您在问题部分提出问题，我会回答所有问题，所以不要害怕提出任何问题

感谢您参加我的课程，我们将在那里见。

艾哈迈德

本课程适合谁：

  • 想要了解 ThreeJs 和 React Three Fiber 的初级 Web 开发人员
  • 想要了解 ThreeJs 和 React Three Fiber 概念的前端开发人员
  • 想要创建沉浸式创意 3D 网站的 Web 开发人员
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。