物理世界中的约束-MatterJs(五)

文章基于 MatterJs ^0.17.1

前言

在之前的文章中, 我们介绍了物理世界中的刚体和复合体.

• 物理世界中的刚体
• 物理世界中的复合体

复合体就是由刚体和复合材料通过某种「约束」组合在一起的的物体.

那什么是约束呢?
约束就是链接两个物体之间的某种规则, 约束自己具备一系列的物理属性, 这些属性导向了两个物理在物理世界的形态.
————这两个物体可以是点、刚体、复合体.

在matterJs中, 提供了「鼠标约束」. 可以实现人机交互, 提供了鼠标或者触摸移动刚体的方法.
接下来我们就来看下「约束」在matterJs中是如何运行的吧.

一、物体间的约束

MatterJs中的Constraint模块.
刚体可以和点、刚体、复合体形成约束.
通过物体间的约束可以形成各式各样的复合环境.

1、约束的属性

约束Constraint具有刚体的大部分属性. 下面我们介绍一些常用的:

上面使一些通用的属性, 下面是可能存在的构成约束的条件:

• pointA
• bodyA
• pointB
• bodyB

利用这些可以定义:

• 点A与刚体B之间的约束
• 刚体A与刚体B之间的约束

可能看到这里一头雾水, 这是啥? 我们下面会接着讲如何去创建一个约束.

2、如何去创建一个约束

方法: Constraint.create = function(options)
参数:

• options 配置信息, 即上面所说的属性的设置

通过Constraint模块我们可以使用create方法创建一个约束.

点与刚体链接

举个例子?:
物理环境搭建这里就不讲了, 之前的文章有.
下面我们来写一根线吊着一个小球.

/** 创建一个吊球 **/
var _cricle = Bodies.circle(200, 200, 50, {
    mass: 0.1,
    isStatic: false
}, 80);
/** 创建约束 **/
var _constraint = Constraint.create({
    pointA: {
        x: 200,
        y: 100
    },
    bodyB: _cricle,
    /** 刚体B的链接点 **/
    // pointB: {
    //     x: 20,
    //     y: 20
    // }
});
Composite.add(world, [_cricle, _constraint]);
复制代码

上面的例子我们可以看到:

左边的是没有设置pointB或者pointB为{ x: 0,y: 0}的情况, 右边是设置了pointB为{ x: 20,y: 20}的情况.

如果点与刚体链接, 刚体没有指定点, 默认重心.

刚体与刚体链接

举个例子?:
两个刚体相连, 紧接着上面的例子:

var _polygon = Bodies.polygon(400, 200, 3, 50, {
    isStatic: true,
});

var _polygon1 = Bodies.polygon(100, 200, 4, 50, {
    isStatic: false,
});

/** 创建约束1 **/
var _constraint1 = Constraint.create({
    bodyA: _cricle,
    bodyB: _polygon,
    pointB: {
        x: 10,
        y: 10
    }
});
/** 创建约束2 **/
var _constraint2 = Constraint.create({
    bodyA: _cricle,
    bodyB: _polygon1,
});
Composite.add(world, [_cricle, _constraint, _polygon, _polygon1, _constraint1, _constraint2]);
复制代码

我们可以得到如图的复合体:

显而易见, 非静态的刚体「方块」会受力左右摇摆, 但是静态刚体「三角」则不会.

刚体之间的约束, 如果没有制定point, 则默认是在刚体重心.
可以多个刚体或者多个点之间链接. 例如我们在复合体中的「锁链」.

3、获取约束的坐标

获取约束的pointA的坐标.

const point = Constraint.pointAWorld(_constraint);
console.log(point); //{x: 200, y: 100}
复制代码

获取约束的pointB的坐标.

const point = Constraint.pointBWorld(_constraint);
console.log(point); //{x: 200, y: 200}
复制代码

用这两个方法可以获取约束的两个连接点的坐标.

二、鼠标约束

MatterJs中的MouseConstraint模块.
提供的进行人机交互的方法, 可以实现触摸或者鼠标移动刚体.

1、如何去创建一个鼠标约束

方法: MouseConstraint.create = function(engine, options)
参数:

• engine 当前引擎
• options 配置

我们来看下一些options属性:

举个例子?:
就以我们上面的例子做参考, 添加鼠标约束:

var mouse = Mouse.create(render.canvas),
    mouseConstraint = MouseConstraint.create(engine, {
        mouse: mouse
        }
    });
Composite.add(world, mouseConstraint);
render.mouse = mouse;
复制代码

可以看到我们的物体随着鼠标拖拽被拉长了.

三、总结

「约束」Constraint的内容很简单, 结合我们上几章节的内容, 以前说的约束的概念是不是就解释得通了.
约束可以让我们更加形象的去创建一个复合体.
约束可以作用的对象:

• 点与刚体
• 刚体与刚体

同时我们还可以利用MouseConstraint模块进行人机交互.

引擎、刚体、复合体、约束都讲完了, 下一章我们将继续讲解MatterJs中的「碰撞器」.