携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情 >>
前言
ThreeJs是前端领域里一个相对专业的细分领域，有大量的概念，知识需要学习，再一次感受到了被线性代数支配的恐惧。。说实话，学起来很吃力，但是flag已经立在那里了，那就继续学下去，与诸君共勉。
复习
首先有一个渲染器(Renderer)。这可以说是three.js的主要对象。他需要传入场景和相机，然后页面上就会出现一个canvas，之后的内容会绘制在canvs内。
场景图 它是一个树状结构，由很多对象组成，比如图中包含了一个场景(Scene)对象 ，多个网格(Mesh)对象，光源(Light)对象，群组(Group)，三维物体(Object3D)，和摄像机(Camera)对象。一个场景(Scene)对象定义了场景图最基本的要素。这些对象通过一个层级关系明确的树状结构来展示出各自的位置和方向。子对象的位置和方向总是相对于父对象而言的。比如说汽车的轮子是汽车的子对象，这样移动和定位汽车时就会自动移动轮子。
这很像html对吧，子元素的绝对定位依赖于他的第一个有定位属性的父元素的定位，给父元素进行定位也会将父元素内的内容一起带走。
注意图中摄像机(Camera)是一半在场景图中，一半在场景图外的。这表示在three.js中，摄像机(Camera)和其他对象不同的是，它不一定要在场景图中才能起作用。相同的是，摄像机(Camera)作为其他对象的子对象，同样会继承它父对象的位置和朝向。
摄像机就是，在什么角度对场景观察，并将观察到的内容渲染在场景里，3维场景下，不同角度，不同距离，看到的内容也不同
网格(Mesh)对象可以理解为用一种特定的材质(Material)来绘制的一个特定的几何体(Geometry)。
网格相当于什么？网格很像对于材质和立方体的实现，网格对立方体和材质是复制引用的关系，下面是伪代码
// 伪代码
const 材质 = {}
const 几何体 = {}
function 网格 (几何体,材质) {
网格.几何体 = 克隆(几何体)
网格.材质 = 克隆(材质)
}
网格.prototype.位置 = {
坐标：[],
set (Vctor3) {
this.坐标 = Vctor3
}
}
几何体(Geometry)对象顾名思义代表一些几何体，如球体、立方体、平面、狗、猫、人、树、建筑等物体的顶点信息。Three.js内置了许多基本几何体 。你也可以创建自定义几何体或从文件中加载几何体。
材质(Material)对象代表绘制几何体的表面属性，包括使用的颜色，和光亮程度。一个材质(Material)可以引用一个或多个纹理(Texture)，这些纹理可以用来，打个比方，将图像包裹到几何体的表面。
纹理(Texture)对象通常表示一幅要么从文件中加载，要么在画布上生成，要么由另一个场景渲染出的图像。
光源(Light)对象代表不同种类的光，比如点状光和平面光。
