7

three.jsのアニメーション（テクスチャアニメーション、オブジェクトの移動、オブジェクトの非表示/表示など）に最適なオプションは何ですか？追加のライブラリを使用しますか？tween.jsや他の何かなど？ありがとう。

4

5 に答える 5

8

Tween.jsは人気のある方法です...次の記事を確認してください：http： //learningthreejs.com/blog/2011/08/17/tweenjs-for-smooth-animation/

于 2012-07-31T17:20:43.690 に答える
5

多くの人が、ブラウザのパフォーマンスを管理するためにRequestAnimationFrameが必要であることに同意しています。Three.jsには、クロスブラウザーシムも含まれています。

タイムラインベースのレンダリングを管理するには、 Frame.jsもお勧めします。RequestAnimationFrameは優れた機能を果たしますが、ブラウザーのパフォーマンスに基づいて最小のフレームレートのみを維持します。フレームのような優れたフロー制御ライブラリは、最大のフレームレートを実現し、複数の集中的な操作をより適切に管理する機能を提供します。

また、JavascriptFSMは私の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が奇妙に見えるかどうかを確認する価値があります。

于 2012-08-01T02:22:19.300 に答える
3

2017年の小さなまとめ：上記のFSM（ステートベースのアニメーション）とtween.js（スムーズなアニメーション）を簡単にトリガーできるこの単純なタイムライン-libをチェックしてください：

キーフレーム

于 2017-03-30T07:26:31.280 に答える
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-26T10:52:36.377 に答える
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-15T10:57:14.017 に答える