利用 Matter.js Constraint 实现弹簧与铰链效果

在基于浏览器的 2D 物理游戏、机械装置仿真或交互式动效中，如果仅依靠刚体的自由碰撞与重力下落，物体之间是完全离散的。想要构建像弹弓拉伸、悬索桥摆动、车轮减震器，或者旋转门、机械翻板、布偶人体关节等联动效果，就必须引入约束机制。在轻量级 2D 物理引擎 Matter.js 中，Matter.Constraint 模块是统领所有点对点力学关联的核心组件。本文将深入讲解 Constraint 的几何工作模型，并分别给出实现“具有弹性回弹的弹簧效果”与“具有单轴旋转自由度的铰链效果”的具体参数配置方案与完整代码。

一、Matter.Constraint 的几何工作模型与核心参数

在 Matter.js 中，约束本质上是作用于两个锚点之间的几何距离限制器。解算器在每个物理步长（Tick）中，通过施加反向冲量（Impulse）促使两个指定点维持或趋近于设定的目标距离。

理解 Constraint 的关键在于弄清它的挂载结构。一个约束连接的两个端点可以分别是：

• 两个独立刚体之间（双刚体连接，例如车辆底盘与摆动车轮、链条的两个相邻链环）；
• 一个刚体与世界绝对坐标之间（单刚体悬挂，例如天花板上的吊灯、摆钟的轴心）；
• 两个固定世界坐标之间（极少使用，静态测距）。

在使用 Constraint.create(options) 时，以下参数决定了约束的最终表现形式：

二、构建 Constraint 的标准开发流程

在 Matter.js 中应用任何约束都遵循严谨的四步装配生命周期。缺少任何一环（如未将约束添入 Composite，或者混淆了绝对坐标与局部偏移）都会导致物理异常。

三、实现“弹簧效果”的原理与代码实现

所谓弹簧效果，在力学上遵循阻尼简谐振动（Damped Harmonic Oscillation）。当物体受重力或碰撞离开平衡位置时，约束像弹簧一样把物体拉回或推开；随着阻尼吸收动能，振幅逐步衰减，最终在 length 指定的距离上停稳。

1. 弹簧参数配置规律

• stiffness（刚度）：必须显著小于 1.0。一般柔软橡皮筋取 0.01 ~ 0.05，较硬的工业弹簧取 0.1 ~ 0.3。若设为 1.0，约束将丧失任何形变空间，退化为刚性连杆。
• damping（阻尼）：控制能量耗散速率。若设为 0.0，弹簧在无外力损耗下会永久振荡不停；若设置 0.05 ~ 0.1，振荡几次后迅速平稳；若数值过高（如 > 0.5），则呈现过阻尼状态，回弹缓慢而粘滞。
• length（自然长度）：自由松弛时的两点间距。若显式设置为 150，当物体被推至 50px 时产生向外斥力，拉至 250px 时产生向内拉力。

2. 悬挂弹簧代码片段

// 创建一个悬挂在世界固定点 (400, 100) 的弹性球体
const ball = Matter.Bodies.circle(400, 260, 28, {
  restitution: 0.8, // 刚体自身的弹跳系数
  density: 0.004
});

const spring = Matter.Constraint.create({
  pointA: { x: 400, y: 100 }, // 未指定 bodyA，此为世界坐标绝对挂载点
  bodyB: ball,                 // 挂接刚体
  pointB: { x: 0, y: 0 },       // 锚定在刚体质心（中心点）
  length: 140,                 // 弹簧静止自然长度
  stiffness: 0.04,             // 弹性系数：较低的刚度带来弹簧伸缩拉伸感
  damping: 0.03,               // 阻尼系数：衰减振荡动能
  render: {
    visible: true,
    lineWidth: 3,
    strokeStyle: '#77B9AE',
    type: 'spring'             // 渲染器以弹簧波浪形呈现（视渲染器支持）
  }
});

Matter.Composite.add(engine.world, [ball, spring]);

四、实现“铰链效果”的原理与代码实现

铰链（Hinge），在物理学中常称为转动副（Revolute Joint）。它的本质是：完全限制两个对象之间的相对位移（沿 X、Y 轴的线速度锁定），但完全保留绕该点的相对旋转自由度（角速度不受直接限制）。

1. 单刚体世界旋转铰链（如钟摆、旋转摇臂）

刚体挂在一个固定的世界坐标上，围绕该坐标做单点无摩擦摆动：

// 创建一根矩形翻板/摆杆
const pendulumArm = Matter.Bodies.rectangle(400, 250, 20, 160, {
  collisionFilter: { group: -1 } // 防止与临近结构自碰撞
});

// 将摆杆顶端（距离中心向上 70px）固定在世界坐标 (400, 170)
const hinge = Matter.Constraint.create({
  pointA: { x: 400, y: 170 },           // 世界转动支点
  bodyB: pendulumArm,
  pointB: { x: 0, y: -70 },              // 刚体局部锚点：摆杆顶端
  length: 0,                            // 核心：零间距锁定
  stiffness: 1.0,                       // 核心：最大刚度，不可位移伸缩
  render: {
    visible: true,
    lineWidth: 2,
    strokeStyle: '#83ADD0'
  }
});

Matter.Composite.add(engine.world, [pendulumArm, hinge]);

2. 双刚体相对铰链（如车体与车轮、折叠关节）

当两个物体都在空间中运动时（例如移动小车的车轮与底盘），pointA 和 pointB 分别指定两个刚体各自相对于质心的偏移量，使得这两个偏移点在空间中被牢牢锁死在同一空间点上：

