【Three.js】第一、二章 入门指南和基础知识

01.介绍

Three.js 非常庞大，你可以用它做无数的事情。

• 在第一章中，我们将学习所有基础知识，例如创建第一个场景、渲染、添加对象、选择正确的材料、添加纹理、为所有内容制作动画，甚至将其放到网上。有些人可能会觉得这部分有点无聊，因为课程列举了很多多元化的元素。别担心，我认为它们都是有趣和有创意的部分。
• 在下一章中，我们将介绍许多经典技术：例如，创建我们自己的几何体、添加灯光和阴影、与 3D 对象交互以及添加粒子。
• 在第三章中，我们将通过学习如何使用 Blender 创建我们自己的 3D 模型来学习更高级的技术，甚至偏离 WebGL 和 Three.js。这么做是对你有帮助的！您还将在本课程中学习如何使用 Blender。您还将学习如何实现我用于案例作品集的作品。课程会教你如何为大型项目组织代码。
• 在第四章中，我们将讨论着色器。如果您已经听说过着色器，您可能知道这是人们开始学习困难的地方，并且有充分的理由。着色器很难，但着色器将释放 WebGL 的真正力量。你将能够创造出看起来不可能用代码实现的东西。如果你不明白我在说什么，别担心，一旦你学完这一章，一切都会明白的。
• 在第五章中，我们将更深入地学习更高级的技术，例如后处理、性能优化以及如何将 WebGL 与 HTML 混合。
• 在第六章中，我们将学习如何创建一个类似于您在 Three.js Journey 主页上看到的场景。这一章会更长更无聊，因为技术完全相同，但是多多实践，在那之后你将能够创建任何类型的场景。
• 最后，在第七章中，我们将学习如何使用 React Three Fiber 在 React 应用程序中使用 Three.js。我知道你们中的许多人对此感到兴奋，我相信你们会喜欢这一部分的。您将学习和练习的技术数量是巨大的。您甚至可以创建一款具有物理特性、真实游戏机制、用户界面和炫酷效果的游戏。哦，如果你不了解 React，别担心，我也已经为你准备好了。有一个 4 小时的课程专门用于学习 React 基础知识。那是额外的拓展课程。你是来学习 Three.js 的，你会在这个过程中学到很多其他的东西。

02.什么是WebGL和如何使用Three.js

Three.js是一个3D JavaScript库，使开发人员能够为web创建3D体验
它适用于 WebGL，但您可以使其适用于 SVG 和 CSS，但这两者非常有限，我们不会在本课程中介绍。

什么是 WebGL？

WebGL 是一种 JavaScript API，可以以惊人的速度在画布中绘制三角形。它与大多数现代浏览器兼容，而且速度很快，因为它使用访问者的图形处理单元 (GPU)。
WebGL 不仅可以绘制三角形，还可以用于创建 2D 体验，但为了课程的缘故，我们将专注于绘制三角形的 3D 体验。
GPU 可以进行数千次并行计算。想象一下，您想要渲染一个 3D 模型，而这个模型由 1000 个三角形组成——仔细想想，这并不多。每个三角形包括 3 个点。当我们想要渲染我们的模型时，GPU 将不得不计算这 3000 个点的位置。因为 GPU 可以进行并行计算，所以它会在一个原始数据中处理所有的三角形点。
模型的点放置好后，GPU 需要绘制这些三角形的每个可见像素。再一次，GPU 将一次性处理成千上万的像素计算。
放置点和绘制像素的指令是用我们所说的着色器编写的。让我告诉你，着色器很难掌握。我们还需要向这些着色器提供数据。例如：如何根据模型变换改变相机的属性放置点。这些被称为矩阵。我们还需要提供数据来帮助像素进行着色。如果有一盏灯并且照耀着三角形，它应该比没有照耀的三角形更亮。
在画布上绘制一个三角形至少需要 100 行代码。这就是原生 WebGL 学习如此困难的原因。如果您想在这种情况下添加透视图、灯光、模型并为所有内容设置动画，我只能说祝您好运。
不过使用原生的 WebGL 不全是坏处，因为原生 WebGL 源于底层，非常接近 GPU所以我们可以实现出色的优化和更多控制。

Three.js 来拯救复杂的WebGl

Three.js 是 MIT 许可下的 JavaScript 库，可在 WebGL 之上运行。该库的目标是大大简化处理我们刚才所说的所有内容的过程。只需几行代码，您就可以拥有一个动画 3D 场景，而且您不必提供着色器和矩阵。
因为 Three.js 就在 WebGL 之上，我们仍然可以通过某些方式与它交互。在某些时候，我们将开始编写着色器并创建矩阵。