阅读 286

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

文章基于 MatterJs ^0.17.1

前言

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

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

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

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

一、物体间的约束

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

1、约束的属性

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

属性名默认值介绍
id0每个约束唯一id, 在创建过程中自增
label"Constraint"约束名称
stiffness0.7硬度
damping0阻尼系数
angleA0刚体A的角度
angleB0刚体B的角度

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

  • 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]);
复制代码

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

WechatIMG264.png

左边的是没有设置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]);
复制代码

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

WechatIMG265.png

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

刚体之间的约束, 如果没有制定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属性:

属性名默认值介绍
mousenull鼠标对象
elementnull鼠标挂载的节点, 一般canvas标签

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

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

WechatIMG266.png

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

三、总结

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

  • 点与刚体
  • 刚体与刚体

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

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

文章粗浅, 望诸位不吝您的评论和点赞~
注: 本文系作者呕心沥血之作,转载须声明

文章分类
前端
文章标签