THREE.JS中的動畫的最佳選擇

8

Tween.js是流行的路要走......在檢查的文章： http://learningthreejs.com/blog/2011/08/17/tweenjs-for-smooth-animation/

2012-07-31 17:20:43

+0

感謝。而對於紋理動畫是最好的選擇呢？ https://github.com/stemkoski/stemkoski.github.com/blob/master/Three.js/Texture-Animation.html – soil 2012-08-01 05:51:36

+0

嗯，我有點偏見，因爲我自己寫了。使用Sprites和uvOffset可能會有更好的方式，但是您提到的代碼對我來說工作正常 - 現場演示請看：http://stemkoski.github.com/Three.js/Texture-Animation.html – 2012-08-01 16:56:33

+0

並且當我將使用帶有texture.offset的ParticleSystem？它比Sprite最簡單嗎？或者THREE.Sprite和THREE.Particle系統的性能是否相同？我的意思是雪碧對我來說有許多無用的選擇。 – soil 2012-08-02 06:23:22

5

許多人認爲你需要RequestAnimationFrame管理瀏覽器的性能。 Three.js甚至包括一個cross-browser shim for it。

我也建議Frame.js管理基於時間線的渲染。 RequestAnimationFrame做得很好，但只保留基於瀏覽器性能的最低幀率。像Frame這樣的更好的流量控制庫可以提供最大的幀速率，並且更好地管理多個密集型操作。

此外，Javascript FSM已成爲我的three.js應用程序的重要組成部分。無論您是在構建UI還是遊戲，對象都必須具有狀態，並且對任何複雜的應用程序邏輯都必須認真管理轉換動畫和規則。

是的，你需要一個緩存庫。我經常使用jQuery.easing plugin。這是jQuery.animate一個插件，但寬鬆的功能也可以像這樣訪問：

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

這個jQuery插件，最寬鬆的插件是基於Robert Penner's ActionScript2 easing library，這是值得一試，如果T，B ，c，d上面的東西看起來很奇怪。

來源

2012-08-01 02:22:19 BishopZ

+0

從版本r48（我認爲）three.js包括核心的RequestAnimationFrame。謝謝，我看到了插件。 – soil 2012-08-01 05:48:50

2

複製粘貼此：

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

原作者是：http://paulirish.com/2011/requestanimationframe-for-smart-animating/

來源

2013-02-26 10:52:36

0

我做了這個模仿人類的特性（幹），軌道，但它可以用於其他動畫一樣物體平移，位置和旋轉。

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

來源

2017-03-15 10:57:14

2

小綜述在2017年：檢查出這種簡單的時間表-lib的能夠容易地觸發上述FSM（基於狀態阿尼姆）& tween.js（平滑動畫）：

keyframes

來源

2017-03-30 07:26:31 coderofsalvation

+0

謝謝！正是我在找什麼。還有其他的選擇，還是最好的？ – 2017-12-11 19:48:33

THREE.JS中的動畫的最佳選擇

回答

相關問題