Best options for animation in THREE.JS

Question

What is the best options for animations (texture animations, moving objects, hiding/showing object,...) in three.js ? Do you use extra lib. such as tween.js or something else ? Thanks.

Solution 1

Tween.js is the popular way to go... check the article at: http://learningthreejs.com/blog/2011/08/17/tweenjs-for-smooth-animation/

Solution 2

Many agree that you need RequestAnimationFrame to manage browser performance. Three.js even includes a cross-browser shim for it.

I would also recommend Frame.js for managing timeline-based renders. RequestAnimationFrame does a great job, but only maintains a minimum frame-rate based on the performance of the browser. Better flow control libraries like Frame offer the ability to have a maximum frame-rate, and better manage multiple intensive operations.

Also, Javascript FSM has become an essential part of my three.js applications. Whether you are building a UI or a Game, the objects have to have states, and careful management of transitioning animations and rules are essential for any complex application logic.

And yes, you need an easing library. I often use the jQuery.easing plugin. It is a plugin for jQuery.animate, but the easing functions can also be accessed like this:

var x = {}; // an empty object (used when called by jQuery, but not us)
var t = currentTime;
var b = beginningValue;
var c = potentialChangeInValue;
var d = durationOfAnimation;
valueAtTime = jQuery.easing.easeOutExpo(x, t, b, c, d);

This jQuery plugin, and most easing plugins are based on Robert Penner's ActionScript2 easing library, which is worth checking out if the t,b,c,d thing above looks strange.

Solution 3

small roundup in 2017: check out this simple timeline-lib which can easily trigger the above mentioned FSM (statebased anim) & tween.js (smooth anim):

keyframes

Solution 4

Copy paste this:

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          window.oRequestAnimationFrame      ||
          window.msRequestAnimationFrame     ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

(function animloop(){
  requestAnimFrame(animloop);
  render();
})();

function render()
{
// DO YOUR STUFF HERE (UPDATES AND DRAWING TYPICALLY)
}

The original author is: http://paulirish.com/2011/requestanimationframe-for-smart-animating/

View more solutions