1.3 下料工位：几何体谱系与参数

1.3 下料工位：几何体谱系与参数

本节摘要：几何体是装配线的下料车间——所有可见形状都从顶点数据裁出来。本节盘点自带几何体谱系，讲清分段参数与三角面数的换算关系，并用一个批量生成货箱的案例建立"参数即成本"的下料意识，为第 8 章性能质检埋下伏笔。

形状是一笔三角账

Three.js 里没有"立方体对象"这种东西，只有顶点数据。BoxGeometry 构造时在 CPU 上算出一组顶点坐标与三角面索引，打包进缓冲区交给显卡；你看到的立方体，是显卡把这几十个三角形涂上颜色的结果。理解了这一层，"分段数"就好谈了：它是下料时的裁切密度。密度越高，曲面越圆润，顶点与三角面也越多——精度是买来的，用面数付账。

为什么曲面体必须分段？一个圆柱的侧面在数据上其实是被裁成若干长条的平面拼起来的，段数太少，侧影就会出现明显的棱；而平面立方体天生平直，分段参数对它几乎没有视觉意义，这也是 BoxGeometry 的分段参数默认为 1 的原因。下料工位的第一课：曲面体分段给足，平面体分段省下。

图：常见几何体的参数与面数标尺

谱系盘点：常用几何体与参数

下料车间备着十几类标准料型，最常用的一批按用途可以归成四组。填充类：BoxGeometry（宽高长与三向分段）、PlaneGeometry（平面，铺地与背景的主力）、SphereGeometry（半径加两向分段）、CylinderGeometry（柱体，含上下底半径，两个半径不等即为圆台）。环面类：TorusGeometry（甜甜圈）、TorusKnotGeometry（环面结，装饰件与着色器测试的经典素材）。锥体类：ConeGeometry 与其近亲。异形类：LatheGeometry 让一组轮廓点绕轴旋转成型，酒瓶花瓶都是它旋出来的；ExtrudeGeometry 把二维形状挤出厚度，做立体字与异形板材。

参数之外，还有两个全体几何体通用的方法值得现在就认识：translate 与 rotateX 这类变换方法直接改顶点数据，把"料"在出厂前就摆正——比如把圆柱从"轴心在原点"平移成"底面在原点"，省去后续每个实例都要挂偏移的麻烦。center 方法则一键把几何体的包围盒中心对到原点，外协件进场时（第 5 章）常靠它救急。

动手：批量下料生成货架

背景：沙盘原型升级为仓储演示：地面上排布 4 行 6 列货箱，要求每只箱子随机高度、随机灰度，并且总面数可控——这套货架后面还要加灯光与阴影，面数必须先守住。

操作：用循环批量创建 BoxGeometry 与 Mesh，高度与颜色随机；同时用代码统计总面数，把成本摆在明面上。

// 批量下料：4 行 6 列的货箱阵列
const group = new THREE.Group();            // 用组管理批次，便于整体移动
for (let row = 0; row < 4; row++) {
  for (let col = 0; col < 6; col++) {
    const h = 0.6 + Math.random() * 1.4;    // 高度 0.6 到 2.0 随机
    const geo = new THREE.BoxGeometry(0.9, h, 0.9);
    const shade = Math.floor(180 + Math.random() * 60);
    const mat = new THREE.MeshStandardMaterial({
      color: new THREE.Color(shade / 255, shade / 255, shade / 255)
    });
    const box = new THREE.Mesh(geo, mat);
    box.position.set(col * 1.2 - 3, h / 2, row * 1.2 - 1.8); // 底面贴地：y 取高度一半
    group.add(box);
  }
}
stage.scene.add(group);

// 面数盘点：走一遍场景树，累加每个网格的三角面
let triangles = 0;
group.traverse((obj) => {
  if (obj.isMesh) triangles += obj.geometry.index.count / 3; // 索引数除以 3 即面数
});
console.log('货架总三角面：', triangles); // 24 只箱子，约 576 面
​

结果：24 只高低错落的灰调货箱整齐贴地，控制台报出总面数约 576。把循环上限从 4 行 6 列改成 20 行 20 列，总面数线性涨到 2 万左右——依然是箱子，成本却翻了三个数量级，这段"面数账"在布光和阴影加进来之后还会再涨。

解读：两个细节是本节的真知识。第一，底面贴地的写法：position 的 y 取高度的一半，因为 BoxGeometry 的原点在箱体中心，中心再抬半高，箱底才正好落在 y 等于 0 的地面上——"中心原点"是所有自带几何体的默认约定，贴地、对齐、旋转都绕不开它。第二，面数统计走 geometry.index.count：Three.js 的几何体默认用索引缓冲存储三角形，索引数除以 3 才是面数；若几何体未用索引（个别自定义数据如此），则要用 position 的顶点数除以 3。查面数不用背公式，记住"索引是顶点的名册"这层关系即可。

变式：把随机高度换成由数据驱动—— heights 数组存业务数据（如库存量），循环从数组取值。这一步改完，货架就不再是摆设，而是第 8 章"数据可视化大屏"实战案例的雏形。再进一步：24 只箱子共享同一个几何体、只换材质与缩放，面数与内存立刻省一半——这种"共料"思路，第 7 章会用实例化把它推到十万件的量级。

下料工位的三个常问问题

问：数据可视化要画柱状图，柱子用什么几何体？答：BoxGeometry 就是柱子，柱径用 x 与 z 的宽深控制、柱高用 y 控制、贴地用"中心抬半高"的老办法；柱顶数值标签属于 HTML 覆盖层或精灵的活，别指望几何体自己写字。问：模型怎么才能"看起来圆润"？答：先加分段，分段加到棱线消失后再考虑细分为平滑着色——BoxGeometry 的法线天生朝面，球体圆柱默认已是平滑着色，圆润问题九成是分段问题。问：地面上那块大平面要不要分段？答：要。PlaneGeometry 不分段时顶点只有四个，凡涉及顶点光照、地形起伏、涟漪动画的场景都会失效，铺地平面按预期效果预留 32 到 128 的分段，是下料工位的常识配置。

本节要点回顾

• 几何体即顶点数据：形状是算出来的三角面集合，分段数是精度与成本的换算旋钮；
• 曲面给足、平面归一：曲面体分段到看不出棱再退一档，平面体分段保持 1；
• 中心原点约定：自带几何体的原点在包围盒中心，贴地要把 y 抬半高；
• 面数可查可控：索引数除以 3 即三角面，批量场景必须边下料边盘点；
• 共料优先于复制：同形物件共享几何体，是面数与显存双赢的第一手段。

料已备齐但仍是素坯。下一章进入布光工位：换上吃光的材质，请出五类灯具，让货箱第一次拥有明暗与影子。