HTML5本身不提供物理碰撞能力，“穿模”源于未正确配置Three.js与Cannon.js等物理引擎的协同：需为模型创建CANNON.Body并绑定合适形状，每帧同步position与quaternion，避免高速穿越、高模直用Trimesh及未调用world.step()等常见错误。
HTML5 本身不提供建模或物理碰撞能力，所谓“HTML5建模穿模”实际是混淆了技术边界——你真正在用的是 Three.js、Babylon.js 或 Ammo.js/Cannon.js 这类运行在 HTML5 环境中的 3D 库和物理引擎。
为什么模型会穿模？本质是没启用/配好物理引擎
纯 Three.js 渲染的模型默认没有碰撞体，移动时只是坐标变化，引擎不会自动检测两个 Mesh 是否重叠。所谓“穿模”，其实是视觉上穿透了，但底层根本没做任何碰撞判断。
- 只用
Three.js移动物体 → 必然穿模（无物理） - 加了
Cannon.js但没给物体添加Body和Shape→ 依然穿模 - 用了
ammo.js但collisionFilterGroup/collisionFilterMask配错 → 某些物体被忽略检测 → 局部穿模
Three.js + Cannon.js 设置刚体避免穿透的实操要点
这是最轻量且兼容性好的组合。关键不是“怎么建模”，而是“怎么把模型挂载为带碰撞体的物理实体”。
- 模型导入后，需单独创建
CANNON.Body，再用body.addShape()绑定几何形状（不能直接用THREE.Mesh的 geometry） - 推荐用
CANNON.Box、CANNON.Sphere或CANNON.Trimesh（注意：Trimesh性能差，仅用于静态地形；动态物请用简化包围体） - 必须将
body.position与mesh.position同步（通常靠mesh.position.copy(body.position)在每帧更新） - 若物体需要旋转，还需同步
quaternion：mesh.quaternion.copy(body.quaternion)
const body = new CANNON.Body({ mass: 1 });
body.addShape(new CANNON.Box(new CANNON.Vec3(0.5, 0.5, 0.5)));
body.position.set(0, 2, 0);
world.addBody(body);
// 每帧同步
function update() {
mesh.position.copy(body.position);
mesh.quaternion.copy(body.quaternion);
}
常见穿模陷阱与绕过方案
即使配了物理，仍可能穿模——多数源于时间步长、速度过大或形状精度问题。
立即学习“前端免费学习笔记（深入）”；
-
body.velocity过大（如 >5 m/s）→ 单帧位移超过碰撞体尺寸 → 直接跳过检测 → 解法：启用body.allowSleep = false+ 设置world.broadphase = new CANNON.NaiveBroadphase()（更激进检测），或用body.linearDamping = 0.9抑制高速 - 用
THREE.BufferGeometry导入高模 → 错误地喂给CANNON.Trimesh→ 计算爆炸或漏检 → 解法：导出时另存低面数碰撞体（如 Blender 中用 “Decimate” 修改器生成独立碰撞网格，再单独加载） - 多个子对象（如机械臂关节）共用一个
Body→ 形变时内部穿模 → 解法：每个可动部件配独立Body+Constraint（铰链/棱柱约束）
真正卡住人的往往不是“怎么设碰撞体”，而是忘了物理世界要手动 step（world.step(1/60)）、忘了同步渲染位置、或者把高模当碰撞体硬塞——这些点不检查，调十天也还在穿。
