介绍
大家好，欢迎来到ThreeJs之旅。本篇文章将为您详细展示我们接下来的旅程安排。
做这个介绍的主要原因，是因为接下来的旅程会有一定的难度和挑战性，让大家能准备好。
我们能学到什么
Three.js涵盖的内容非常庞大，你可以使用它做很多事情，所以接下来的系列会很长。
我们会将这趟旅程的内容按照章节划分，便于初学者理解。如果你不知道如何使用Three.js和WebGL搭建炫酷的3D网站，那么你算是来对地方了。
接下来让我们谈论一下每个章节，了解我们接下来的旅程要做些什么。
在第一个章节中，我们会学习基础的东西，比如创建一个场景，进行渲染，添加物体，选择合适的材质，使用纹理，让一切都动起来，甚至把它放到线上。一些人可能会觉得无聊，因为我们列举了大量的基础元素。但是别担心，有趣富有创造性的部分就在下个章节。
接下里的章节中，我们会了解非常多的经典技术：比如，创建我们自己的几何体，增加光线和阴影，与3D物体进行互动，增加例子特效。到这里事情会逐渐变得有趣起来。
在第三章节中，我们会学习更多的高阶技术，深入了解WebGL和Three.js，学习使用blender创建我们自己的3D模型。Yes！我们甚至会在这趟旅程中学习如何使用Blender。还会学习如何添加物理特效。
在第四章节中，我们将会了解着色器(shaders)。如果你早就听说过着色器，你可能知道很多人会陷在这里为了一个好的展示鲜果。着色器很难，但是着色器会解锁WebGL的真正的力量。我们将会创造一些一开始看起来不可能的东西。听不懂我现在所说的内容也没关系，当我们完成这一章时，所有内容都会了然于胸。
在第五章节中，我们会学习额外的高阶技术，像是后处理啦，性能优化，向HTML中混入WebGL。
在第六章节中，我们会通过一个实际的例子，将前面章节所学内容串联起来。
最后，在第七章节中，我们会学习如何在React应用中使用Three.js。在这趟旅程中，我们会学习大量的技术，并且会做很多练习。我们最后甚至会创建一个带有物理效果的游戏，真实的游戏力学，UI，还有很酷的特效。如果你并不了解React，请别担心，我会在这个系列中一并介绍。
WebGL是什么
webgl是一套javascript API，以非常快的速度在画布上渲染三角形。它和现在大多数现代浏览器兼容，由于使用了用户的图形处理单元(GPU)，它的速度非常快。WebGL可以做的远比画三角形更多，我们也可以用它来完成2D的绘图，但我们接下来只会关注3D的绘制。
GPU可以同时做上千个并行的计算。想象你要渲染一个3D模型，但这个3D模型是由一千个三角形组成的，这并不算非常多。每个三角形有三个点。当我们渲染模型时，GPU会计算这三千个点的位置。由于GPU的并行计算，可以在同一时间内处理所有的三角形点。
一旦模型的点被放置好，GPU需要绘制所有的三角形的可见像素。再一次的，GPU会同时处理上千个像素点的计算。
放置点和绘制点的命令写在着色器中。说实话，掌握着色器有一定的难度。我们需要给这些着色器提供数据。举个例子：如何根据模型的变换和相机属性放置模型的顶点。这些我们称之为矩阵。我们还需要提供数据去给像素染色。如果有一个光源，并且三角形对着光源，那它应该比其他没对着光源的三角形更亮。
这就是为什么原生的WebGL这么难的原因。绘制一个三角形在画布上至少需要一百行代码。如果你想要添加透视效果，光源，模型，并且让他们都动起来，情况会变得更加复杂。
但是原生的WebGL受益于非常底层，非常接近GPU。使得它能够进行很大程度的性能优化，并且有更多的控制。
Three.js
Three.js 是一个javascript库，采用了MIT协议，以WebGL为底层。这个库的目标即就是简化我们刚才所说的那些步骤。你可以用几行代码，就生成一个动画3D场景，并且不需要提供着色器和矩阵。
正因为Three.js是基于WebGL，所以我们可以使用某些方式和WebGL进行交互。在一些情况下，我们会动手写着色器，并手动创建矩阵。
