0

three.jsを使い始めたばかりです。three.jsのメインWebサイトで見つけたコードを使用してテストを組み立てました。

私が作成した方程式に従って、ループ内で位置が変更される粒子を表す一連のジオメトリ（球）があります。私はこの種のコードを通して各反復をレンダリングしようとしました：

function simulate() {
    for (var j = 0 ; j < Nb ; j++ ) {           
        // update the geometries positions
        ...
        render();
    }
}

animateしかし、レンダリングは行われず、代わりに、関数に入るときに、すべての反復を経た後に実行され、後に呼び出されましたsimulate

function animate() {
    render();
    requestAnimationFrame( animate );
}

実際、Chromeブラウザのjavascriptコンソールで段階的に実行すると、レンダリングが発生します。

requestAnimationFrameそこで、ループ内で使用できるようにコードを変更しようとしました。

function simulate() {
    for (var j = 0 ; j < Nb ; j++ ) {           
        this.internalRenderingLoop = function() {
            // update the objects shapes and locations
            ...
            render();
            requestAnimationFrame( this.internalRenderingLoop );
        }
    }
}

しかし、それも機能しませんでした。私はまたrequestAnimationFrame、Uncaught Error: TYPE_MISMATCH_ERR: DOM Exception 17

したがって、問題は次のとおりです。関数の各反復でレンダリングを強制する方法はありますか、それともsimulate、ジオメトリの位置を更新するための各呼び出しがanimateorrender関数で行われるようにコードをリファクタリングする必要がありますか？

4

1 に答える 1

2

あなたの最後の機能はもうすぐそこにあります。for ループでは、実行する変更を取得せずに、内部レンダリング ループ関数を上書きしているだけです。また、形状更新コードで j 変数を使用している場合は、少し異なる方法でインクリメントする必要があります。このようなものはどうですか（テストされていませんが、アイデアはわかります）：

var j = 0; // need to be outside function to have proper scope
function simulate() {
  j++;
  if (j == Nb) { return; } // stop

  // update the objects shapes and locations

  render();
  requestAnimationFrame(simulate);      
}

animate() 関数はまったく必要ありません。これは、simulate() で既にアニメーション化を行っているためです。

シミュレーション速度はフレームレートにも依存するため、シミュレーション速度をより詳細に制御するには、関数の最後の行を次のように置き換えることができます。

window.setTimeout( function() { requestAnimationFrame(simulate); }, 1000 / 25);

これにより、約 25 FPS で実行されるはずです。

于 2012-12-11T07:53:43.880 に答える