Notch 在 Matter.js 中不会以凹形显示

Question

我需要在 Matter.js 中制作这个形状：

这是我尝试过的（我从 Figma 中获取要点并将它们插入到 Matter.js 中）：

const logoBottom = Matter.Bodies.fromVertices(
    150,
    150,
    [
        [
            Matter.Vector.create(13.06, 22.53),
            Matter.Vector.create(66.94, 22.53),
            Matter.Vector.create(58.24, 37.54),
            Matter.Vector.create(39.03, 37.54),
            Matter.Vector.create(48.64, 54.1),
            Matter.Vector.create(40, 69),
        ],
    ],
    { isStatic: true }
);

但是，侧面的凹口没有显示，我不知道为什么。

Answer 1

根据评论，听起来您错过了需要添加poly-decomp。

与多分解：

const engine = Matter.Engine.create();
const runner = Matter.Runner.create();
const render = Matter.Render.create({element: document.body, engine});
const logoBottom = Matter.Bodies.fromVertices(
  150,
  150,
  [
    [
      Matter.Vector.create(13.06, 22.53),
      Matter.Vector.create(66.94, 22.53),
      Matter.Vector.create(58.24, 37.54),
      Matter.Vector.create(39.03, 37.54),
      Matter.Vector.create(48.64, 54.1),
      Matter.Vector.create(40, 69),
    ],
  ],
  {isStatic: true},
);
Matter.Composite.add(engine.world, logoBottom);
Matter.Render.run(render);

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/decomp.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.20.0/matter.min.js"></script>

没有多聚分解：

const engine = Matter.Engine.create();
const runner = Matter.Runner.create();
const render = Matter.Render.create({element: document.body, engine});
const logoBottom = Matter.Bodies.fromVertices(
  150,
  150,
  [
    [
      Matter.Vector.create(13.06, 22.53),
      Matter.Vector.create(66.94, 22.53),
      Matter.Vector.create(58.24, 37.54),
      Matter.Vector.create(39.03, 37.54),
      Matter.Vector.create(48.64, 54.1),
      Matter.Vector.create(40, 69),
    ],
  ],
  {isStatic: true},
);
Matter.Composite.add(engine.world, logoBottom);
Matter.Render.run(render);

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

我不确定您使用的是哪个版本的 MJS，但这给了我以下警告：

matter-js：Bodies.fromVertices：安装“poly-decomp”库并使用 Common.setDecomp 或提供“decomp”作为全局分解凹顶点。

相关 GH 问题：#449、#15、#487。