THREE.JS 中动画的最佳选择

Posted 2023-02-27

【中文标题】THREE.JS 中动画的最佳选择

【英文标题】：Best options for animation in THREE.JS

【发布时间】：2012-07-29 05:00:30

【问题描述】：

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

【参考方案1】：

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

keyframes

【讨论】：

谢谢！正是我想要的。还有其他选择还是最好的选择？

【参考方案2】：

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

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

【参考方案3】：

复制粘贴：

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/

【参考方案4】：

许多人同意您需要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 看起来很奇怪，值得一试。

【讨论】：

自版本 r48（我认为）three.js 在核心中包含 RequestAnimationFrame。谢谢，我看到了插件。

【参考方案5】：

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

【讨论】：

谢谢。对于纹理动画，这是最好的选择吗？ github.com/stemkoski/stemkoski.github.com/blob/master/Three.js/…

好吧，我有偏见，因为我自己写的。使用 Sprites 和 uvOffsets 可能有更好的方法，但是您所指的代码对我来说效果很好 - 现场演示请查看：stemkoski.github.com/Three.js/Texture-Animation.html

我什么时候将 ParticleSystem 与 texture.offset 一起使用？它比 Sprite 更简单？或者说 THREE.Sprite 和 THREE.Particle System 的性能是一样的？我的意思是 Sprite 对我来说有很多无用的选择。