什么是Threejs
Three.js 是一个 3D JavaScript 库，使开发人员能够为网络创建 3D 体验.
Three.js 是一个在 MIT 许可下的 JavaScript 库，它在 WebGL 之上运行。该库的目标是极大地简化处理我们刚才所说的所有内容的过程。只需几行代码即可获得动画 3D 场景，而且您无需提供着色器和矩阵。
因为 Three.js 就在 WebGL 之上，我们仍然可以通过某些方式与它交互。
什么是WebGL
WebGL 是一种 JavaScript API，可以以惊人的速度在画布中呈现三角形。它与大多数现代浏览器兼容，而且速度很快，因为它使用访问者的图形处理单元 (GPU)。
WebGL 不仅可以绘制三角形，还可以用于创建 2D 体验，但出于课程的目的，我们将重点介绍使用三角形的 3D 体验。
GPU 可以进行数千次并行计算。想象一下，您要渲染一个 3D 模型，而该模型由 1000 个三角形组成——仔细想想，这并不多。每个三角形包括3个点。当我们想要渲染我们的模型时，GPU 将不得不计算这 3000 个点的位置。因为 GPU 可以进行并行计算，所以它将在一个原始数据中处理所有三角形点。
一旦模型的点放置好，GPU 需要绘制这些三角形的每个可见像素。再说一次，GPU 将一次性处理成千上万个像素的计算。
放置点和绘制像素的指令写在我们所谓的着色器中。让我告诉你，着色器很难掌握。我们还需要向这些着色器提供数据。例如：如何根据模型变换和相机的属性放置点。这些被称为矩阵。我们还需要提供数据来帮助对像素进行着色。如果有一盏灯并且三角形正对着那盏灯，它应该比没有三角形时更亮。
这就是原生 WebGL 如此困难的原因。在画布上绘制一个三角形至少需要 100 行代码。如果你想在这种情况下添加透视、灯光、模型和动画，祝你好运。
但是原生 WebGL 受益于存在于低级别，非常接近 GPU。这可以实现出色的优化和更多的控制。
那么在正式开始Threejs之前需要了解下threejs的基础知识
threejs的运行需要4个条件
- scene场景
- renderer渲染器
- camera相机
- object对象【这里是指我们的渲染主主体】
什么是场景？
场景就像是一个容器或者说世界，这容器中可以包含对象、模型、粒子、灯光等其他东西放入其中
什么是对象？
万事万物都是对象，threejs中的对象可以是几何体、模型、粒子、灯光等
什么是相机？
在threejs中相机是不可见的，在我们渲染场景时，我们所看到的的就是我们的相机角度，通常在threejs中创建相机使用PerspectiveCamera类
PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
fov — 摄像机视锥体垂直视野角度 aspect — 摄像机视锥体长宽比 near — 摄像机视锥体近端面 far — 摄像机视锥体远端面
在threejs中可以拥有多个相机，但是通常情况下我们只是用一个相机
在threejs中相机类似于一个锥体，受到视野范围和纵横比的影响
视野范围：
视野是你的视角有多大。如果您使用非常大的角度，您将能够同时看到各个方向，但会失真很多，因为结果将绘制在一个小矩形上。如果使用小角度，则事物看起来会被放大
- near是视锥的前端
- far是视锥的后端
- fov是视野定义了高度
纵横比：
在大多数情况下，纵横比是画布的宽度除以其高度
相机在场景中的概念
什么是渲染器？
渲染器的工作是进行渲染，将我们的代码与设计渲染到我们的web中，通常threejs中使用WebGLRenderer类来渲染
那么如何将渲染到指定为位置呢？
这个时候我们需要理解笛卡尔坐标系【这个的话解释比较麻烦，这里使用图片来解释】，通过x,y,z，3维空间中进行定位
在WebG与Threejs中使用的是正交右手坐标系
-
正交右手坐标系【右手拇指代表X轴，食指代表Y轴，中指代表Z轴】
- 手臂+拇指【Y】
- 与地面平行的是【Z】
- 拇指【X】
- 笛卡尔坐标系
至此这篇文章就结束了，我是进击的咸鱼，希望自己比昨天的自己更好( ^▽^ )
