Mass

先变量定义部分:

const canvas = ref(null)

const f = {
  add: noop,
}

• canvas是一个Vue 3的响应式引用(ref)，它将在后面用于引用HTML中的canvas元素。
• f是一个包含一个名为add的函数的对象。初始时，add函数被设置为一个空函数(noop)，稍后将被赋予特定的功能。

物理引擎初始化和物体添加:

const engine = Engine.create()

const render = Render.create({
  element: canvas.value!,
  engine,
  options: {
    width: 400,
    height: 318,
    background: 'transparent',
    wireframes: false,
    pixelRatio: 'auto',
  },
})

// ...（其他属性定义，例如 wireframe、ground）

World.add(engine.world, [ground])

f.add = () => {
  const boxA = Bodies.rectangle(180, -40, 80, 80, { render: wireframe })
  World.add(engine.world, [boxA])
}

f.add()

Runner.run(engine)
Render.run(render)

• 在这部分代码中，首先创建了一个物理引擎(engine)和一个渲染器(render)。渲染器与一个canvas元素关联，可以用于在画布上呈现物理世界。
• ground是一个静态物体，代表地面，通过Bodies.rectangle创建，并将其添加到物理引擎世界中。
• f.add函数被定义为一个添加方块到物理引擎世界中的操作。方块的位置和属性在这里被定义。
• 最后，Runner.run(engine)和Render.run(render)分别用于运行物理引擎和渲染器。

模板部分:

<template>
  <paper>
    <div ref="canvas" class="overflow-hidden" @click="f.add" />
  </paper>
</template>

在模板部分，一个包含canvas标签的div元素被定义。当用户点击这个div元素时，会触发f.add方法，从而在物理引擎世界中添加一个方块。

通过 Matter.js 库创建了一个交互式动态效果，其中包括一个物理引擎世界和一个渲染器。我们可以通过点击页面来添加方块到画布上，实现了一个基本的物理模拟效果。