前端 2D 物理引擎：gh_mirrors/fr/frontend-stuff Box2D.js 教程
项目地址: https://gitcode.com/gh_mirrors/fr/frontend-stuff 你是否还在为实现真实的物理碰撞效果而烦恼？本文将带你使用 Box2D.js 在网页中创建逼真的 2D 物理世界，从基础安装到实战案例，让你快速掌握物理引擎开发技巧。读完本文你将获得：
- Box2D.js（物理引擎）的基础概念与应用场景
- 在 gh_mirrors/fr/frontend-stuff 项目中的集成方法
- 创建重力世界与物理刚体的完整流程
- 实现碰撞检测与响应的核心技巧
项目环境准备
在 gh_mirrors/fr/frontend-stuff 项目中，通过 npm 安装 Box2D.js 依赖：
npm install box2d.js --save
查看项目依赖配置文件确认安装状态：package.json
核心概念与基础架构
Box2D.js 采用世界-刚体-关节的核心架构，其工作流程如下：
快速上手：创建重力世界
创建演示文件 examples/box2d-demo.js，实现基础物理世界：
// 导入 Box2D 模块
import * as Box2D from 'box2d.js';
// 创建物理世界（重力加速度 9.8m/s² 向下）
const world = new Box2D.b2World(new Box2D.b2Vec2(0, 9.8));
// 创建地面刚体
const groundBodyDef = new Box2D.b2BodyDef();
groundBodyDef.position.Set(400, 580); // 位置坐标
const groundBody = world.CreateBody(groundBodyDef);
const groundShape = new Box2D.b2PolygonShape();
groundShape.SetAsBox(400, 20); // 尺寸
groundBody.CreateFixture(groundShape, 0); // 密度为0（静态刚体）
// 创建动态刚体（正方形）
const bodyDef = new Box2D.b2BodyDef();
bodyDef.type = Box2D.b2_dynamicBody; // 动态类型
bodyDef.position.Set(400, 100);
const body = world.CreateBody(bodyDef);
const shape = new Box2D.b2PolygonShape();
shape.SetAsBox(30, 30); // 30x30像素正方形
const fixtureDef = new Box2D.b2FixtureDef();
fixtureDef.shape = shape;
fixtureDef.density = 1.0; // 密度
fixtureDef.friction = 0.3; // 摩擦系数
body.CreateFixture(fixtureDef);
// 物理世界更新循环
function update() {
world.Step(1/60, 6, 2); // 时间步长与迭代次数
requestAnimationFrame(update);
}
update();
关键参数配置表
| 参数类别 | 核心属性 | 取值范围 | 作用说明 |
|---|---|---|---|
| 重力设置 | b2Vec2(x, y) | x: -10~10, y: -10~10 | 定义世界重力加速度向量 |
| 刚体类型 | type | b2_staticBody/b2_dynamicBody | 静态刚体（固定不动）/动态刚体（受重力影响） |
| 形状尺寸 | SetAsBox(hx, hy) | 像素单位 | 设置矩形刚体的半宽/半高 |
| 密度参数 | density | 0~10 | 决定刚体质量（密度×面积），静态刚体必须设为0 |
碰撞检测与响应
通过接触监听器实现碰撞事件处理：
// 创建接触监听器
const contactListener = new Box2D.b2ContactListener();
contactListener.BeginContact = function(contact) {
// 碰撞开始时触发
const bodyA = contact.GetFixtureA().GetBody();
const bodyB = contact.GetFixtureB().GetBody();
console.log('碰撞发生:', bodyA.GetUserData(), bodyB.GetUserData());
};
world.SetContactListener(contactListener);
// 为刚体设置用户数据
body.SetUserData({ name: 'dynamic-box' });
groundBody.SetUserData({ name: 'ground' });
项目实践与扩展
结合项目中的 SVG 渲染工具 src/utils/render.js，可实现物理状态可视化。更多高级应用：
- 关节约束：使用距离关节实现弹簧效果
- 射线检测：实现鼠标拾取物理对象
- 性能优化：通过物体休眠减少计算量
参考项目文档 docs/jscodeshift-tutorial.md 中的自动化工具使用方法，可批量处理物理场景配置文件。收藏本文，关注 README.md 获取更多前端工具使用指南。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
