🎬 开场白
上一章，我们用BufferGeometry拼出了各种三维“积木” 🧱：立方体、球体、管道……看着酷炫，但有个问题——这些模型到底有多大？没有尺寸参照，它们可能像桌面玩具，也可能像摩天大楼，完全没尺度感。
本章，我们要为 Three.js 世界带来“度量衡”：讲清楚单位、几何体尺寸设置，以及缩放与比例的使用，让每个模型在场景中既真实又协调。毕竟，模型再精致，如果大小不对，整个场景就像把迷你家具放进空旷大厅一样，违和感满满 😅。
Three.js 的“隐形尺子”
在 Three.js 的虚拟世界里，单位其实是“隐形的尺子”。不同于现实世界里我们有明确的米、厘米或英寸，Three.js 默认没有固定单位：1 可以代表 1 米，也可以代表 1 厘米，甚至 1 光年——这完全取决于你如何定义你的场景。
这就像你在画一张平面图：图纸上的 1 厘米可能对应现实中的 1 米，也可能是 10 米。Three.js 本身不会强制你用什么单位，它只关心数值的大小关系和比例。如果你把一个立方体的边长设为 1，它就只是“1 个单位”的立方体——至于它代表多少现实长度，需要你自己心里有数。
理解这个“隐形尺子”的重要性在于：
| 方面 | 为什么比例重要 | 通俗解释 | Three.js 实践建议 |
|---|---|---|---|
| 光照效果 | 光照和阴影计算与尺寸有关 | 如果模型太小，光可能照不到细节；模型太大，阴影会拉得很奇怪，就像阳光打在巨型积木上 | 设置模型 scale 时保持合理比例，并调整光源距离和强度，确保阴影自然 |
| 碰撞与物理 | 物理模拟中的单位大小影响重力、速度、弹力 | 比如在游戏里，如果一只小球被做得比房子大，它会弹得不自然，重力和碰撞都不对 | 在使用 Cannon.js/Ammo.js 时统一单位，通常 1 单位 = 1 米，调整质量和力的参数匹配模型大小 |
| 视觉感知 | 模型比例影响空间感 | 把椅子做得比房子还大，看起来就很怪，空间感被破坏，用户会觉得不真实 | 根据场景需求设置合理 scale，保持物体间比例，让场景更符合人类视觉习惯 |
💡 小贴士
在 Three.js 项目中，建议从一开始就设定统一的“世界单位标准”，保证模型比例一致性，方便后续场景构建、灯光调节、物理模拟和团队协作。
| 项目 | 建议值 | 说明 |
|---|---|---|
| 单位定义 | 1 单位 = 1 米（可自定义） | 所有模型尺寸均按此单位制作 |
| 小型物体 | 0.5 ~ 2 单位 | 如杯子、书、椅子等 |
| 人物高度 | 1.7 ~ 2 单位 | 按人体平均身高设定 |
| 房屋高度 | 5 ~ 10 单位 | 小型建筑参考 |
| 大型场景 | 按比例放大，但遵循单位 | 如桥梁、树木、山丘等 |
设置几何体的尺寸
在 Three.js 中，几何体的尺寸直接决定了场景中物体的大小比例。理解尺寸参数和单位体系，对后续建模和布局非常重要。本节将通过基础概念、参数解析、对比示例和实战技巧逐步讲解。
几何体尺寸基础
- Three.js 中每种几何体的构造函数都有明确的尺寸参数：比如立方体的宽、高、深，以及可选的分段数；球体的半径和分段数，可控制球体细分和截取角度；圆柱体的上下半径、高度以及分段数。
- 默认单位是 1 个单位 = 1 米（可通过整体缩放调整）。
- 尺寸参数不仅影响物体外观，还会影响物理模拟、碰撞检测和与其他物体的比例关系，因此设置时需谨慎。
常用几何体参数解析
| 几何体 | 参数 | 说明 |
|---|---|---|
BoxGeometry | width, height, depth | 立方体在x/y/z方向的尺寸 |
SphereGeometry | radius, widthSegments, heightSegments | 球体半径及分段数，控制平滑程度 |
CylinderGeometry | radiusTop, radiusBottom, height, radialSegments | 圆柱上下半径、高度、圆周分段数 |
PlaneGeometry | width, height, widthSegments, heightSegments | 平面宽高及细分数 |
TorusGeometry | radius, tube, radialSegments, tubularSegments | 圆环半径、管半径、分段数 |
💡 提示：分段数越多，模型越平滑，但计算量也越大。
实战小技巧
外部模型适配： 导入 GLTF/FBX 模型时，注意原始单位，必要时使用mesh.scale.set(x, y, z)调整
组合几何体： 确保组合物体尺寸统一，避免视觉冲突
测试尺寸： 先用简单几何体测试比例，再应用到复杂模型，减少调试成本
优化性能： 分段数和尺寸合理搭配，保证平滑外观的同时不浪费渲染资源
缩放(Scale)的魔法
在 Three.js 中，mesh.scale 控制模型在各轴向的缩放，是影响模型尺寸和视觉效果的重要属性。
基本用法
// 设置模型缩放
mesh.scale.set(x, y, z); // x、y、z 分别表示三个轴向的缩放倍数
// 等比缩放：三个轴使用相同的缩放值，保持模型比例不变
mesh.scale.set(2, 2, 2); // 整体放大 2 倍
// 非等比缩放：三个轴使用不同的缩放值，可拉伸或压缩模型
mesh.scale.set(1, 2, 1); // 在 Y 轴上拉伸 2 倍
缩放与性能影响
| 影响类型 | 说明 | 优化建议 |
|---|---|---|
| 贴图 | 非等比缩放会让贴图被拉伸或压扁，导致失真 | 尽量使用等比缩放，或调整 UV 映射和材质贴图比例 |
| 光照 | 缩放会改变法线方向，过度拉伸可能让光照和阴影看起来不自然 | 对模型进行适度缩放，必要时重新烘焙光照或调整材质法线 |
| 碰撞/物理 | 使用物理引擎时，缩放会直接影响碰撞体大小和形状 | 缩放后同步调整碰撞体尺寸，保持物理效果一致 |
实战小技巧
统一单位： 尽量在导入模型前确定原始单位，减少代码中频繁缩放
渐进调整： 先用简单几何体测试比例，再应用到复杂模型
动态缩放： 可结合窗口 resize 或用户交互动态调整模型大小
// 窗口变化时自动调整模型缩放
window.addEventListener('resize', () => {
const scaleFactor = window.innerWidth / 800;
mesh.scale.set(scaleFactor, scaleFactor, scaleFactor);
});
模型比例感知：辅助线与辅助工具
在 3D 场景中，正确的模型比例非常重要。没有参考，你可能会遇到“杯子比房子还大”的尴尬。Three.js 提供了两个非常实用的辅助工具，帮助我们快速感知和校准模型的大小：
| 工具 | 作用 | 常用参数 | 说明 |
|---|---|---|---|
| GridHelper | 网格平铺在地面，直观显示单位尺寸和场景比例 | size：网格总大小 divisions：网格细分数量 colorCenterLine：中心线颜色 colorGrid：网格线颜色 | 用于判断模型的大小是否合适，帮助感知场景比例，避免模型“过大或过小” |
| AxesHelper | 显示 X、Y、Z 三个方向的轴 | size：轴的长度 | X、Y、Z 方向分别显示为红、绿、蓝，方便判断模型旋转方向及方向是否正确 |
// 辅助网格
new THREE.GridHelper(size, divisions, colorCenterLine, colorGrid)
// 坐标轴
new THREE.AxesHelper(size)
🌟 结尾
本章我们为 Three.js 世界建立了“度量衡”，掌握了单位、几何体尺寸设置以及缩放与比例的使用方法。借助辅助网格GridHelper和坐标轴AxesHelper，我们能直观判断模型的位置、方向和大小，保证场景中的物体比例合理，摆放整齐有序。尺寸和比例的正确运用，让场景搭建更高效，模型更贴合实际，无需反复调整，就能快速看到真实效果 ✨。
在下一章，我们将把目光从基础几何体拓展到外部模型External Models，了解不同格式的模型（如.obj、.glb/.gltf、.fbx等）、如何在 Three.js 中加载它们，以及如何在场景中引用和管理这些模型，让你的三维世界更加丰富、生动。
