javascript - Best options for animation in THREE.JS - Stack Overflow

admin管理员组

文章数量:1201373

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.

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.

• javascript
• animation
• three.js

Share Improve this question Follow edited Jun 13, 2013 at 21:42 Stemkoski 9,04533 gold badges4848 silver badges6262 bronze badges asked Jul 31, 2012 at 12:20 soilsoil 18111 gold badge11 silver badge88 bronze badges

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 8

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

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.

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

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/

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();
}

本文标签： javascriptBest options for animation in THREEJSStack Overflow