4.4 KiB
4.4 KiB
Three.js 图元 (Primitives) 核心知识点总结
来源文档: Three.js Manual - Primitives
1. 什么是图元 (Primitives)？
图元是 Three.js 内置的几何体形状库。
- 核心定义：它们是预先定义好的几何体对象，不需要加载外部 3D 模型文件即可直接使用。
- 底层原理：所有图元本质上都是
BufferGeometry的子类。它们通过特定的数学算法和参数（如半径、长宽、分段数等）动态生成顶点数据。 - 主要用途：
- 快速搭建 3D 场景原型。
- 用于学习和测试 Three.js 功能。
- 构建不需要高精度建模的物体（如低多边形风格游戏）。
- 作为复杂组合物体的基础组件。
2. 图元分类详解
Three.js 提供了极其丰富的图元库，主要可以分为以下几类：
A. 基础立体几何 (Basic 3D Shapes)
这是最常用的构建块：
- BoxGeometry (立方体)：定义长、宽、高。最基础的形状。
- SphereGeometry (球体)：通过经纬度分段数控制平滑度。
- ConeGeometry (圆锥)：支持定义底面半径和高度。
- CylinderGeometry (圆柱)：支持顶部和底部半径不同（可做成台形），支持顶部/底部开口或闭合。
- TorusGeometry (圆环体)：类似甜甜圈，由管道半径和圆环整体半径定义。
- TorusKnotGeometry (环形结)：一种复杂的扭结管状结构，常用于测试光照和材质效果。
B. 平面几何 (2D Shapes)
虽然是 3D 引擎，但也常需要 2D 元素：
- PlaneGeometry (平面)：简单的矩形平面，常用于制作地面、墙壁或背景。
- CircleGeometry (圆形)：平面的圆。支持通过参数仅绘制扇形。
- RingGeometry (圆环平面)：中间有孔的平面圆环（类似垫圈）。
C. 多面体 (Polyhedrons)
基于数学定义的正多面体，常用于特殊的几何风格设计：
- TetrahedronGeometry (四面体)：由4个三角形组成的金字塔形。
- OctahedronGeometry (八面体)：由8个三角形组成，形似两个底对底的金字塔。
- DodecahedronGeometry (十二面体)：由12个五边形组成。
- IcosahedronGeometry (二十面体)：由20个三角形组成，常用于近似模拟球体。
D. 生成式/路径几何 (Generated Geometries)
基于路径或 2D 形状生成的复杂 3D 物体：
- ExtrudeGeometry (挤压)：将一个 2D 形状沿 Z 轴“拉伸”成 3D 物体，支持倒角（Beveling）。
- LatheGeometry (车削)：将一条曲线绕 Y 轴旋转生成物体（类似制作花瓶或酒杯）。
- TubeGeometry (管道)：让管道沿着一条指定的 3D 曲线路径生成。
- ShapeGeometry：将 2D 形状路径直接转换为三角网格平面（不进行挤压）。
- EdgesGeometry：仅显示几何体的边缘线框（辅助用）。
- WireframeGeometry：显示几何体的线框结构（比 Edges 更详细，包含所有三角形边）。
E. 文本 (Text)
- TextGeometry：根据字体文件（JSON格式）和字符串生成 3D 立体文字。
3. 关键属性与概念
在使用图元时，理解以下通用参数对于控制性能和外观至关重要：
1. Segments (分段数)
- 定义：构成几何体的三角形数量密度。
- 影响：
- 高分段数 = 表面圆滑，看起来更像完美的圆/球，但内存占用高，渲染计算量大。
- 低分段数 = 棱角分明，呈现“低多边形 (Low-poly)” 风格，性能极佳。
2. ThetaStart / ThetaLength (切片属性)
- 定义：用于圆形、圆柱、球体等旋转体。
- 用途：控制绘制的起始角度和跨越角度。
- 应用：可以用来制作扇形、半球、切开的蛋糕等形状，而不是完整的闭合体。
3. RadiusTop / RadiusBottom (半径控制)
- 定义：主要用于圆柱体 (CylinderGeometry)。
- 用途：分别控制顶部和底部的粗细。
- 应用：如果将其中一个半径设为 0，圆柱体就会变成圆锥体。
4. 总结
- Three.js 的图元系统非常灵活，通过简单的参数调整（特别是分段数），同一个图元可以表现出完全不同的视觉风格（从极简几何风到平滑写实风）。
- 在开发初期，建议优先使用这些图元代替复杂的外部模型，以提高开发效率。