Matter.js仿真问题：快速拖拽球体时球体移出画布如何解决？

成因 #

1. 碰撞穿透（Tunneling）：快速拖拽球体时，Matter.js的默认碰撞检测在单帧内可能无法捕捉到球体与墙体的碰撞，导致球体直接穿过墙体移出画布。
2. 墙体位置不合理：当前墙体的中心位置对齐画布边缘，导致墙体的碰撞区域没有完全覆盖画布边界外的区域，球体容易因部分超出边界而彻底移出。

解决方案 #

1. 修正墙体位置 #

调整墙体的中心坐标，让墙体的边缘完全对齐画布边界，确保球体无法穿过：

• 左墙中心设为 -wallThickness/2，右边缘对齐画布左边界
• 右墙中心设为 width + wallThickness/2，左边缘对齐画布右边界
• 天花板中心设为 -wallThickness/2，下边缘对齐画布顶部

2. 启用连续碰撞检测并提高引擎精度 #

• 为球体添加 ccd: true 属性，启用连续碰撞检测，专门解决快速移动物体的穿透问题
• 提高引擎的位置和速度迭代次数，增强碰撞检测的准确性

3. 优化鼠标约束参数 #

适当提高鼠标约束的 stiffness，避免拖拽时球体获得过高速度，减少穿透风险

修改后的完整代码 #

let engine;
let world;
let spheres = [];

function setup() {
  const canvas = createCanvas(windowWidth, windowHeight);

  // 提高引擎迭代次数，增强碰撞精度
  engine = Matter.Engine.create({
    positionIterations: 10,
    velocityIterations: 10
  });
  world = engine.world;
  world.gravity.y = 0.8;

  const radius = 25;
  const distanceBetweenSpheres = 2 * radius + 50;
  const totalWidth = 2 * distanceBetweenSpheres;

  for (let i = 0; i < 3; i++) {
    const x = (width - totalWidth) / 2 + i * distanceBetweenSpheres;
    const y = 50;
    // 为球体启用CCD
    spheres.push(new Sphere(x, y, radius));
  }

  const ground = Matter.Bodies.rectangle(width / 2, height + 25, width, 50, { isStatic: true });
  Matter.World.add(world, ground);

  const wallThickness = 20;
  const wallOptions = { isStatic: true, render: { fillStyle: '#ED1C24' } };
  // 修正墙体位置
  const leftWall = Matter.Bodies.rectangle(-wallThickness/2, height / 2, wallThickness, height, wallOptions);
  const rightWall = Matter.Bodies.rectangle(width + wallThickness/2, height / 2, wallThickness, height, wallOptions);
  const ceiling = Matter.Bodies.rectangle(width / 2, -wallThickness/2, width, wallThickness, wallOptions);
  
  Matter.World.add(world, [leftWall, rightWall, ceiling]);

  // 调整鼠标约束参数，提高stiffness
  const mouse = Matter.Mouse.create(canvas.elt);
  const mouseParams = {
    mouse: mouse,
    constraint: {
      stiffness: 0.2, // 提高刚度，减少拖拽时的速度突变
      render: {
        visible: false,
      },
    },
  };

  const mouseConstraint = Matter.MouseConstraint.create(engine, mouseParams);
  Matter.World.add(world, mouseConstraint);

  canvas.elt.addEventListener('mousedown', (e) => e.preventDefault());
}

function draw() {
  background(240);
  Matter.Engine.update(engine);

  for (let sphere of spheres) {
    sphere.show();
  }
}

class Sphere {
  constructor(x, y, r) {
    // 启用CCD防止穿透
    this.body = Matter.Bodies.circle(x, y, r, { restitution: 0.5, ccd: true });
    this.r = r;
    Matter.World.add(world, this.body);
  }

  show() {
    const pos = this.body.position;
    push();
    translate(pos.x, pos.y);
    ellipse(0, 0, this.r * 2);
    pop();
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script>

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