3款网页2D物理引擎库合集

只要页面里出现过小球下落、方块堆叠、物体碰撞，背后基本都站着一套物理引擎。纯靠 CSS 动画和手写坐标去模拟这些东西，一开始看不出问题，数量一多就全乱套，穿透、抖动、叠不稳全冒出来。这次整理了 3 款开源免费可商用的前端物理引擎，都能直接在浏览器里跑，不用装环境、不用编译，把重力、碰撞、约束、关节这些麻烦事交给它们处理。

三款库各自的定位

matter.js 是最常用的 2D 刚体引擎，上手快，物体、地面、约束、鼠标拖拽都有现成接口，官方带了一堆示例，改改参数就能出效果，适合大多数小游戏和交互动效。cannon.js 的强项是三维空间里的堆叠与碰撞，做多米诺、快递箱、方块塔这类玩法很顺手。planck.js 是 Box2D 的 JavaScript 版本，物理精度是三者里最讲究的，做平台跳跃、绳索、关节这类需要手感准确的玩法更合适。

怎么用

每个库都给了压缩版和未压缩版两个文件，把对应的 js 直接引到页面里就能用。写代码的思路都差不多：先建一个世界，往里放物体并给它们质量和形状，然后让世界按固定节奏往前走一步，每一步再把物体的位置和角度同步到页面元素上，浏览器里就动起来了。包里的使用说明文件有每个库的简单介绍，各库文件夹里也都保留了原生 README，照着示例改是最省事的入门方式。

上手小建议

如果只是想让页面里的图形动起来，从 matter.js 开始最省心，官方示例里滚动、拖拽、碰撞相关的场景都能直接抄，改几个数字就能套进自己的项目。要做精细的跳跃手感，再去啃 planck，它的坐标和单位更贴近真实物理，需要花点时间适应。cannon.js 目前社区更新放缓，适合拿它的核心碰撞能力，遇到问题多半要自己翻源码解决。

这三个库加起来不到 1MB，放进现有项目几乎没有负担，也可以混着用，比如用 matter 处理平面碰撞、用 planck 处理需要精准手感的场景。三个库都是 MIT 许可，商用和二次修改都不需要额外授权，保留各自的 LICENSE 文件即可。解压后直接引用对应的 js 就能看到效果。