用途:在实现 2D 物理交互时使用 Matter.js,包括引擎与世界搭建、渲染与运行循环配置、添加刚体和约束。
主要能力:创建 Engine(引擎)、Render(渲染器)、Runner(运行循环),添加 Bodies(刚体)和 Composite(复合体)到世界;可选加入 Mouse 与 MouseConstraint 实现拖拽交互。
使用方式:先确认环境(纯 HTML、React 或仅 canvas)及渲染方案(Matter.Render 调试或自定义渲染器);提供最小 Engine/World/Render/Runner 搭建并添加刚体;仅在需要时加入交互或约束;为 SPA 或拆卸场景提供清理步骤。最小搭建示例中,用 Engine.create() 创建引擎,Render.create({ element: document.body, engine: engine, options: { width: 800, height: 600, wireframes: false } }) 创建渲染,Runner.run(runner, engine) 与 Render.run(render) 启动循环,再用 Bodies.rectangle(...) 创建地面与方块,并通过 Composite.add(engine.world, [ground, box]) 加入世界。
常见模式:用 Composite.add(engine.world, [...]) 添加刚体;用 Render.create({ element, engine }) 自动创建 canvas 或传入自建 canvas;设置 render.options.wireframes = false 为实心渲染;用 Runner.run(runner, engine) 作为简单循环,或在自己的循环里调用 Engine.update 以自定义时序。鼠标交互需用 Mouse.create(render.canvas)、MouseConstraint.create(engine, { mouse }),并执行 Composite.add(engine.world, mouseConstraint) 与 render.mouse = mouse。
SPA 清理:用 Runner.stop(runner) 停止运行器,从 DOM 移除渲染 canvas,必要时清空 engine 与 world。
限制:资料未提供具体版本、性能数据、兼容性说明或收费信息;规格缺失时需先询问视口尺寸与缩放、使用 Matter.Render 还是自定义渲染器、是否需要鼠标/触摸拖拽、离屏时是否暂停模拟。