Sign in to follow this  

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 this post

Link to post
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 this post

Link to post
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 this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.