MatterJS 0.20.0版本球体不受重力影响：SvelteKit集成求助

你的代码核心问题是Matter.Runner的调用方式错误，导致引擎循环没有真正启动，刚体自然不会受到重力更新。另外缺少地面刚体的话，球会直接下落出渲染区域，也会造成“停在原地”的错觉。

修正后的代码 #

onMount(async () => {
  const Matter = await import('matter-js');
  const canvas = document.getElementById("canvas")!;

  // 创建引擎实例
  const engine = Matter.Engine.create();

  // 配置渲染器，必须指定宽高才能正确显示
  const render = Matter.Render.create({
    element: canvas,
    engine: engine,
    options: {
      width: 800,
      height: 600,
      background: '#f5f5f5'
    }
  });

  // 创建动态球体刚体
  const ball = Matter.Bodies.circle(100, 50, 10);
  // 创建静态地面，防止球下落出画面
  const ground = Matter.Bodies.rectangle(400, 590, 800, 20, { isStatic: true });

  // 将刚体添加到物理世界
  Matter.Composite.add(engine.world, [ball, ground]);

  // 启动渲染器
  Matter.Render.run(render);
  // 正确启动Runner：先创建Runner实例，再传入引擎
  Matter.Runner.run(Matter.Runner.create(), engine);
});

关键修正点 #

• Runner调用错误：原代码Matter.Runner.run(engine)不符合API要求，正确用法是先通过Matter.Runner.create()生成Runner实例，再将引擎作为第二个参数传入。
• 添加渲染配置：为Render.create()补充options设置宽高，确保渲染区域可见，避免刚体超出视野。
• 添加地面刚体：通过isStatic: true创建静态地面，让球下落时能碰撞停留，方便观察效果。
• 移除多余的手动更新：Matter.Engine.update(engine)是手动单次更新，Runner启动后会自动循环执行引擎更新，无需手动调用。

内容的提问来源于stack exchange，提问作者ClosingArc