Three.js是基于原生WebGL封装运行的三维引擎,在所有WebGL引擎中,Three.js是国内文资料最多、使用最广泛的三维引擎。
- 图元(Primitives), 即threejs 内置的一些基础的 3D 形状, 立方体, 球体,圆锥体, 平面圆等,
顶点, 图元, 片元, 图像之间的关系
- 顶点:就是在 3D 世界中某一个具体的点, 即点的位置(x, y, z),除了位置信息,还能包括点的颜色活其他的信息, 顶点位置是相对的, 依次是 局部位置, 全局位置, 镜头位置,在管线渲染流程中, 顶点处理模块的作用就是负责将顶点进行坐标转换
- 图元:由若干顶点够成的一组数据, 用于构建活描述某种 二维或三维物体,可以说是用做少的点来描述一个物体的空间信息, 只有一个点也可以是 图元, 它只能表示一个点, 例如:自动驾驶中 扫描周围环境的到的 3D 点云数据就是由 一个一个 小点组成的。如果是两个顶点, 则可以表示出 是一个线段, 同时 2 个 点也可以表示出一个长方体, 斜对角的两个顶点,图元依然为 一堆顶点数据, 而不是图像数据。 假设有一个物体有 一部分不在显示范围内,那么 webgl 会通过 裁切体对物体进行裁切,只会将需要渲染的部分进行 渲染, 而裁切的到的内容则会重新计算, 得到一个新的图元
- 图元: 分两种, 几何图元, 图像图元, 几何图元 : 使用顶点, 线段, 三角形, 曲线等等, 用于描述物体“几何轮廓”, 几何图元可以进行空间转换, 平移, 旋转, 缩放等操作 图像图元: 图像图元, 又被称为, 光栅图元, 使用像素阵列, 用于直观存储“图片信息”, 图像图元就是材质中的纹理贴图, 图像图元不可以进行空间转换 几何图元经过变形, 投影, 光栅化后, 到达片元操作环节, 图像图元, 是直接到达片元操作环节的, 最终 在 片元操作环节, 几何图元 + 图像图元, 最终合成的到物体图像
- 片元: 包含图像颜色, 位置, 深度的信息数据, 你可以吧片元简单理解为 “为完全加工完成的图像数据”。 在 3D 图形管线渲染流程中, 经过裁切处理模块和图元组装模块之后, 下一步经过光栅 化处理模块, 会将需要渲染的图元由一堆顶点数据转化为一堆图像数据。片元已经不再是顶点数据了, 而是图像数据, 只不过这些图像数据是为完全加工完成, 可以最终显示在屏幕上的图像数据
- 图像: 由片元 经过片元处理模块, 得到最终图像数据, 就是 3D 渲染输出到屏幕上的显示结果, 片元数据经过处理, 用来更新缓存帧 上的像素, 最终 缓存帧 上的结果就是最终渲染吹的图像, 图像是由 一个个 像素构成
-
| 盒子(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 |
- BufferGeometry 与 Geometry 的区别, 简单说就是 bufferGeometry 可自定义地方比较少, 但性能高, Geometry, 可自定义地方多, 但是性能低一点