如何使用 matter.js 连续旋转身体？
[英]How to continuously rotate a body with matter.js?
问题描述
I'm new to physics engines but to begin a project I'm envisioning, I need to make a hexagon continuously rotate in a fixed position in the center of the page.
我是物理引擎的新手，但要开始我设想的项目，我需要使六边形在页面中心的固定位置连续旋转。
I imagine i'm fundamentally misunderstanding how physics engines work but when I call Matter.Body.rotate(hexagon, 1);我想我从根本上误解了物理引擎的工作原理，但是当我调用 Matter.Body.rotate(hexagon, 1); it simply rotates the hexagon by immediately when rendered by the argument (1) provided and doesn't rotate further than that.它只是在由提供的参数 (1) 呈现时立即旋转六边形，并且不会旋转得更远。 How can I make it continuously rotate?我怎样才能让它连续旋转？
Here is my code:这是我的代码：
note that setStatic is set so the hexagon does not fall out of the frame.请注意， 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>
1 个解决方案
解决方案1
2 2019-05-05 03:08:09
You should use a loop increase angle of the hexagon and set the rotation using Matter.Body.setAngle .您应该使用六边形的循环增加角度并使用Matter.Body.setAngle设置旋转。 Doing that would look like this:这样做看起来像这样：
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);
The full code is here:
完整代码在这里：
// 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.