Three.jsで異常に高いフレームレート

Question

昨日（ライブ編集用サイトthree.jsの例）、コードを更新するか、複数のサンプルファイルに移動すると、フレームレートが約1000 f/sに急上昇することがわかりました。

この最初の言及はhereです。私はなぜフレームレートが更新後に増加するのか分からない。 （IFRAMEプレビュー」のIDを持つ）WebGLのキャンバスは、iframeの内部にある、と私は、このコードでiframeの内容を更新しています：

var previewFrame = document.getElementById('preview'); 
    var preview = previewFrame.contentDocument || previewFrame.contentWindow.document; 
    preview.open(); 
    preview.write(this.props.code); 
    preview.close(); 

誰もがこれを解決する方法のアイデアを持っていますか？編集はCodeMirrorで行い、サイトはReactで構築されています。すべてのsrcコードはrepo hereにあります。

Answer 1

私はあなたが複数のrequestAnimationFrameループを開始していると思います。例

let numLoops = 0; 
 
const countElem = document.querySelector("#count"); 
 
const stats = new Stats(); 
 
document.body.appendChild(stats.domElement); 
 

 
function loop() { 
 
    stats.update(); 
 
    
 
    requestAnimationFrame(loop); 
 
} 
 

 
function startLoop() { 
 
    ++numLoops; 
 
    countElem.textContent = numLoops; 
 
    requestAnimationFrame(loop); 
 
} 
 

 
startLoop(); 
 

 
document.querySelector("button").addEventListener('click', startLoop);

<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script> 
 
<button>Click to add another requestAnimationFrame loop</button> 
 
<div>Num Loops Running: <span id="count"></span></div>

のために私が編集私の例を作った後、http://webglfundamentals.orgにrunable方法は、BLOBを使用してiframe内の例を実行するために

です。ユーザーが「更新」を選択するたびに、編集したソースで新しいBLOBを生成し、そのBLOBの新しいURLにiframeを設定します。これは、例が完全にリロードされ、古いコード/ループ/イベント/ webglコンテキストなどがブラウザによって破棄されることを意味します。

あなたはactual code for getSourceBlobを見て、あなたはそれが少しより多くの仕事をして表示されますが、それは、上記の基本的なら効果的

function runLastVersionOfUsersCode() { 
    var url = getSourceBlob(usersEditedHtml); 
    someIFrameElement.src = url; 
} 

var blobUrl; 
function getSourceBlob(options, htmlForIFrame) { 
    // if we already did this discard the old one otherwise 
    // it will stick around wasting memory 
    if (blobUrl) { 
    URL.revokeObjectURL(blobUrl); 
    } 

    var blob = new Blob([htmlForIFrame], {type: 'text/html'}); 
    blobUrl = URL.createObjectURL(blob); 
    return blobUrl; 
} 

あるthe code hereを見ることができます。

Answer 2

私は、Reactレンダリングループ（threejsレンダリングループではありません）でcancelAnimationFrameを使用しました。コミットここにある：https://github.com/ekatzenstein/three.js-live/commit/2cad65afa5fe066618a7aac179e096ee9e29ed76

//in the iframe 
window.parent.three_live = requestAnimationFrame(animate) 

//in the parent, on render loop 
_resetAnimationFrame(){ 
    //disables abnormally high frame rates 
    if(window.three_live){ 
     var previewWindow = document.getElementById('preview').contentWindow; 
     previewWindow.cancelAnimationFrame(window.three_live); 
    } 
} 

window.parentを行う必要はありませんでしたが、世界的なプロジェクトで参照したいです。