我的3D和Three.js入门笔记(1)

电脑里的 3D 模型，不是”一块一块的砖”，而是一堆极其细小的三角形。就像：
像素画不是一笔一画画的，而是一个个小方格涂出来的。3D 模型不是捏出来的，而是一堆小三角形拼出来的。
你平时刷到的”低模”角色（比如我们项目里这个人物）其实皮肤、衣服、剑，全是三角形拼的。

1.2 从最小的积木开始：点 → 线 → 三角形
在 3D 的世界里，往下拆，只有三样东西：

1. 顶点Vertex（复数 Vertices）一个空间中的点，有坐标 (x, y, z),地图上的一个坐标点
2. 边 Edge,两个顶点之间的连线, 两点之间的路
3. 面,Face,三个顶点围成的三角形,用三根树枝搭的三角架

为什么一定要是三角形？
因为三条边能确定一个平面，而我们肉眼看到的三维物体表面，就是无数个小平面拼出来的。
• 四个点不一定在同一平面（比如桌子的四个脚可能不在同一平面），渲染时会有缝隙；
• 但三个点永远共面，所以三角形是最可靠、最通用的”面”。

所以工业界约定：一切表面最终都拆成三角形再交给显卡。这个动作叫”三角化”（triangulation）。

一个立方体，用 8 个顶点就能描述。但要”填满”它的六个面，需要 12 个三角形（每个面拆成 2 个三角形）。
一堆顶点 + 一堆三角形，合在一起，就叫网格（Mesh）。

网格（Mesh） 这个词你以后会天天见。在 Three.js 里，一个”模型”就是一个 Mesh 对象，它里面装着：
• geometry（几何）：顶点的坐标列表 + 三角形的索引列表
• material（材质）：这个物体表面看起来像什么（颜色、光滑还是粗糙）

一句话记住：Mesh = 顶点的形状（geometry）+ 表面的样子（material）。

看明白这个，你就理解了 3D 渲染最底层的一件事：显卡只会画三角形，其他一切都是骗眼睛的。（这句话记住，后面所有章都是它的扩展）

代码长什么样：一个面 = 两个三角形
demo 里那 6 个面，是照着下面这段代码的思想手写的。一个正方形面，在 Three.js 里就是 4 个顶点坐标 + 一串”每 3 个一组”的索引：
// 步骤 1：报出 4 个顶点的坐标（左下、右下、右上、左上）
const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.Float32BufferAttribute([
  -0.75, -0.75, 0,    // 0 号顶点：左下
   0.75, -0.75, 0,    // 1 号顶点：右下
   0.75,  0.75, 0,    // 2 号顶点：右上
  -0.75,  0.75, 0,    // 3 号顶点：左上
], 3));

// 步骤 2：说清楚"哪 3 个顶点围成一个三角形"
// 三角形 A = 0→1→2（左下、右下、右上）
// 三角形 B = 0→2→3（左下、右上、左上）
geometry.setIndex([0, 1, 2,   // ← 三角形 A
                   0, 2, 3]); // ← 三角形 B