【three.js教程】Three.js 物理(Physics):让物体真的“掉下去、弹起来、撞一下“
Three.js 物理Physics让物体真的掉下去、弹起来、撞一下原文出处Three.js Manual – Physics本文基于官方手册 Physics 章节整理帮你理清 three.js 里物理引擎到底是怎么回事以及该选哪条集成路线。写在前面前面所有文章里物体的运动都是我们手动改position、rotation硬算出来的——比如让立方体匀速转、让球沿抛物线飞。这在简单场景够用但一旦想要真实的重力、碰撞、堆叠、弹跳手动算就疯了。这时候就得上物理引擎Physics Engine。它帮你模拟重力、碰撞、受力这些物理现象。核心思路很简单你建一个平行于 three.js 的物理世界里面是一些刚体body它们会自己根据力、碰撞去动然后每帧把物理世界里刚体的位置/旋转同步给对应的 three.js 网格Mesh。视觉上物体就像真的被物理规则驱动了一样。一、先说一个关键点物理不一定每帧都更新为了表现稳定物理通常用固定时间步长更新而不是跟着渲染帧率跑。比如你的游戏循环跑 60fps但物理引擎可能只跑 30fps每 1/30 ≈ 33.3ms 一算。每帧渲染时three.js 的网格就用物理引擎最新的那次状态去更新。这样既省算力又不会因帧率波动导致物理表现忽快忽慢。二、集成物理引擎的三条路线three.js 官方手册把接入方式分成了三类从最省事到最硬核路线 1用 three.js 自带的物理 Addons最省事three.js 在examples/jsm/physics目录里给几个主流物理引擎包了封装层帮你把初始化物理世界和网格同步这些活全干了AmmoPhysics封装 Ammo.jsBullet Physics 的移植JoltPhysics封装 Jolt PhysicsRapierPhysics封装 Rapier对标准需求这几条路线能让你几行代码就跑起来隐藏了大量底层复杂度。官方示例physics_ammo_instancing、physics_jolt_instancing、physics_rapier_instancing。路线 2用纯 JS/TS 写的第三方物理库轻量好集成像cannon-es这种纯 JavaScript/TypeScript 的引擎主打轻量、和 three.js 天生好配。用它们时你得自己new物理世界和刚体然后在动画循环里手动把刚体的position和quaternion四元数拷给 three.js 的 Mesh。手册列的几个项目注意维护状态库说明状态cannon-es纯 JS/TS 轻量 3D 物理引擎MIT 许可较新、常用原 cannon.js 已停更建议用它的 forkcannon.js纯 JS 轻量引擎MIT 许可已停更建议换 cannon-esphy纯 JS 写的 three.js 物理引擎MIT 许可当前在维护Oimo.js纯 JS 轻量引擎MIT 许可已停更作者建议换 phy还有几个披着 JS 皮、底层调别的引擎的Physijs底层调 ammo.js用 Web Worker 在独立线程算物理MIT 许可已停更enable3d基于 ammo.js 的 three.js 物理框架LGPL-3.0在维护路线 3导入 WASM 版引擎性能最强、最硬核要最大性能、最稳定、最高精度尤其复杂模拟可以用 C/Rust 写的引擎编译成WebAssemblyWASM的版本比如Ammo.jsBullet 移植和Rapier。代价是这套方式要你自己管 WASM 的内存、直接调物理 API接入代码更繁琐。但能力强、跑得快。手册列出的几个底层引擎项目引擎语言许可状态JoltPhysicsCMIT在维护PhysXCBSD-3NVIDIA 出品在维护、极稳定RapierRustMIT2D/3D主打性能在维护BulletCZLIB可能已停更它们的现成 WASM 移植版JoltPhysics.jsEmscripten 移植MIT在维护physx-js-webidlPhysX 的 JS WASM 绑定MIT在维护Rapier.jsRapier 官方 JS 绑定Apache-2.0在维护Ammo.jsBullet 直接移植但已停更注意三、怎么选给个直觉性的判断只想快速出效果、标准需求→ 走路线 1three.js AddonsAmmo/Jolt/Rapier 封装最省心。项目轻、想要可控、愿意自己同步→ 路线 2cannon-es 这类纯 JS 库集成自然。要复杂模拟、追求性能和精度→ 路线 3WASM 版 Rapier / PhysX / Jolt代价是接入更麻烦。总结路线代表上手难度性能适合three.js AddonsAmmo/Jolt/Rapier 封装最低中-高标准需求、快速起步纯 JS/TS 库cannon-es、phy低中轻量、可控WASM 引擎Rapier.js、PhysX、Bullet高最高复杂/高性能模拟记住那条主线物理世界算状态 → 每帧同步给 Mesh。引擎只是怎么算的工具这条同步逻辑三条路线都一样。延伸阅读examples/jsm/physics官方物理 Addonscannon-es 仓库Rapier 物理引擎