gpt4 book ai didi

javascript - 如何用 matter.js 连续旋转 body ?

转载 作者:行者123 更新时间:2023-12-03 07:11:27 25 4
gpt4 key购买 nike

我是物理引擎的新手,但要开始我设想的项目,我需要让六边形在页面中心的固定位置连续旋转。

我想我从根本上误解了物理引擎的工作原理,但是当我调用 Matter.Body.rotate(hexagon, 1);它只是在由提供的参数 (1) 渲染时立即旋转六边形,并且不会旋转得更远。我怎样才能让它连续旋转?

这是我的代码:

请注意,已设置 setStatic,因此六边形不会掉出框架。

// module aliases
var Engine = Matter.Engine,
Render = Matter.Render,
World = Matter.World,
Bodies = Matter.Bodies;
Composites = Matter.Composites;

// create an engine
var engine = Engine.create();

// create a renderer
var render = Render.create({
element: document.body,
engine: engine
});


var hexagon = Bodies.polygon(375, 300, 6, 200, {inertia: Infinity}); // setting inertia to inifinty will prevent rotation upon collision
Matter.Body.setStatic(hexagon, true);
Matter.Body.rotate(hexagon, 1);
console.log(hexagon);
// Matter.Body.rotate(hexagon, 1)

// add all of the bodies to the world
World.add(engine.world, [hexagon]);

// run the engine
Engine.run(engine);


// run the renderer
Render.run(render);
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.js"></script>
<!-- <script src="matter.js" type="text/javascript"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.12.0/matter.js"></script>
<!-- <script async src="hexagondwana.js"></script> -->
<script async src="hex_no_p5.js"></script>
</head>
<body>
</body>
</html>

最佳答案

您应该使用六边形的循环增加 Angular 并使用 Matter.Body.setAngle 设置旋转.这样做看起来像这样:

var hexagon = Bodies.polygon(375, 300, 6, 200, {
isStatic: true,
inertia: Infinity,// setting inertia to infinty will prevent rotation upon collision
rotationSpeed: 1 // Optional - you could substitute hexagon.rotationSpeed in updateRotation() with this number
});
World.add(world, [hexagon]);

function updateRotation() {
Matter.Body.setAngle(hexagon, hexagon.angle + hexagon.rotationSpeed);
requestAnimationFrame(updateRotation);
}
window.requestAnimationFrame(updateRotation);

完整代码在这里:

// module aliases
var Engine = Matter.Engine,
Render = Matter.Render,
World = Matter.World,
Body = Matter.Body,
Bodies = Matter.Bodies;
Composites = Matter.Composites;

// create an engine
var engine = Engine.create();

// create a renderer
var render = Render.create({
element: document.body,
engine: engine
});



var hexagon = Bodies.polygon(375, 300, 6, 200, {
isStatic: true,
inertia: Infinity,// setting inertia to infinty will prevent rotation upon collision
rotationSpeed: 1 // Optional
});
// add all of the bodies to the world
World.add(engine.world, [hexagon]);

// run the engine
Engine.run(engine);

function updateRotation() {
Body.setAngle(hexagon, hexagon.angle + hexagon.rotationSpeed);
requestAnimationFrame(updateRotation);
}
window.requestAnimationFrame(updateRotation);



// run the renderer
Render.run(render);
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.js"></script>
<!-- <script src="matter.js" type="text/javascript"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.12.0/matter.js"></script>
<!-- <script async src="hexagondwana.js"></script> -->
<script async src="hex_no_p5.js"></script>
</head>
<body>
</body>
</html>

关于javascript - 如何用 matter.js 连续旋转 body ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45537377/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com