【前端】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) 创建复杂结构，以及如何进行精确的 运动与旋转控制。这些高级技术能够帮助你实现更加逼真的物理模拟效果，创建更具挑战性和趣味性的交互场景。