炫酷！这些 JS 库赋予你创造世界的能力

关注

原创最新推荐文章于 2026-04-08 09:00:57 发布 1.3k 阅读 AI 写同款· GEO 优化 ›

three.js——物理引擎剖析案例中物理引擎Ammo.js的使用方法，其中包含运动、碰撞、检测、自由落体、碰撞器、冻结、自定义更新等功能，有大量代码通过链接方式转到gitee，可以根据代码对照使用主要剖析的是threejs中提供的案例，相对于原本案例，本篇文章精简了一些代码，提取了一些方法，新增了一些可配置参数，并结合我上一篇文章做了一个小Demo。先看一下效果从图片中可以看出来，小球在落地时，触碰到人物模型的头部，改变了运动方向，后面人物模型行走时，可以踢球，改变球的运动速度。阅读详情

你好，我是坚持分享干货的 EarlGrey，翻译出版过《Python编程无师自通》、《Python并行计算手册》等技术书籍。

如果我的分享对你有帮助，请关注我，一起向上进击。

创作不易，希望大家给一点鼓励，把公众号设置为“星标”，给文章点个“赞”和“在看”，谢谢大家啦~

下面这张截图来自某个开发者网站，网站被他打造成了一个仿真世界，我们通过上下左右键可以控制图片中央那辆卡车。想不想为你的网站添加类似的 3D 和仿真效果？

这些效果背后是由JavaScript物理引擎驱动的，它们为开发者提供了强大的工具，用于在Web应用程序和游戏中实现真实的物理效果。这些库使得模拟物理现象、碰撞检测和运动仿真等任务变得更加容易。

本文将介绍一些受欢迎的JavaScript物理引擎库。

1、3D 引擎库

主要推荐4个，分别为 Ammo.js、Cannon.js、Oimo.js 和 Rapier。

Ammo.js

基于著名的物理引擎 Bullet physics engine ，原为 C++ 实现，作者使用 Emscripten 重写为 JavaScript 实现。

Ammo.js 支持 3D 物理仿真，包括刚体、软体、碰撞检测、约束、车辆等功能。Ammo.js 可以与 Three.js 等 3D 渲染库结合使用，创建出逼真的 3D 场景和效果。

Ammo.js 的 GitHub 仓库有近4千个星标，表明它有一定的受欢迎程度和社区支持。

网站：http://schteppe.github.io/ammo.js-demos/
Git 仓库：https://github.com/kripken/ammo.js/
文档：无文档
Bullet（用 C++ 编写的物理引擎）的 JavaScript 直接移植版
有点重
8年前发布，npm每周下载量 255，仍由社区更新

Cannon.js

Cannon.js 是一个轻量级的 3D 物理引擎库，它使用 GJK 算法进行碰撞检测，支持多种形状的刚体，包括球体、平面、盒子、圆柱体、高地图等。

Cannon.js 还支持弹性、摩擦力、重力、睡眠和静态物体、约束等功能。Cannon.js 可以与 Three.js 等 3D 渲染库结合使用，创建出有趣的 3D 场景和效果。

Cannon.js 的 GitHub 仓库有超过 4k 的星标，表明它有一定的受欢迎程度和社区支持。

网站：https://schteppe.github.io/cannon.js/
Git 仓库：https://github.com/schteppe/cannon.js
文档：http://schteppe.github.io/cannon.js/docs/
比 Ammo.js 更轻
比 Ammo.js 更易于实现
主要由一名开发人员维护
多年未更新，近1年内npm每周下载2800多
有一个维护的分支

Oimo.js

oimojs

Oimo.js 是一个专注于性能的 3D 物理引擎库，它使用 BVH 算法进行碰撞检测，支持多种形状的刚体，包括球体、盒子、圆柱体、胶囊、锥体、多面体等。

Oimo.js 还支持摩擦力、弹性、重力、睡眠和静态物体、约束、弹簧等功能。

网站：https://lo-th.github.io/Oimo.js/
Git 仓库：https://github.com/lo-th/Oimo.js
文档：http://lo-th.github.io/Oimo.js/docs.html
比 Ammo.js 更轻
比 Ammo.js 更容易实现
主要由一名开发人员维护
两年未更新

Rapier

rapier 是一个快速的 2D 和 3D 物理引擎库，它是用 Rust 语言编写的，也提供了 WebAssembly 和 JavaScript 的支持。

rapier 支持 2D 和 3D 物理仿真，包括刚体、碰撞检测、约束、摩擦力、弹性、重力、事件监听、场景查询等功能。rapier 可以与 Babylon.js 等 3D 渲染库结合使用，创建出高性能的 3D 场景和效果。

rapier 的 GitHub 仓库有超过 2k 的星标，表明它有一定的受欢迎程度和社区支持。

网站：https://rapier.rs/
Git 仓库：https://github.com/dimforge/rapier
文档：https://rapier.rs/javascript3d/index.html
与 Cannon.js 非常相似
性能良好
目前正在维护

2、2D 引擎库

2D引擎库有很多，这里只介绍最受欢迎的几个。

Matter.js

mattejs

