Najlepsze opcje animacji w THREE.JS

Question

Jakie są najlepsze opcje animacji (animacje tekstury, ruchome obiekty, ukrywanie/pokazywanie obiektów, ...) w pliku three.js? Czy korzystasz z dodatkowej biblioteki? takie jak tween.js czy coś innego? Dzięki.

Answer 1

Tween.js jest popularnym sposobem, aby przejść ... sprawdź artykuł na: http://learningthreejs.com/blog/2011/08/17/tweenjs-for-smooth-animation/

Answer 2

Wiele osób zgadza się, że trzeba RequestAnimationFrame zarządzać wydajność przeglądarki. Three.js zawiera nawet cross-browser shim for it.

Polecam również Frame.js do zarządzania renderami opartymi na osi czasu. RequestAnimationFrame wykonuje świetną robotę, ale utrzymuje minimalną liczbę klatek na sekundę w zależności od wydajności przeglądarki. Lepsze biblioteki kontroli przepływu, takie jak Frame, oferują możliwość uzyskania maksymalnej liczby klatek na sekundę i lepszego zarządzania wieloma intensywnymi operacjami.

Ponadto, Javascript FSM stała się istotną częścią moich aplikacji three.js. Niezależnie od tego, czy budujesz interfejs użytkownika czy grę, obiekty muszą mieć stany, a ostrożne zarządzanie animacjami i regułami przejścia jest niezbędne dla złożonej logiki aplikacji.

I tak, potrzebujesz biblioteki ułatwiającej czytanie. Często używam jQuery.easing plugin. Jest to wtyczka do jQuery.animate, ale funkcje złagodzenie można również uzyskać w ten sposób:

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

Ten plugin jQuery, a większość złagodzenie wtyczki są oparte na Robert Penner's ActionScript2 easing library, co warto sprawdzić, czy t, b , c, d rzecz powyżej wygląda dziwnie.

Answer 3

Kopiuj wklej to:

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

Oryginalny autor: http://paulirish.com/2011/requestanimationframe-for-smart-animating/

Answer 4

Zrobiłem to naśladować orbicie z cech ludzkich (jerky), ale może to być wykorzystywane do innych animacji, takich jak tłumaczenia obiektów, stanowisk i obroty.

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

mały Roundup w 2017 roku: sprawdzeniu tej prostej osi czasu-lib, który może łatwo powodować wyżej wymienioną FSM (statebased anim) & tween.js anim (gładki):

keyframes