86 lines
4.4 KiB
Markdown
86 lines
4.4 KiB
Markdown
# Three.js 图元 (Primitives) 核心知识点总结
|
||
|
||
**来源文档**: [Three.js Manual - Primitives](https://threejs.org/manual/#zh/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 的图元系统非常灵活，通过简单的参数调整（特别是分段数），同一个图元可以表现出完全不同的视觉风格（从极简几何风到平滑写实风）。
|
||
* 在开发初期，建议优先使用这些图元代替复杂的外部模型，以提高开发效率。
|