Las mejores opciones para la animación en TRES.JS

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.

preguntado el 31 de julio de 12 a las 13:07

5 Respuestas

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

Respondido 31 Jul 12, 18:07

Thanks. And for texture animation is best options this ? github.com/stemkoski/stemkoski.github.com/blob/master/Three.js/… - suelo

Well, I'm biased because I wrote that myself. There might be a better way using Sprites and uvOffsets, but the code you are referring to works fine for me -- for the live demo look at: stemkoski.github.com/Three.js/Texture-Animation.html - Stemkoski

And when I will use ParticleSystem with texture.offset ? It is simplest than Sprite ? Or THREE.Sprite and THREE.Particle System is the same for performance? I mean that Sprite have many useless options for me. - suelo

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

Yo tambien recomendaria Marco.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.

También, trabaja para 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.

Respondido 01 ago 12, 03:08

Since version r48 (I think) three.js includes RequestAnimationFrame in core. Thankss I see plugins for that. - suelo

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

respondido 30 mar '17, 08:03

Thanks! Exactly what I was looking for. Any other alternatives or is it the best one? - Adrián Moisa

Copia y pega esto:

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/

Respondido 26 Feb 13, 10:02

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

respondido 15 mar '17, 11:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.