I have a polygon that I’m trying to make into a Body in matter.js, but it’s concave so i’ve split it into multiple convex polygons as shown below:

_{here is the point data, it’s very large}

But when I try to add this into my matter.js world, like this:

import m from "matter-js";

const engine = m.Engine.create();
const render = m.Render.create({
    engine,
    canvas,
});
const ramp = m.Bodies.fromVertices(150, 70, /* point data */);
const rampConstraint = m.Constraint.create({
    bodyA: ramp,
    pointB: { x: 150, y: 70 },
    length: 0,
    stiffness: 0.7,
});
m.Composite.add(engine.world, [ramp, rampConstraint]);

m.Render.run(render);

setInterval(() => {
    requestAnimationFrame(() => {
        m.Engine.update(engine, delta);
    });
}, 1000 / 60);

The polygons come out all “smushed together” in the center of the object:

How can I fix this? I’ve tried manually creating all of the polygons as their own individual bodies and then using them as the parts for a body, and removing the point constraint, but neither seems to do anything.