在three.js所动画最好的选择(Best options for animation in TH

2019-06-26 15:32发布

什么是动画(动画的质感,运动的物体,隐藏/显示对象,...)在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做了伟大的工作,但只维持基于浏览器的性能最小帧速率。 像帧较好的流量控制库提供具有最大帧速率,并更好地管理多个密集运算的能力。

此外, 使用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插件,最宽松的插件是基于罗伯特·彭纳的ACTIONSCRIPT2宽松库 ,这是值得一试,如果T,B,C,d的事情上面看起来很奇怪。



Answer 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/



Answer 4:

在2017小综述:检查出这种简单的时间表-lib的能够容易地触发上述FSM(基于状态阿尼姆)tween.js(平滑阿尼姆):

关键帧



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


文章来源: Best options for animation in THREE.JS