如何在 Matter.js 中让物体掉落？

Question

我正在使用 Matter.js 来处理一些图形并想要这个矩形

let title = Bodies.rectangle(w / 2.4, height / 1.8, 300, 100, {
  isStatic: true,
})

获得

isStatic: false

，并在被雨点般落在其上的圆圈击中时掉落。我已经做了一些广泛的谷歌搜索，但除了这个之外还没有真正找到其他东西：

Events.on(engine, 'collisionStart', function (event) {
  event.pairs.forEach(function (obj) {
    console.log(
      'BodyA is static: ' + obj.bodyA.isStatic + '. BodyB is static: ' + obj.bodyB.isStatic
    )
  })
})

这给了我所有发生的碰撞，但我还没弄清楚当有东西撞击时如何设置

isStatic: false

。感谢您的帮助！

Answer 1

您可以在相关实体上调用

Matter.Body.setStatic(body, false)

以使其激活。

这是一个例子：

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

const fallingBody = Matter.Bodies.rectangle(
  200, 0, 20, 20, {
    frictionAir: 0.1,
    density: 0.8,
    render: {fillStyle: "red"},
  },
);
const wall = Matter.Bodies.rectangle(
  200, 150, 400, 20, {
    frictionAir: 0.05,
    isStatic: true,
    render: {fillStyle: "green"}
  },
);
Matter.Composite.add(engine.world, [fallingBody, wall]);

Matter.Events.on(engine, "collisionStart", event => {
  if (
   wall.isStatic &&
   event.pairs.some(e => Object.values(e).includes(wall))
  ) {
    Matter.Body.setStatic(wall, false);
  }
});

Matter.Render.run(render);
Matter.Runner.run(Matter.Runner.create(), engine);

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.20.0/matter.min.js"></script>