javascript - THREE.JS 中动画的最佳选择

Question

three.js 中动画（纹理动画、移动对象、隐藏/显示对象……）的最佳选择是什么？你是否使用额外的库。比如 tween.js 或者别的什么？谢谢。

Answer 1

Tween.js 是流行的方式...查看文章： http: //learningthreejs.com/blog/2011/08/17/tweenjs-for-smooth-animation/

Answer 2

许多人同意您需要RequestAnimationFrame来管理浏览器性能。Three.js 甚至包括一个跨浏览器填充程序。

我还推荐Frame.js来管理基于时间轴的渲染。RequestAnimationFrame 做得很好，但只根据浏览器的性能维持最低帧率。更好的流控制库（如 Frame）提供了具有最大帧速率的能力，并更好地管理多个密集操作。

此外，Javascript FSM已成为我的 three.js 应用程序的重要组成部分。无论您是构建 UI 还是游戏，对象都必须具有状态，并且仔细管理过渡动画和规则对于任何复杂的应用程序逻辑都是必不可少的。

是的，你需要一个缓动库。我经常使用jQuery.easing 插件。它是 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 的 ActionScript2 缓动库，如果上面的 t,b,c,d 看起来很奇怪，值得一试。

Answer 3

2017 年小总结：查看这个简单的时间线库，它可以轻松触发上述 FSM（基于状态的动画）和 tween.js（平滑动画）：

关键帧

Answer 4

复制粘贴这个：

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/

Answer 5

我这样做是为了模拟具有人类特征（生涩）的轨道，但它可以用于其他动画，如对象平移、位置和旋转。

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