tinytree tinytree - 1 year ago 102
Javascript Question

Three.js animate in real time

I'm using three.js and animated some Objects. I animated the object by using the animate() function of three.js. Basically something like that:

function animate(){
object.position.z++;
}


Unfortunatlly this is called every rendered frame. So on each device with different framerates the speed of my object is different. Is there a way to make this depending on seconds or miliseconds?

thanks

Answer Source

requestAnimationFrame passes the time since the page was loaded to the callback. I usually prefer to do my math in seconds but the time passed in is in milliseconds so

let then = 0;
function animate(now) {
  now *= 0.001;  // make it seconds

  const delta = now - then;
  then = now;

  object.position.z += delta * speedInUnitsPerSecond;

  ...

  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

ps: I'm surprised this isn't already on stackoverflow. It probably is somewhere. Certainly requestAnimationFrame has been covered, maybe just not in the context of three.js.

There is this: Best options for animation in THREE.JS

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download