带有约束实体的 Matter.js 碰撞过滤器答案

【问题标题】：Matter.js collisionFilter with constrained Bodies带有约束实体的 Matter.js 碰撞过滤器
【发布时间】：2019-10-22 12:40:23
【问题描述】：

我正在尝试在 matte.js 中吸引眼球。我有一个瞳孔和一个虹膜，它们被约束在一起。我的问题是我需要让两个身体都忽略碰撞，这样我才能将一个放在另一个之上。

var defaultCategory = 0x0001

var iris = Bodies.circle(0, 0, 20);
var pupil = Bodies.circle(300, 200, 30)
var ground = Bodies.rectangle(400, 380, 810, 60, { isStatic: true });


 var bodyA = Bodies.polygon(100, 100, 6, 20,{
   collisionFilter: {
     mask: defaultCategory
   }
 });
    var bodyB = Bodies.polygon(200, 100, 10, 50,{
       collisionFilter: {
                category: defaultCategory
            }
    });

    var constraint = Constraint.create({
        bodyA: bodyA,
        pointA: { x: -10, y: -10 },
        bodyB: bodyB,
        pointB: { x: -10, y: -10 },
        length: 40
    });

    World.add(world, [pupil, iris, ground, constraint]);

【问题讨论】：

标签： matter.js

【解决方案1】：

不确定是否有更好的方法，但我没有使用类别和掩码，而是使用了组，这允许两个主体重叠，见下文：

var Engine = Matter.Engine,
    Render = Matter.Render,
    Runner= Matter.Runner,
    World = Matter.World,
    Bodies = Matter.Bodies,
    Composites = Matter.Composites,
    Common = Matter.Common,
    Constraint = Matter.Constraint,
    Body = Matter.Body

// no longer using category    
var defaultCategory = 0x0001

//using group instead
var group = Body.nextGroup(true)


var engine = Engine.create(),
    world = engine.world;

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


var ground = Bodies.rectangle(400, 380, 810, 60, { isStatic: true });


 var bodyA = Bodies.polygon(100, 100, 6, 20,{
   collisionFilter: { group: group }
 });
    var bodyB = Bodies.polygon(200, 100, 10, 50,{
       collisionFilter: { group: group }
    });

    var constraint = Constraint.create({
        bodyA: bodyA,
        pointA: { x: -10, y: -10 },
        bodyB: bodyB,
        pointB: { x: -10, y: -10 },
        length: 40
    });

    World.add(world, [bodyA, bodyB, ground, constraint]);

// World.add(world, [leftEye, leftEyeBall, ground, constraint]);

Engine.run(engine);
Render.run(render);

【讨论】：