「和我一起学 XXX」是我 2023 年的一个新企划，目标是向读者（也包含将来的本人）介绍我正在学习的某项新技术。文章会通过长期重复迭代的形式放弃其内容的新鲜度。文章有较大内容更新时，会在文章结尾进行更新工夫阐明（因为工夫精力有限，更新的内容只能保障少数几个平台的同步，请见谅）。
1. 什么是 Three.js
Three.js 是一个基于 WebGL 的 3D JavaScript 开源库（遵循 MIT 协定），它使 JavaScript 开发者可能更不便地在 Web 利用中创立 3D 场景。
请留神该定义的如下局部：
- 基于 WebGL：WebGL 是一种 3D 绘图协定，对于开发者而言，它是一组更底层的绘图 API，它负责绘制点，线与三角形，应用 WebGL 绘制简单的 3D 场景，须要十分多的代码；
- 3D JavaScript 开源库：Three.js 基于十分宽松的 MIT 协定，这意味着您能够自在应用，批改 Three.js 代码创立商业利用；
- 更不便地：就像 jQuery 基于 JavaScript 提供了更敌对地 API 使开发者可能轻松地操作 DOM 一样，Three.js 也封装出更敌对地 API 供开发者绘制 3D 场景，相较于应用 WebGL，应用 Three.js 绘制 3D 场景须要的代码量要少的多得多。
-
3D 场景：它蕴含：
- 3D 游戏；
- 建筑设计和数据可视化看板；
- AR，VR；
- 虚构展厅，虚构商品展现；
- 交互式展览，培训等；
您能够在 Three.js 官网发现丰盛的案例，它们从不同方面展现了 Three.js 的魅力和弱小！
2. （我）为什么要学习 Three.js？
在理解 Three.js 是什么后，若抉择持续学习，想必您有本人的理由。对于我而言，学习 Three.js 的次要动机是「好玩」（Just for fun!）。
我感觉可能在显示器上渲染 3D 场景是件很酷的事件，特地是它还能够通过 VR 头显设施让人们身临其境体验到一个由我发明的虚拟世界！
无论您学习的动机是否与我雷同，都欢迎您和我一起继续摸索 Web 3D 世界。我有信念带您一起踏入 3D 世界的大门！
3. 须要学习哪些内容？
在 Three.js 的官网文档中，您能够看到一个简略的 Three.js 利用蕴含了哪些模块：
您能够看到，图中蕴含了「渲染器(Renderer)」，「场景(Scene)」，「摄影机(Camera)」，「网状物(Mesh)」，「3D 对象(Object3D)」，「灯光(Light)」，「几何体
(Geometry)」，「材质(Material)」和「纹理(Texture)」等元素，如果您从未接触过 Web 3D 世界，您可能有点摸不着头脑。
然而别放心，通过浏览本系列文章，您将可能把握相对大多数内容，并理解它们之间的关系。在往后的篇幅中，我将一一介绍这些名词并介绍它们对于构建 Web 3D 场景的意义所在，以及您应该如何正确地应用它们。通过齐全把握这些概念，您应该可能本人实现任意简略的 3D 场景。
我发现很多文章专一于介绍某种 3D 场景具体如何搭建，在本系列文章中，我不会这么做，我偏向于采纳一种「自顶向下」的办法，让您了解到 Web 3D 世界的每个形成因素，而后您便能通过自由组合这些因素，搭建任意您感兴趣的 3D 场景。
因而接下来，本系列文章将会分为如下几个局部向您介绍 Three.js 技术的根本元素：
⚠️ 文章具体内容可能会依据理论状况有所增减。
3.1 搭建 Web 3D 场景
本章将介绍搭建 Web 3D 场景的必备因素（蕴含场景，物体与动画）和基本原理，通过本章的学习，您应该有能力开发出一个根本的 3D 场景，它相似于 Web 3D 世界的 Hello World，标记您正式踏入 Web 3D 世界。
3.2 把握几何体
本章将介绍 Three.js 提供的多个几何体元素以及它们的个性。它们将是将来您构建的各类 3D 场景中的配角。
3.3 把握摄影机
摄影机的品种和地位不仅决定了咱们察看 3D 世界的形式，也决定了物体的光影和色调该如何被 GPU 渲染，本章咱们将理解 Three.js 提供的摄影机品种以及如何操作它们。
3.4 把握纹理
本章将介绍「纹理」这个概念，您能够将他了解为「贴图」，通过失当地应用纹理，您能够让您的几何体成为具象的事实物体。
3.5 把握材质
本章将介绍「材质」，即探讨物体的每个可见像素应该被如何着色的问题，通过把握物体材质的设置办法，您的 3D 物体将会配合光影产生更加真切的成果。
🚧 3.6 把握光照（暂定）
通过把握「纹理」和「材质」，您能将您形象的几何体具象化为具体的，咱们所相熟的对象。然而要让这些对象更加合乎人的认知，更加「实在」和「平面」，实际上须要模仿事实的光照环境以及物体对光线的反馈，这是本章将要探讨的主题。
🙈 本章内容将依据其余已公布文章的浏览状况决定是否更新。以后不保障呈现在系列中。
🚧 3.7 把握暗影（暂定）
物体对光照的反馈体现为物体的「暗影」和「投影」，Three.js 提供了简略但并不完满的办法让开发者可能让物体的暗影和投影尽可能贴近事实，本章中咱们将深刻理解其中的内容。
🙈 本章内容将依据其余已公布文章的浏览状况决定是否更新。以后不保障呈现在系列中。
以上，是「和我一起学【Three.js】『高级篇』」这一企划中打算蕴含的内容，除后续两章外，除非我有更有意思的内容想要发表，我会尽量维持一周一篇的更新频率。心愿失去各位读者的监督和关注。
您可能会好奇题目中「高级篇」的含意，没错，无论是对于 Web 3D 世界还是 Three.js 而言，把握高级篇的内容仅仅算是入门，如果您抉择持续摸索，后方还为您保留了更广大的天地，例如：
- 粒子成果；
- 着色器；
- 性能优化；
- React Three Fiber；
- …
不过这些都是后话了，万丈高楼平地起，请先追随我一起实现本阶段的学习吧，这将是一段漫长的旅程，心愿您旅途愉快 🙌。
4. 如何学习？
想要通过本系列文章入门 Three.js 技术，您须要确保您相熟 JavaScript 语言，并可能了解例如 Babel，Vite，Webpack 之类的打包工具如何应用。
文章会蕴含「根底概念解说」和「代码示例」两个局部，心愿您不仅阅读文章，还可能踊跃地入手实际。
我非常激励您通过各类平台展现您的学习成绩，分享您的学习教训。如果本系列文章为您提供了切实的帮忙，我也心愿您违心踊跃附上文章链接，让更多的人受害。
5. 如何测验学习成绩？
如何测验您是否真正入门 Three.js 呢？通过浏览完本系列文章，您应该可能独立搭建一个如下的 3D 场景（这个例子援用了 Bruno Simon 在 three.js journey 课堂中的一个示例，因为我感觉它可能让您充分利用之前所学）
⚠️ 留神：将来该案例有可能会被替换。
6. 🤔 思考题
- 您为什么想要学习 Three.js 技术？
- 您认为 Three.js 技术有哪些可能的应用场景？
欢迎您在评论区与大家交换探讨。
7. 总结
在本篇文章中，我向您介绍了什么是 Three.js 以及本系列文章将如何带您步入 Web 3D 世界的大门。不晓得您是否对此旅途充斥期待？心愿您放弃关注，欢迎您在评论区与我交换。
8. 参考资料
- Three.js 官网；
- three.js journey；
9. 应用到的工具
- 屏幕录制：QuickTime Player；
- 视频转 GIF 图片：iLoveIMG；
💰 反对创作
您有很多形式能够表白您喜爱这篇文章，并违心反对我继续创作，例如：
- 点击各类平台「喜爱」按钮；
- 将文章转发在各类您喜爱的平台，并为它写一份简短的举荐语；
- 在评论区留言；
- 关注我的集体公众号「前端乱步」；
- …
无论您抉择哪一项，我都会因为您的观赏而感到愉悦。
发表回复