matter-js MouseConstraint未在约束附着点施力的问题求助

问题描述 #

使用matter-js的MouseConstraint与带约束的刚体交互时，MouseConstraint施加的力并非作用在鼠标点击位置，而是直接作用于刚体中心，导致预期的旋转行为无法实现：

• 示例1：刚体通过约束固定在中心下方的枢轴点，下拉盒子右侧时，预期盒子绕枢轴顺时针旋转，但实际仅左右拉动时才会转动
• 示例2：刚体约束固定在中心，拉动时完全不旋转，进一步证实力作用于刚体中心的问题

示例1代码：

var boxA = Bodies.rectangle(400, 200, 400, 200);
var constraintA = Constraint.create({
  pointA: { x: 400, y: 200 },
  bodyB: boxA,
  pointB: Vector.create(0, 20), // 枢轴点略低于中心
  stiffness: 1,
  length: 0
});

示例2代码：

var boxB= Bodies.rectangle(400, 200, 400, 200);
var constraintB = Constraint.create({
  pointA: { x: 400, y: 800 },
  bodyB: boxB,
  pointB: Vector.create(0, 0), // 枢轴点在中心
  stiffness: 1,
  length: 0
});

解决方案 #

matter-js的MouseConstraint默认会将约束的pointB固定为刚体中心，要让力作用在鼠标点击位置，需自定义约束配置并动态更新pointB：

1. 创建MouseConstraint时，自定义约束的刚度属性，确保collideConnected开启
2. 监听鼠标按下事件，计算鼠标在刚体上的局部坐标，赋值给MouseConstraint.constraint.pointB

完整实现代码：

// 创建鼠标约束
var mouseConstraint = MouseConstraint.create(engine, {
  mouse: mouse,
  constraint: {
    stiffness: 0.2, // 调整刚度优化拖拽手感，值越接近1拖拽越"硬"
    collideConnected: true,
    render: {
      visible: false
    }
  }
});

// 监听鼠标按下事件，更新约束作用点
Events.on(mouseConstraint, 'mousedown', function(event) {
  var body = event.body;
  if (!body) return;
  
  // 计算鼠标位置相对于刚体中心的局部坐标（抵消刚体旋转影响）
  var mousePosition = mouse.position;
  var localPoint = Vector.sub(mousePosition, body.position);
  localPoint = Vector.rotate(localPoint, -body.angle);
  
  // 将约束作用点设置为鼠标点击的局部位置
  mouseConstraint.constraint.pointB = localPoint;
});

// 将鼠标约束添加到物理世界
World.add(world, mouseConstraint);

原理说明 #

通过动态设置MouseConstraint.constraint.pointB为鼠标点击的刚体局部坐标，MouseConstraint的作用力会直接作用在点击点而非刚体中心，带约束的刚体就能按照预期绕枢轴点旋转。调整stiffness参数可适配不同的交互手感需求。

内容的提问来源于stack exchange，提问作者luukSchip