Three.js animate in real time

Question

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

user_14754905 · Answer

You can use TWEEN(a js lib for Three). This is a tutorial for TWEEN: http://learningthreejs.com/blog/2011/08/17/tweenjs-for-smooth-animation/

You can use it very simply:

  new TWEEN.Tween(object.position).to(targetPos, 200).start().onComplete(()=>{
      //Do something when action complete
  });

Three.js animate in real time

3 Answers