Three.js基础之图元

Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。

1. 图元(Primitives), 即threejs 内置的一些基础的 3D 形状， 立方体， 球体，圆锥体， 平面圆等， 

 顶点， 图元， 片元， 图像之间的关系

1. 顶点：就是在 3D 世界中某一个具体的点， 即点的位置（x， y， z），除了位置信息，还能包括点的颜色活其他的信息， 顶点位置是相对的， 依次是 局部位置， 全局位置， 镜头位置，在管线渲染流程中， 顶点处理模块的作用就是负责将顶点进行坐标转换
2. 图元：由若干顶点够成的一组数据， 用于构建活描述某种 二维或三维物体，可以说是用做少的点来描述一个物体的空间信息， 只有一个点也可以是 图元， 它只能表示一个点， 例如：自动驾驶中 扫描周围环境的到的 3D 点云数据就是由 一个一个 小点组成的。如果是两个顶点， 则可以表示出 是一个线段， 同时 2 个 点也可以表示出一个长方体， 斜对角的两个顶点，图元依然为 一堆顶点数据， 而不是图像数据。 假设有一个物体有 一部分不在显示范围内，那么 webgl 会通过 裁切体对物体进行裁切，只会将需要渲染的部分进行 渲染， 而裁切的到的内容则会重新计算， 得到一个新的图元
3. 图元： 分两种， 几何图元， 图像图元，                                                                                         几何图元 : 使用顶点， 线段， 三角形， 曲线等等， 用于描述物体“几何轮廓”， 几何图元可以进行空间转换， 平移， 旋转， 缩放等操作                                                                          图像图元： 图像图元， 又被称为， 光栅图元， 使用像素阵列， 用于直观存储“图片信息”， 图像图元就是材质中的纹理贴图， 图像图元不可以进行空间转换                                         几何图元经过变形， 投影， 光栅化后， 到达片元操作环节， 图像图元， 是直接到达片元操作环节的， 最终 在 片元操作环节， 几何图元 + 图像图元， 最终合成的到物体图像
4. 片元： 包含图像颜色， 位置， 深度的信息数据， 你可以吧片元简单理解为 “为完全加工完成的图像数据”。 在 3D 图形管线渲染流程中， 经过裁切处理模块和图元组装模块之后， 下一步经过光栅 化处理模块， 会将需要渲染的图元由一堆顶点数据转化为一堆图像数据。片元已经不再是顶点数据了， 而是图像数据， 只不过这些图像数据是为完全加工完成， 可以最终显示在屏幕上的图像数据
5. 图像： 由片元 经过片元处理模块， 得到最终图像数据， 就是 3D 渲染输出到屏幕上的显示结果， 片元数据经过处理， 用来更新缓存帧 上的像素， 最终 缓存帧 上的结果就是最终渲染吹的图像， 图像是由 一个个 像素构成

6. | 盒子(Box)                    | BoxBufferGeometry、BoxGeometry                   |
   | 平面圆(Circle)               | CircleBufferGeometry、CircleGeometry             |
   | 锥形(Cone)                   | ConeBufferGeometry、ConeGeometry                 |
   | 圆柱(Cylinder)               | CylinderBufferGeometry、CylinderGeometry         |
   | 十二面体(Dodecahedron)       | DodecahedronBufferGeometry、DodecahedronGeometry |
   | 受挤压的2D形状(Extrude)      | ExtrudeBufferGeometry、ExtrudeGeometry           |
   | 二十面体(Icosahedron)        | IcosahedronBufferGeometry、IcosahedronGeometry   |
   | 由线旋转形成的形状(Lathe)    | LatheBufferGeometry、LatheGeometry               |
   | 八面体(Octahedron)           | OctahedronBufferGeometry、OctahedronGeometry     |
   | 由函数生成的形状(Parametric) | ParametricBufferGeometry、ParametriceGeometry    |
   | 2D平面矩形(Plane)            | PlaneBufferGeometry、PlaneGeometry               |
   | 多面体(Polyhedron)           | PolyhedronBufferGeometry、PolyhedronGeometry     |
   | 环形/孔形(Ring)              | RingBufferGeometry、RingGeometry                 |
   | 2D形状(Shape)                | ShapeBufferGeometry、ShapeGeometry               |
   | 球体(Sphere)                 | SphereBufferGeometry、SphereGeometry             |
   | 四面体(Tetrahedron)          | TetrahedronBufferGeometry、TetrahedronGeometry   |
   | 3D文字(Text)                 | TextBufferGeometry、TextGeometry                 |
   | 环形体(Torus)                | TorusBufferGeometry、TorusGeometry               |
   | 环形结(TorusKnot)            | TorusKnotBufferGeometry、TorusKnotGeometry       |
   | 管道/管状(Tube)              | TubeBufferGeometry、TubeGeometry                 |
   | 几何体的所有边缘(Edges)      | EdgesGeometry                                    |
   | 线框图(Wireframe)            | WireframeGeometry                                |
   

7. BufferGeometry  与  Geometry 的区别， 简单说就是 bufferGeometry 可自定义地方比较少， 但性能高， Geometry， 可自定义地方多， 但是性能低一点