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 els

Answer 1

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.