使用 fromVertices 添加 Body 时使用 matter-js - 生成的顶点相对于彼此的位置不正确

问题描述 投票:0回答:1

这是我期待看到的形状。您可以看到沿着边缘的点描绘了顶点。

这是我正在加载(通过简单导入)并用于创建

Body
.

的 json 文件(从上面生成的)
{
    "cannon_transparent_sm": {
        "label": "cannon",
        "density": 0.1,
        "restitution": 0,
        "friction": 0.1,
        "frictionAir": 0.01,
        "frictionStatic": 0.5,
        "fixtures": [
            {
                "label": "cannon_fixture",
                "vertices": [
                    [ { "x":150, "y":45 }, { "x":134, "y":0 }, { "x":18, "y":30 }, { "x":1, "y":56 }, { "x":21, "y":94 }, { "x":86, "y":76 } ],
                    [ { "x":43, "y":17 }, { "x":44, "y":23 }, { "x":59, "y":19 }, { "x":58, "y":14 } ],
                    [ { "x":6, "y":41 }, { "x":1, "y":56 }, { "x":18, "y":30 } ],
                    [ { "x":6, "y":83 }, { "x":21, "y":94 }, { "x":1, "y":56 }, { "x":2, "y":72 } ],
                    [ { "x":86, "y":76 }, { "x":21, "y":94 }, { "x":25, "y":108 }, { "x":48, "y":124 }, { "x":61, "y":124 }, { "x":73, "y":119 }, { "x":83, "y":109 }, { "x":88, "y":95 } ],
                    [ { "x":34, "y":118 }, { "x":48, "y":124 }, { "x":25, "y":108 } ]
                ]
            }
        ]
    }
}

以上是从这个physicseditor工具生成的。

当我尝试将其添加到我的 2d 世界时出现问题。我正在使用 javascript 库 matter-jsfromVertices() 来生成精灵。

这就是我所看到的。

在我看来,每组顶点的相对位置都不正确。

这是我用来添加“大炮”的 javascript。

var cannonBodyDef = {
  position: Vector.create(300, 50),
  density: this._cannon.density,
  restitution: this._cannon.restitution,
  friction: this._cannon.friction,
  frictionStatic: this._cannon.frictionStatic,
  frictionAir: 0.9, //this._cannon.frictionAir
};

var cannon = Bodies.fromVertices(300, 200, this._cannon.fixtures[0].vertices, cannonBodyDef);

World.add(engine.world, cannon);

它也掉到地板上(预期)然后摇晃了一下然后直接掉了下去!尽管地板是

static: true
。不确定这是否相关。

javascript 2d vertices matter.js
1个回答
0
投票

看起来 Matter 切掉了你形状的突出部分,使它凸起。我建议使用 poly-decomp 库将凹形分解为一组凸形。当从顶点创建实体时,您必须对从物理编辑器导出的扁平数组进行排序。

Common.setDecomp(require('poly-decomp'))

const cannon = Bodies.fromVertices(x, y, [Vertices.clockwiseSort(vertices.flat())])

Got something like this, might look better with some overlapping texture

© www.soinside.com 2019 - 2024. All rights reserved.