JavaScript物理引擎有哪些？如何实现重力与碰撞模拟

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《JavaScript物理引擎有哪些？如何实现重力与碰撞模拟》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

JavaScript无内置物理引擎，常见第三方库有：①Matter.js（轻量2D）；②Planck.js（高精度Box2D移植）；③Cannon.js/es（3D刚体）；④Ammo.js（功能全的Bullet移植）。

JavaScript 本身没有内置的物理引擎，所谓“JS 物理引擎”是指运行在浏览器或 Node.js 环境中的、用 JavaScript（或 WebAssembly）编写的第三方库，用于模拟刚体动力学——比如重力、速度、加速度、碰撞检测与响应。

常见的 JS 物理引擎有哪些

它们各有侧重，适用于不同场景：

• Matter.js：轻量、易上手，适合 2D 游戏和交互式演示；支持刚体、约束、复合物体、碰撞过滤等，API 清晰，文档友好。
• Planck.js：Box2D 的 JS 移植版（基于 C++ Box2D），精度高、稳定性好，适合需要严谨物理行为的项目（如平台跳跃游戏）。
• Cannon.js / Cannon-es：专注 3D，支持三维刚体、车辆、布料基础；cannon-es 是活跃维护的现代版本（支持 ES 模块、TypeScript、WebGL 兼容性更好）。
• Ammo.js：Bullet 物理引擎的 Emscripten 编译版，功能最全（支持软体、车辆、射线投射），但体积大、学习成本高，适合复杂 3D 应用（如 Three.js 集成）。

如何用 Matter.js 模拟重力

重力在 Matter.js 中默认开启（y 轴正向向下，g = 1

默认值可通过 engine.world.gravity 修改：

• engine.world.gravity.y = 0.8：减弱重力
• engine.world.gravity.y = 0：关闭重力（失重）
• engine.world.gravity.x = 0.3：添加水平方向重力（例如倾斜世界）

注意：重力只影响具有 isStatic: false 和质量（mass 或 density）的刚体。静态物体（isStatic: true）不受重力影响。

如何实现基本碰撞检测与响应

Matter.js 自动处理碰撞检测与物理响应（如反弹、摩擦、恢复系数），你只需关注两个关键点：

• 设置碰撞属性：通过 restitution（弹性，0=完全不弹，1=完全弹性）、friction（摩擦力）、frictionAir（空气阻力）控制效果。例如：{ restitution: 0.7, friction: 0.01 } 让小球弹跳真实些。
• 监听碰撞事件：使用 Events.on(engine, 'collisionStart') 获取碰撞对。示例：

  Events.on(engine, 'collisionStart', (event) => {
    const pairs = event.pairs;
    for (let i = 0; i 

注意：碰撞事件不是每帧触发，而是每次新接触发生时触发一次；若需持续接触判断（如“是否正在触地”），应检查 body.position.y 或使用 body.bounds 手动检测，或借助 isSleeping 和接触状态辅助判断。

不依赖引擎的极简重力+碰撞示意（仅理解原理）

如果你只想手动实现最基础的下落与地面反弹（无旋转、无多物体交互），可这样写：

• 每帧更新位置：y += vy; vy += gravity;
• 碰到地面（比如 y ≥ canvasHeight - height）时：y = canvasHeight - height; vy *= -0.8;（-0.8 实现反弹衰减）
• 两个矩形碰撞粗略判断：rect1.x rect2.x && ...（轴对齐包围盒，AABB）

但这只是运动学模拟，缺乏质量、冲量、角动量等物理一致性，复杂场景强烈建议用成熟引擎。

以上就是《JavaScript物理引擎有哪些？如何实现重力与碰撞模拟》的详细内容，更多关于的资料请关注golang学习网公众号！