How to change mesh positions by frame per second (30 fps)?

[hit2501]

Hi everyone,

I'm working on a web app that must change position of a mesh on (almost) every frame in time like a video. I know I can manage coordinates for this but I dont know how to set the fps to 30 and how to apply the new coordinates according to each frame.

Can anybody show me a basic example to achieve this?

Thank you all.

[JohnK]

The fps can vary depending on the number of meshes and other conditions. If you want your mesh to move at a predetermined speed say V units per sec then you need to know how far to move per frame.

When the frame rate is F fps then the time taken T for a given frame at that time is 1/F so the distance moved by the mesh is VT = V/F.

scene.registerBeforeRender or scene.registerAfterRender can be used to make changes for one frame. So for a mesh with speed V in the direction of the X axis

scene.registerBeforeRender (function (){
   var F = engine.getFps ();
   mesh.position.x += V/F;
})

 

[brianzinn]

If you look at examples on the internet that build game loops using requestAnimationFrame() then you would likely want to use engine.getDeltaTime().  The amount of time passed can make a smoother animation than average frames / second.  Depends on your needs there.  The formula is easy though, if you want to move 5x / second and 10ms have passed then it's mesh.position += 5 * 0.01;

To answer your question, I am not aware of a way to request 30 FPS on the engine, only on animations themselves.

[hit2501]

Thank you both, I'll test it.