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中的动画的最佳选择

回答

相关问题