山东省建设业协会网站,wordpress 不显侧边,长沙百度快速优化,精美ppt模板免费下载网站01.介绍
Three.js 非常庞大#xff0c;你可以用它做无数的事情。
在第一章中#xff0c;我们将学习所有基础知识#xff0c;例如创建第一个场景、渲染、添加对象、选择正确的材料、添加纹理、为所有内容制作动画#xff0c;甚至将其放到网上。有些人可能会觉得这部分有点…
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 之上我们仍然可以通过某些方式与它交互。在某些时候我们将开始编写着色器并创建矩阵。
