From 9a2c35216371e8d6c8faacb2ccca6e1440880f22 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=20=E7=9B=B8=E5=8D=BF?= <lxqmoma@outlook.com>
Date: Fri, 21 Nov 2025 13:56:24 +0800
Subject: [PATCH] docs

---
 README_3.md                 | 85 +++++++++++++++++++++++++++++++++++++
 src/views/three/3/index.vue |  3 ++
 2 files changed, 88 insertions(+)
 create mode 100644 README_3.md

diff --git a/README_3.md b/README_3.md
new file mode 100644
index 0000000..8395302
--- /dev/null
+++ b/README_3.md
@@ -0,0 +1,85 @@
+# 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 的图元系统非常灵活，通过简单的参数调整（特别是分段数），同一个图元可以表现出完全不同的视觉风格（从极简几何风到平滑写实风）。
+* 在开发初期，建议优先使用这些图元代替复杂的外部模型，以提高开发效率。
diff --git a/src/views/three/3/index.vue b/src/views/three/3/index.vue
index 396a2a6..232d9c2 100644
--- a/src/views/three/3/index.vue
+++ b/src/views/three/3/index.vue
@@ -31,6 +31,9 @@ function initModel() {
   )
   camera.position.set(0, 2, 12)
 
+  const cameraHelper = new THREE.CameraHelper(camera)
+  scene.add(cameraHelper)
+
   renderer = new THREE.WebGLRenderer({ antialias: true })
   renderer.setSize(width, height)
   renderer.shadowMap.enabled = true