// 两个活动刚体之间的旋转铰链
const chassis = Matter.Bodies.rectangle(300, 200, 180, 40);
const wheel = Matter.Bodies.circle(360, 230, 24);

const wheelJoint = Matter.Constraint.create({
  bodyA: chassis,
  pointA: { x: 60, y: 30 }, // 底盘右下方安装位
  bodyB: wheel,
  pointB: { x: 0, y: 0 },    // 车轮轴心
  length: 0,
  stiffness: 1.0
});

五、弹簧与铰链的参数特征与行为矩阵对比

为了在实际开发中准确选型，下表和图示总结了弹簧与铰链在数学参数、自由度以及物理响应上的本质区别：

六、完整可运行综合示例代码

下面是一个集成弹簧与铰链效果的完整 HTML 演示页面。在一个画布中，左侧构建了弹性悬挂的弹簧重锤系统，右侧构建了围绕固定轴自由回旋的重力铰链摆锤，并加入了鼠标拖拽交互：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Matter.js 弹簧与铰链联动演示</title>
  <!-- 引入 Matter.js CDN -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>
  <style>
    body { margin: 0; background: #0c141f; display: flex; justify-content: center; align-items: center; height: 100vh; }
    canvas { border: 1px solid #243c58; border-radius: 6px; box-shadow: 0 4px 20px rgba(0,0,0,0.5); }
  </style>
</head>
<body>
  <script>
    const { Engine, Render, Runner, Bodies, Composite, Constraint, Mouse, MouseConstraint } = Matter;

    // 1. 初始化引擎与渲染器
    const engine = Engine.create();
    const render = Render.create({
      element: body,
      engine: engine,
      options: {
        width: 800,
        height: 500,
        wireframes: false,
        background: '#142537'
      }
    });

    Render.run(render);
    Runner.run(Runner.create(), engine);

    // ==========================================
    // 2. 实现【弹簧效果】（左侧：弹性减震球）
    // ==========================================
    const springBob = Bodies.circle(240, 280, 26, {
      density: 0.005,
      render: { fillStyle: '#77B9AE' }
    });

    const springConstraint = Constraint.create({
      pointA: { x: 240, y: 80 },  // 天花板固定挂点
      bodyB: springBob,
      pointB: { x: 0, y: 0 },
      length: 150,                // 静止自然长度
      stiffness: 0.03,            // 低刚度 = 明显弹性
      damping: 0.04,              // 阻尼耗散
      render: {
        strokeStyle: '#77B9AE',
        lineWidth: 3
      }
    });

    // ==========================================
    // 3. 实现【铰链效果】（右侧：单轴旋转连杆）
    // ==========================================
    const pivotPoint = { x: 560, y: 150 };
    const armLength = 160;
    
    // 摆杆矩形，初始垂直挂下
    const pendulumBar = Bodies.rectangle(pivotPoint.x, pivotPoint.y + armLength / 2, 16, armLength, {
      density: 0.002,
      render: { fillStyle: '#83ADD0' }
    });

    // 铰链约束：stiffness=1, length=0
    const hingeConstraint = Constraint.create({
      pointA: pivotPoint,
      bodyB: pendulumBar,
      pointB: { x: 0, y: -armLength / 2 }, // 锚定在连杆顶端边缘
      length: 0,                           // 零长度锁定位移
      stiffness: 1.0,                      // 刚性旋转铰链
      render: {
        strokeStyle: '#ffffff',
        lineWidth: 2
      }
    });

    // 添加地面，防止掉落出界
    const ground = Bodies.rectangle(400, 490, 800, 20, { isStatic: true, render: { fillStyle: '#1c324a' } });

    // 4. 将物体与约束装载进世界
    Composite.add(engine.world, [springBob, springConstraint, pendulumBar, hingeConstraint, ground]);

    // 5. 绑定鼠标交互，方便读者拖动测试
    const mouse = Mouse.create(render.canvas);
    const mouseConstraint = MouseConstraint.create(engine, {
      mouse: mouse,
      constraint: {
        stiffness: 0.2,
        render: { visible: false }
      }
    });
    Composite.add(engine.world, mouseConstraint);
    render.mouse = mouse;
  </script>
</body>
</html>

七、物理稳定性与常见问题调优

在利用 Constraint 开发复杂机构时，读者最容易遇到的两个棘手现象是“刚度拉满时剧烈抖动爆炸”和“铰链受强外力时拉伸脱节”。这是离散迭代解算器的典型数值不稳定现象。

engine.constraintIterations = 6; // 大幅增强刚性铰链的抗拉伸强度
engine.positionIterations = 8;   // 消除重叠穿透误差

八、总结与要点速查

在 Matter.js 中，Matter.Constraint 是一个高度通用且极度精炼的数学模型。无需切换不同的类，只需通过合理控制三个核心旋钮，就能在多种截然不同的物理机械机构之间灵活切换：

• 做弹簧：调小 stiffness（如 0.02 ~ 0.08），设置目标距离 length，辅以少许 damping 吸收晃动。
• 做铰链：锁死 length: 0 与 stiffness: 1.0，把 pointA 和 pointB 精确重合在转动轴心处。
• 做刚性拉杆/链环：保持 stiffness: 1.0，设置固定 length > 0。
• 做布娃娃与机构防抖：务必配合 collisionFilter 规避内部穿透，并在机构复杂时适当调高 engine.constraintIterations。

通过组合这些基础约束，开发者可以在网页端快速构筑出从软体弹性到硬质机械传动的丰富交互体验。