你好,我是坚持分享干货的 EarlGrey,翻译出版过《Python编程无师自通》、《Python并行计算手册》等技术书籍。
如果我的分享对你有帮助,请关注我,一起向上进击。
创作不易,希望大家给一点鼓励,把公众号设置为“星标”,给文章点个“赞”和“在看”,谢谢大家啦~
下面这张截图来自某个开发者网站,网站被他打造成了一个仿真世界,我们通过上下左右键可以控制图片中央那辆卡车。想不想为你的网站添加类似的 3D 和仿真效果?
![1d5003603e9384e3f5abf2d2f2e47d9f.png](https://img-blog.csdnimg.cn/img_convert/1d5003603e9384e3f5abf2d2f2e47d9f.png)
这些效果背后是由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
![69f6d0616c8f51c4a0c04b917b8ab34e.png](https://img-blog.csdnimg.cn/img_convert/69f6d0616c8f51c4a0c04b917b8ab34e.png)
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
![0ffc4fb0ac12666478fb5bc2c44cbca7.jpeg](https://img-blog.csdnimg.cn/img_convert/0ffc4fb0ac12666478fb5bc2c44cbca7.jpeg)
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
![b07a294b3288e9293d440d2eeab79a86.png](https://img-blog.csdnimg.cn/img_convert/b07a294b3288e9293d440d2eeab79a86.png)
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
![3692ae1248292abcde5f91df77f715aa.jpeg](https://img-blog.csdnimg.cn/img_convert/3692ae1248292abcde5f91df77f715aa.jpeg)
Matter.js 是一个用于 Web 的 JavaScript 2D 物理引擎库,该项目诞生于 2014 年,它相较于老牌的 Box2D 引擎库,Matter.js 更为轻量级,并且在性能和功能方面也不逊色。
Matter.js 支持 2D 物理仿真,包括刚体、复合体、组合体、凹面和凸面、弹性、摩擦力、事件监听、约束、重力、睡眠和静态物体、圆角等功能。Matter.js 还提供了基于 Canvas 的渲染器,可以结合 p2.js 与 CreateJS 或 Egret 渲染引擎使用。
Matter.js 的 GitHub 仓库有超过 10k 的星标,表明它有很高的受欢迎程度和社区支持。
![37e5744e8a385c737af5c454534d7d65.png](https://img-blog.csdnimg.cn/img_convert/37e5744e8a385c737af5c454534d7d65.png)
网站:https://brm.io/matter-js/
Git 仓库:https://github.com/liabru/matter-js
文档:https://brm.io/matter-js/docs/
主要由一名开发人员维护
仍在更新
P2.js
![7d86c7e7d806d6d0cb922bb8735b829f.png](https://img-blog.csdnimg.cn/img_convert/7d86c7e7d806d6d0cb922bb8735b829f.png)
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
![a4076a84579824169b3b509c6a69dc05.png](https://img-blog.csdnimg.cn/img_convert/a4076a84579824169b3b509c6a69dc05.png)
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 -
文章已经看到这了,别忘了在右下角点个“赞”和“在看”鼓励哦~
推荐阅读 点击标题可跳转
4、高效的终极秘诀
回复下方「关键词」,获取优质资源
回复关键词「 pybook03」,领取进击的Grey与小伙伴一起翻译的《Think Python 2e》电子版
回复关键词「书单02」,领取进击的Grey整理的 10 本 Python 入门书的电子版
👇关注我的公众号👇
告诉你更多细节干货
欢迎围观我的朋友圈
👆每天更新所想所悟