【前端】Matter：物体的高级控制

在 Matter.js 中，除了简单的物体创建和碰撞检测外，还可以通过高级控制实现更复杂的物理交互与模拟效果。本教程将介绍如何使用 约束 (Constraint)、复合物体 (Composite) 以及如何进行 运动与旋转控制，来实现链条、摆钟等效果，以及复杂的物体组合与精准的物体运动控制。

约束 (Constraint)

约束在物理引擎中用来连接两个物体，模拟关节、弹簧等效果。通过约束可以创建更复杂的物体行为，比如链条、摆钟等。

创建基本约束

在 Matter.js 中，Constraint.create() 用于创建一个约束。你可以将它应用于两个物体或将一个物体固定在世界中的某个点。以下是一个简单的例子，展示如何创建一个连接两个物体的约束：

const { Engine, Render, Runner, World, Bodies, Constraint } = Matter;// 创建引擎和渲染器
const engine = Engine.create();
const render = Render.create({element: document.body,engine: engine,options: {width: 800,height: 600,wireframes: false}
});// 创建两个物体
const circleA = Bodies.circle(300, 200, 40);
const circleB = Bodies.circle(400, 200, 40);// 创建约束连接两个物体
const constraint = Constraint.create({bodyA: circleA,bodyB: circleB,stiffness: 0.05, // 弹性系数，值越大连接越刚性length: 100,     // 约束的长度render: {visible: true   // 可视化约束}
});// 将物体和约束添加到世界中
World.add(engine.world, [circleA, circleB, constraint]);// 运行引擎和渲染器
Engine.run(engine);
Render.run(render);

在这个示例中，两个圆形物体 circleA 和 circleB 通过约束连接在一起，stiffness 控制约束的弹性系数，length 设置连接的长度。通过这个约束，物体之间可以相互拉动或推动，产生类似弹簧的效果。

模拟摆钟

我们可以使用约束创建一个简单的摆钟。在摆钟中，一个物体通过关节固定在某个位置，并且可以在重力作用下摆动。

const pendulumBall = Bodies.circle(400, 300, 40);// 创建摆钟的约束，将物体固定在世界中的某个点
const pendulum = Constraint.create({pointA: { x: 400, y: 100 },  // 固定点的位置bodyB: pendulumBall,         // 链接的物体length: 200,stiffness: 0.9
});World.add(engine.world, [pendulumBall, pendulum]);

在这里，pointA 表示约束的固定点，bodyB 是摆钟的球体。这种约束模拟了一个固定在天花板上的摆钟。

链条效果

通过连接多个物体和约束，我们可以模拟链条的效果。每个物体通过约束与前一个物体连接，形成一条链条。

const chain = [];
let prevCircle = null;for (let i = 0; i < 5; i++) {const circle = Bodies.circle(300 + i * 50, 200, 20);if (prevCircle) {const link = Constraint.create({bodyA: prevCircle,bodyB: circle,length: 50,stiffness: 0.9});World.add(engine.world, link);}chain.push(circle);prevCircle = circle;
}World.add(engine.world, chain);

在这个例子中，chain 是一个由圆形物体组成的链条。每个物体通过约束与前一个物体连接，模拟了链条的运动。

复合物体 (Composite)

复合物体是将多个刚体组合成一个单一的结构，这些刚体可以作为一个整体进行运动和交互。复合物体非常适合用来创建复杂的形状或机械结构，如车辆、机器人等。

创建简单的复合物体

Composite.create() 用于创建一个复合物体，然后我们可以将多个刚体添加到其中。

const composite = Matter.Composite.create();const bodyA = Bodies.circle(200, 200, 40);
const bodyB = Bodies.rectangle(300, 200, 80, 40);// 将物体添加到复合物体中
Matter.Composite.add(composite, [bodyA, bodyB]);// 将复合物体添加到世界中
World.add(engine.world, composite);

在这个示例中，我们创建了一个复合物体，并将一个圆形和一个矩形物体添加到复合物体中。这个复合物体会作为一个整体参与物理模拟。

组合复杂结构

你可以通过复合物体创建更复杂的结构，如带有轮子的车体。以下是一个简单的例子，展示了如何组合车身和车轮：

const car = Composite.create();// 车身
const body = Bodies.rectangle(400, 300, 100, 40);// 车轮
const wheelA = Bodies.circle(370, 340, 20);
const wheelB = Bodies.circle(430, 340, 20);// 将车轮通过约束连接到车身
const axleA = Constraint.create({bodyA: body,bodyB: wheelA,pointB: { x: 0, y: 0 },stiffness: 1,length: 0
});const axleB = Constraint.create({bodyA: body,bodyB: wheelB,pointB: { x: 0, y: 0 },stiffness: 1,length: 0
});// 将所有部件添加到复合物体中
Composite.add(car, [body, wheelA, wheelB, axleA, axleB]);World.add(engine.world, car);

这个例子创建了一个简单的汽车结构，两个车轮通过约束连接到车身上，形成一个整体。车轮可以自由旋转，而车身则负责支持整个结构。

运动与旋转控制

在 Matter.js 中，除了依靠物理引擎的自动处理外，我们还可以精确控制物体的运动和旋转行为。

直接设置位置和角度

可以使用 Body.setPosition() 和 Body.setAngle() 来直接修改物体的位置和角度。这允许你在特定条件下精确控制物体的位置和旋转。

const box = Bodies.rectangle(400, 300, 80, 80);// 设置新的位置
Matter.Body.setPosition(box, { x: 500, y: 400 });// 设置新的角度（单位为弧度）
Matter.Body.setAngle(box, Math.PI / 4);

设置物体的速度和角速度

你可以通过 Body.setVelocity() 和 Body.setAngularVelocity() 来控制物体的速度和旋转速度。

// 设置线速度
Matter.Body.setVelocity(box, { x: 5, y: -3 });// 设置角速度（旋转速度）
Matter.Body.setAngularVelocity(box, 0.1);

这些方法允许你直接操控物体的运动轨迹和旋转行为，而不仅仅依赖于物理引擎的自动计算。

施加持续力和扭矩

除了瞬时的速度变化，你还可以通过 Body.applyForce() 和 Body.applyTorque() 持续施加力和扭矩，控制物体的运动方向和旋转效果。

// 施加一个持续的向上的力
Matter.Body.applyForce(box, { x: box.position.x, y: box.position.y }, { x: 0, y: -0.05 });// 施加扭矩，使物体旋转
Matter.Body.applyTorque(box, 0.01);

applyForce() 允许你施加一个在某个点作用的力，而 applyTorque() 则用于施加扭矩，导致物体旋转。

小结

在本教程中，我们探索了 Matter.js 中物体的高级控制，包括通过 约束 (Constraint) 实现复杂的物体连接与交互、使用 复合物体 (Composite) 创建复杂结构，以及如何进行精确的 运动与旋转控制。这些高级技术能够帮助你实现更加逼真的物理模拟效果，创建更具挑战性和趣味性的交互场景。