レンダリングループが爆発する

私はThreejsでカスタムメッシュを読み込み、軌道コントロールでそれを調べるための小さなデモ/ボイラープレートを作った。レンダリングループが爆発する

ここでの問題は、オブジェクトを回転させるとレンダリングループが爆発的になり、その理由がわからないということです。

https://codepen.io/rosefalk/pen/ooBYme?editors=0010

function render() { 
    console.log('render') 
    canvasPosition = document.getElementById("container").children; 
    renderer.render(scene, camera); 
    requestAnimationFrame(render); 
}

あなたはそれが私が前提とするものでmerily離れて一気飲みのコンソールを見ると、あなたが回転を開始するまで〜60回の通話秒で、それは極端な速度で上がります。

出典

2017-11-21 Eirinn

他にどこでも 'render'を呼び出していますか？ 'OrbitControls'の' change'イベントで？ – TheJim01

犯人を見つけて閉じる！ controls.addEventListener（ 'change'、render）; これは基本的に、コントロールが更新されるたびに別のループを追加します。私はそれがインスペクタなので、ユーザがインタラクションしていたときに更新するだけの感覚が残っていると思います。ありがとう、私に答えをさせてください。 – Eirinn

これは、あなたが見る多くの例がアニメーションループに 'requestAnimationFrame（render）;'を使わず、その代わりに 'render'を呼び出す' animate'関数にループを入れている理由です。 2つの概念を分離することで、アニメーションループが停止している場合でも、必要なときにレンダリングできます。 – TheJim01

ソリューション - この部分の除去：

controls.addEventListener('change', render);

コントロールが更新されると、それは余分な呼び出しの膨大な量を追加して、通話自体とそれが全体を爆発をレンダリングし、レンダリングを呼び出します。これは、ユーザーインタラクションでシーンを更新するだけの意味があるときから残っています。

出典

2017-11-22 13:04:29 Eirinn

レンダリングループが爆発する

答えて

関連する問題