如何使用 Matter.js 连续旋转物体？

Question

如何使用 Matter.js 连续旋转物体？

ric*_*ich 6 javascript rotation physics-engine matter.js

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

我想我从根本上误解了物理引擎的工作原理，但是当我调用 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);

Run Code Online (Sandbox Code Playgroud)

<!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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Gre*_* R. 3

您应该使用循环增加六边形的角度并使用设置旋转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);

Run Code Online (Sandbox Code Playgroud)
完整代码在这里：

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);

Run Code Online (Sandbox Code Playgroud)

// 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);

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，3 月前
查看次数：	3924 次
最近记录：	4 年，11 月前