🏄 Three.js 物理引擎集成实战
30 章 · 从入门到游戏
📐 Cannon-es
⚙️ Ammo.js
🚀 Rapier
🧩 Web Worker
🥽 WebXR
01
物理引擎初探
什么是物理引擎？为什么3D场景需要它？Three.js与物理引擎的生态概览。
02
Cannon-es入门
Cannon-es库的安装与导入，创建你的第一个物理世界。
03
刚体与形状
理解刚体概念，Box、Sphere、Plane等基础碰撞体的创建与配置。
04
材质与摩擦
物理材质的定义，摩擦系数与恢复系数（弹性）的实际调参经验。
05
添加力与冲量
在物体上施加力、冲量、扭矩，实现投掷、爆炸等动态效果。
06
约束与关节
HingeConstraint、LockConstraint、DistanceConstraint的使用场景与代码实现。
07
碰撞检测与事件
监听碰撞开始与结束事件，获取碰撞点与法线信息。
08
物理与视觉同步
将Cannon-es的物理体位置/旋转同步到Three.js的Mesh上。
09
性能优化（一）
Broadphase算法选择（SAP vs Naive），禁用休眠物体。
10
性能优化（二）
使用Compound Body合并碰撞体，减少CPU开销。
11
触发器（Trigger）区域
实现检测物体进入/离开特定区域的逻辑，如计分区、传送门。
12
射线检测与物理拾取
用Raycaster结合物理引擎实现鼠标拖拽物体。
13
车辆物理（一）
构建车辆底盘与车轮，理解悬挂系统参数。
14
车辆物理（二）
控制车辆加速、转向、刹车，处理车身稳定。
15
布料模拟
使用Cannon-es的布料约束模拟旗帜、窗帘等柔软物体。
16
绳索与链条
通过一连串约束模拟锁链、绳索的物理行为。
17
堆叠与稳定性
解决物体堆叠时的抖动问题，调整求解器迭代次数。
18
物理场景序列化
将物理世界的状态保存为JSON，实现存档与回放。
19
多物理引擎对比
Cannon-es vs Ammo.js vs Rapier，选型建议。
20
Ammo.js入门
Ammo.js的异步加载与WASM初始化，创建刚体世界。
21
Ammo.js高级碰撞
Convex Hull与Concave Mesh的碰撞体生成。
22
Ammo.js角色控制器
使用btKinematicCharacterController实现第一人称移动。
23
Rapier入门
Rapier的Rust核心与JS绑定，体验极致性能。
24
Rapier碰撞组
设置碰撞组与过滤掩码，实现分层碰撞。
25
Web Worker中的物理
将物理计算放到Worker线程，避免阻塞主线程渲染。
26
物理与动画混合
让物理驱动的物体与关键帧动画平滑过渡。
27
破碎效果实战
将模型拆分为多个碎块，用物理引擎模拟爆炸破碎。
28
流体与粒子物理
用大量小球模拟水流或沙粒效果（Particle System + Physics）。
29
VR/AR中的物理交互
在WebXR环境下实现抓取、投掷物体的物理反馈。
30
完整项目实战
构建一个包含物理、UI、音效的3D保龄球游戏。
⚡ 🎲 🧊