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

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

Answer 2

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

Answer 3

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/

Answer 4

I made this to emulate orbiting with human characteristics (jerky) but it can be used for other animations like object translations, positions and rotations.

function twController(node,prop,arr,dur){
    var obj,first,second,xyz,i,v,tween,html,prev,starter;
    switch(node){
            case "camera": obj = camera; break;
            default: obj = scene.getObjectByName(node);
    }
    xyz = "x,y,z".split(",");
    $.each(arr,function(i,v){
        first = obj[prop];
        second = {};
        $.each(v,function(i,v){
            second[xyz[i]] = v;
        })
        tween = new TWEEN.Tween(first)
        .to(second, dur)
        .onUpdate(function(){
            $.each(xyz,function(i,v){
                obj[prop][xyz[i]] = first[xyz[i]];
            })
        })
        .onComplete(function(){
            html = [];
            $.each(xyz,function(i,v){
                html.push(Math.round(first[xyz[i]]));
            })
            $("#camPos").html(html.join(","))
        })
        if(i >0){
            tween.delay(250);
            prev.chain(tween);
        }
        else{
            starter = tween;
        }
        prev = tween;
    });
    starter.start();
}

Answer 5

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.