Las mejores opciones para animación en THREE.JS

Question

¿Cuáles son las mejores opciones para animaciones (animaciones de texturas, objetos en movimiento, ocultar/mostrar objetos, ...) en three.js? ¿Usas lib extra? como tween.js o algo más? Gracias.

Answer 1

Tween.js es la forma popular para ir ... compruebe el artículo en: http://learningthreejs.com/blog/2011/08/17/tweenjs-for-smooth-animation/

Answer 2

Muchos coinciden en que es necesario RequestAnimationFrame para gestionar el rendimiento del navegador. Three.js incluso incluye un cross-browser shim for it.

También recomendaría Frame.js para gestionar renders basados ​​en línea de tiempo. RequestAnimationFrame hace un gran trabajo, pero solo mantiene un frame-rate mínimo en función del rendimiento del navegador. Mejores bibliotecas de control de flujo como Frame ofrecen la capacidad de tener una velocidad de cuadros máxima y administrar mejor múltiples operaciones intensivas.

Además, Javascript FSM se ha convertido en una parte esencial de mis aplicaciones three.js. Ya sea que esté construyendo una IU o un Juego, los objetos deben tener estados, y la administración cuidadosa de las animaciones y reglas de transición es esencial para cualquier lógica de aplicación compleja.

Y sí, necesita una biblioteca de aceleración. A menudo uso el jQuery.easing plugin. Es un plugin para jQuery.animate, pero las funciones de aceleración también se puede acceder de esta manera:

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

Este plugin jQuery, y la mayoría de los plugins de aceleración se basa en Robert Penner's ActionScript2 easing library, que vale la pena ver si el t, b , c, d lo de arriba parece extraño.

Answer 3

Copia pega este:

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

El autor original es: http://paulirish.com/2011/requestanimationframe-for-smart-animating/

Answer 4

Hice este emular en órbita con características humanas (sacudidas) pero puede usarse para otros animaciones como traducciones objeto, posiciones y rotaciones.

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

pequeña Roundup en 2017: visita este simple línea de tiempo-lib que puede desencadenar fácilmente la mencionada FSM (anim statebased) & tween.js (anim liso):

keyframes