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

## Recommended Posts

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.

##### Share on other sites

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

##### Share on other sites

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.

##### Share on other sites

Thank you both, I'll test it.