如何使用MatterJS实现被推动时圆形的滚动效果？

问题核心原因 #

你直接用Matter.Body.setPosition强制移动静态矩形的方式，会绕过Matter.js的物理碰撞逻辑——静态物体的位置变更不会产生正常的碰撞冲量，无法给圆形传递角动量，所以圆形只会被平移推动，不会滚动。另外静态物体的friction参数本身不会生效，因为静态物体不参与速度计算。

修复方案 #

1. 取消推动矩形的isStatic设置，改用动态物体，通过物理方式（设置速度或施加力）让它移动，这样碰撞时能正确传递角动量给圆形。
2. 调整摩擦参数：无需给圆形设置超大的friction（Matter.js中摩擦值通常在0-1区间，100完全不合理），给圆形和地面设置合理的静摩擦/动摩擦即可。

修改后的完整代码 #

JavaScript部分

var container = document.getElementById('container');
var w = 1000;
var h = 500;

const Engine = Matter.Engine;
const Render = Matter.Render;
const World = Matter.World;
const Bodies = Matter.Bodies;
const Body = Matter.Body;

const engine = Engine.create();

const render = Render.create({
  element: container,
  engine: engine,
  options: {
    width: w,
    height: h,
    wireframes: true,
    showAngleIndicator: true,
    background: 'transparent',
  }
});

const ball = Bodies.circle(100, 400, 80, {
  friction: 0.3, // 合理的动摩擦值
  frictionStatic: 0.5 // 静摩擦，确保初始推动时能带动滚动
});
// 取消isStatic，改为动态物体，设置friction:0避免自身摩擦阻碍移动
const box = Bodies.rectangle(10, 390, 20, 20, {
  friction: 0,
  restitution: 0 // 关闭弹性，避免碰撞反弹
});
const floor = Bodies.rectangle(500, 480, 1000, 20, {
  isStatic: true,
  friction: 0.3 // 地面摩擦，配合球的摩擦实现滚动
});

World.add(engine.world, [ball, box, floor]);

engine.gravity.y = 3;

Matter.Runner.run(engine);
Render.run(render);

// 改用设置速度的方式让box移动，而非强制改位置
Body.setVelocity(box, {x: 1, y: 0});

HTML部分

<div id="container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js" integrity="sha512-0z8URjGET6GWnS1xcgiLBZBzoaS8BNlKayfZyQNKz4IRp+s7CKXx0yz7Eco2+TcwoeMBa5KMwmTX7Kus7Fa5Uw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

关键改动说明 #

• 移除了box的isStatic属性，让它成为动态物体，物理引擎会正常处理它的碰撞交互。
• 用Body.setVelocity替代setPosition，通过物理速度驱动移动，碰撞时会给圆形传递角动量，触发滚动。
• 调整各物体的摩擦参数到合理区间，确保地面和圆形之间的摩擦足够让圆形滚动而非滑动。

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