Matter.js 是一个用于 Web 的 JavaScript 2D 物理引擎库，该项目诞生于 2014 年，它相较于老牌的 Box2D 引擎库，Matter.js 更为轻量级，并且在性能和功能方面也不逊色。

Matter.js 支持 2D 物理仿真，包括刚体、复合体、组合体、凹面和凸面、弹性、摩擦力、事件监听、约束、重力、睡眠和静态物体、圆角等功能。Matter.js 还提供了基于 Canvas 的渲染器，可以结合 p2.js 与 CreateJS 或 Egret 渲染引擎使用。

Matter.js 的 GitHub 仓库有超过 10k 的星标，表明它有很高的受欢迎程度和社区支持。

网站：https://brm.io/matter-js/
Git 仓库：https://github.com/liabru/matter-js
文档：https://brm.io/matter-js/docs/
主要由一名开发人员维护
仍在更新

P2.js

p2.js 是一个轻量级的 2D 物理引擎库，它使用 GJK 算法进行碰撞检测，支持多种形状的刚体，包括圆形、矩形、线段、胶囊、多边形等。p2.js 还支持摩擦力、弹性、重力、睡眠和静态物体、约束、弹簧、车辆等功能。

p2.js 可以与 Phaser 等 2D 游戏框架结合使用，创建出有趣的 2D 游戏和效果。

p2.js 的 GitHub 仓库有超过 3k 的星标。

它具有以下特点：

高性能：p2.js通过使用高效的算法和数据结构，实现了快速的碰撞检测和稳定的物理模拟，即使在大量物体的情况下也能保持良好的性能。

灵活性：p2.js提供了灵活的API和配置选项，使得开发者可以根据自己的需求调整物理模拟的行为和性能。

轻量级：p2.js的文件大小较小，加载速度快，适合在网络环境较差的情况下使用。

可扩展性：p2.js支持自定义碰撞形状和约束等扩展，开发者可以根据自己的需求添加新的功能。

网站：https://schteppe.github.io/p2.js/
Git 仓库：https://github.com/schteppe/p2.js
文档：http://schteppe.github.io/p2.js/docs/
主要由一名开发人员维护（与 Cannon.js 相同）
两年未更新

Planck.js

planck.js 是一个 2D 物理引擎库，它是基于著名的 Box2D C++ 物理引擎库的 JavaScript/TypeScript 重写。

planck.js 支持 2D 物理仿真，包括刚体、复合体、碰撞检测、约束、摩擦力、弹性、重力等功能。planck.js 可以与 Pixi.js 等 2D 渲染库结合使用，创建出有趣的 2D 场景和效果。

planck.js 的 GitHub 仓库有超过 1.5k 的星标。

网站：https://piqnt.com/planck.js/
Git 仓库：https://github.com/shakiba/planck.js
文档：https://github.com/shakiba/planck.js/tree/master/docs
主要由一名开发人员维护
目前仍在更新

Box2D.js

Box2D.js是一款基于C++的物理引擎库Box2D的JavaScript移植版本。它是一款功能强大且广泛应用于游戏开发的2D物理引擎。

Box2D.js 在 Github 上有 1.3k 星标。

Box2D.js的特点包括：

真实的物理模拟：Box2D.js提供了高度准确且稳定的物理模拟，包括刚体运动、碰撞检测和约束等功能。

丰富的功能：Box2D.js支持各种类型的刚体、关节和碰撞形状，以及强大的约束和碰撞过滤功能。

广泛的应用：Box2D.js被广泛应用于众多成功的游戏项目，如《Angry Birds》和《Hill Climb Racing》等。

活跃的社区：Box2D.js拥有庞大的开发者社区，提供了大量的教程、示例和支持。

网站：http://kripken.github.io/box2d.js/demo/webgl/box2d.html
Git 仓库：https://github.com/kripken/box2d.js/
文档：无文档
主要由一名开发人员维护（与 Ammo.js 相同）
目前仍在更新

3、小结

物理引擎库有很多。建议大家根据自己的需求选择，并不是非要使用 3D 库，2D 库的性能通常要高得多。

如果你能将物理经验总结为 2D 碰撞，那么你最好使用 2D 库。

- EOF -

文章已经看到这了，别忘了在右下角点个“赞”和“在看”鼓励哦~

推荐阅读点击标题可跳转

1、VS Code 变身小霸王游戏机！

2、认知升级：模型与范式转换

3、超赞的 Python 编译器，单核提速100倍

4、高效的终极秘诀

5、Python 3.12 版本有什么变化？

回复下方「关键词」，获取优质资源

回复关键词「 pybook03」，领取进击的Grey与小伙伴一起翻译的《Think Python 2e》电子版

回复关键词「书单02」，领取进击的Grey整理的 10 本 Python 入门书的电子版

👇关注我的公众号👇

告诉你更多细节干货

欢迎围观我的朋友圈

👆每天更新所想所悟

标签

#javascript #开发语言 #ecmascript #前端

Three.js与物理引擎深度整合：Ammo.js实现刚体碰撞检测与软体动力学仿真 Three.js与物理引擎深度整合：Ammo.js实现刚体碰撞检测与软体动力学仿真。阅读详情