Meilleures options pour l'animation dans THREE.JS

Question

Quelles sont les meilleures options pour les animations (animations de texture, objets en mouvement, cacher/montrer un objet, ...) dans three.js? Utilisez-vous plus de lib. comme tween.js ou autre chose? Merci.

Answer 1

Tween.js est le moyen populaire pour aller ... vérifier l'article à: http://learningthreejs.com/blog/2011/08/17/tweenjs-for-smooth-animation/

Answer 2

Beaucoup sont d'accord que vous avez besoin RequestAnimationFrame de gérer les performances du navigateur. Three.js inclut même un cross-browser shim for it.

Je recommanderais également Frame.js pour la gestion des rendus basés sur la chronologie. RequestAnimationFrame fait un excellent travail, mais ne maintient qu'un taux d'images minimum basé sur les performances du navigateur. De meilleures bibliothèques de contrôle de flux comme Frame offrent la possibilité d'avoir un débit d'images maximal et de mieux gérer plusieurs opérations intensives. En outre, Javascript FSM est devenu une partie essentielle de mes applications three.js. Que vous construisiez une interface utilisateur ou un jeu, les objets doivent avoir des états, et une gestion attentive des animations et des règles de transition est essentielle pour toute logique d'application complexe.

Et oui, vous avez besoin d'une bibliothèque d'accélération. J'utilise souvent le jQuery.easing plugin. Il est un plugin pour jQuery.animate, mais les fonctions d'assouplissement peut également être consulté comme ceci:

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

Ce plugin jQuery, et la plupart des plugins d'assouplissement sont basés sur Robert Penner's ActionScript2 easing library, qui est la peine de vérifier si le t, b , c, d chose semble étrange.

Answer 3

Copier coller ceci:

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

L'auteur original est: http://paulirish.com/2011/requestanimationframe-for-smart-animating/

Answer 4

Je l'ai fait à imiter en orbite avec des caractéristiques humaines (saccadé), mais il peut être utilisé pour d'autres animations comme les traductions d'objets, positions et les 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

petit tour d'horizon en 2017: consultez cette simple ligne de temps-lib qui peut facilement déclencher l'EFM (statebased anim) mentionnée ci-dessus & Les tween.js (anim lisse):

keyframes