2d物理引擎matterjs,刚体堆在一起就会有重叠现象,像是施压后“压入”另一个刚体,堆得越多现象越明显。设置哪些属性可以取消这种现象?因为如果每个物体都是很坚硬的,是不会出现这种现象的。
(官方演示地址:https://brm.io/matter-js/demo/#stress2 )
自己写的demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>堆盒子</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.18.0/matter.min.js"></script>
</head>
<body>
<div>
宽<input type="number" id="width" />
高<input type="number" id="height" />
</div>
<script>
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Bodies = Matter.Bodies,
Composite = Matter.Composite,
Composites = Matter.Composites,
Vertices = Matter.Vertices,
Mouse = Matter.Mouse,
MouseConstraint = Matter.MouseConstraint,
Common = Matter.Common,
Events = Matter.Events,
engine = Engine.create();
var render = Render.create({
element: document.body,
engine: engine,
options: {
width: 500,
height: 800,
showAngleIndicator: true,
showIds: true,
showMousePosition: true,
}
});
var mouse = Mouse.create(render.canvas),
mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: {
visible: false
}
}
});
// keep the mouse in sync with rendering
render.mouse = mouse;
var bodyOptions={
// density:0.01,
restitution:0,
}
Composite.add(engine.world, [
Bodies.rectangle(250, 740, 381, 21, {
isStatic: true,
restitution:0,
}), //地面
mouseConstraint
]);
Events.on(mouseConstraint, "mouseup", function(e){
var position=e.mouse.position
var w=document.getElementById("width").value||200
var h=document.getElementById("height").value||20
Composite.add(engine.world, [
Bodies.rectangle(position.x, position.y, w, h, bodyOptions),
mouseConstraint
]);
})
// run the renderer
Render.run(render);
// create runner
var runner = Runner.create();
// run the engine
Runner.run(runner, engine);
</script>
</body>
</html>
点击鼠标后会落下一个方块,方块堆得越高,“压入”、“反弹”现象越明显,甚至还会不停“共振”,像是有弹性的橡皮一样。期望的是方块应该像坚硬的石头一样。翻了几遍文档找不到应该设置哪些属性。