Beste Optionen für Animation in THREE.JS

Question

Was sind die besten Optionen für Animationen (Texturanimationen, bewegliche Objekte, Verstecken/Anzeigen von Objekten, ...) in three.js? Verwenden Sie extra lib. wie Tween.js oder etwas anderes? Vielen Dank.

Answer 1

Tween.js ist die beliebte Art und Weise zu gehen ... überprüfen Sie den Artikel auf: http://learningthreejs.com/blog/2011/08/17/tweenjs-for-smooth-animation/

Answer 2

Viele stimmen zu, dass Sie RequestAnimationFrame benötigen Browserleistung zu verwalten. Three.js enthält sogar eine cross-browser shim for it.

Ich würde auch empfehlen Frame.js für die Verwaltung von Timeline-basierten Rendern. RequestAnimationFrame macht gute Arbeit, aber nur eine minimale Framerate basierend auf der Leistung des Browsers. Bessere Flusskontrollbibliotheken wie Frame bieten die Möglichkeit, eine maximale Bildrate zu erzielen und mehrere intensive Operationen besser zu verwalten.

Außerdem ist Javascript FSM ein wesentlicher Bestandteil meiner three.js Anwendungen geworden. Unabhängig davon, ob Sie eine Benutzeroberfläche oder ein Spiel erstellen, müssen die Objekte über Status verfügen, und eine sorgfältige Verwaltung von übergehenden Animationen und Regeln ist für jede komplexe Anwendungslogik unerlässlich.

Und ja, Sie brauchen eine Erleichterung Bibliothek. Ich benutze oft die jQuery.easing plugin. Es ist ein Plugin für jQuery.animate, aber die Lockerung Funktionen können auch wie folgt zugegriffen werden:

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

Das jQuery-Plugin, und die meisten Lockerung Plugins sind auf Robert Penner's ActionScript2 easing library basieren, die, wenn die t Check-out wert ist b , c, d Ding oben sieht seltsam aus.

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

Der ursprüngliche Autor ist: http://paulirish.com/2011/requestanimationframe-for-smart-animating/

Answer 4

Ich habe dies mit menschlichen Eigenschaften (ruckartig) umkreisen zu emulieren, aber es kann auch für andere Animationen wie Objekt Übersetzungen verwendet werden, Positionen und Rotationen.

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

kleine Razzia im Jahr 2017: Aktivieren Sie diesen einfachen Timeline-lib aus, die den oben genannten FSM leicht auslösen können (statebased anim) & tween.js (glatt anim):

keyframes