mcpField
M
matterjs

matterjs

github.com/mengto开发7.1k1.6k 次安装3 天前更新
代码仓库

关于 matterjs

用于在 HTML、React 或纯 canvas 项目中构建 Matter.js 物理模拟的技能，涵盖基础设置、可选交互和应用退出时的清理。

主要功能

  1. 01选择环境与渲染方式
  2. 02设置引擎、世界、渲染器和循环
  3. 03添加物体与约束的模式
  4. 04配置鼠标交互
  5. 05提供 SPA 清理指南

适用场景

  1. 01启动 Matter.js 模拟
  2. 02添加可拖动的鼠标交互
  3. 03在 SPA 中清理模拟

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/mengto/skills --skill matterjs

安装后在 Claude Code 中输入/matterjs确认已加载。

附带文件demo/index.htmldemo/PROMPT.md

详细介绍

Matter.js 技能

工作流

  1. 确认环境（纯 HTML、React 或仅 canvas）和渲染方式（用于调试的 Matter.Render 或自定义渲染器）。
  2. 提供最精简的 Engine/World/Render/Runner 设置，并添加刚体。
  3. 仅在用户要求时添加交互（鼠标约束）或约束。
  4. 分享适用于 SPA 或拆卸场景的清理步骤。

最简设置

<script>
  const { Engine, Render, Runner, Bodies, Composite } = Matter;

  const engine = Engine.create();

  const render = Render.create({
    element: document.body,
    engine: engine,
    options: {
      width: 800,
      height: 600,
      wireframes: false
    }
  });

  const runner = Runner.create();
  Runner.run(runner, engine);
  Render.run(render);

  const ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });
  const box = Bodies.rectangle(400, 200, 80, 80);

  Composite.add(engine.world, [ground, box]);
</script>

常见模式

  • 使用 Composite.add(engine.world, [...]) 将刚体添加到世界中。
  • 使用 Render.create({ element, engine }) 自动创建画布，或传入自行创建的 canvas。
  • 设置 render.options.wireframes = false 以进行实体渲染。
  • 使用 Runner.run(runner, engine) 启动简单循环；如果需要自定义计时，则在自己的循环中调用 Engine.update。

鼠标交互（可选）

const { Mouse, MouseConstraint } = Matter;
const mouse = Mouse.create(render.canvas);
const mouseConstraint = MouseConstraint.create(engine, { mouse });
Composite.add(engine.world, mouseConstraint);
render.mouse = mouse;

清理检查清单（SPA）

  • 使用 Runner.stop(runner) 停止运行器。
  • 从 DOM 中移除渲染画布。
  • 根据需要清除引擎和世界。

规格缺失时要询问的问题

  • 画布应使用多大的视口尺寸和缩放比例？
  • 我们使用 Matter.Render 还是自定义渲染器？
  • 你需要鼠标/触摸拖拽交互吗？
  • 模拟循环在画布移出视口时是否应暂停？

评论

支持 Markdown