gpt4 book ai didi

javascript - Three.js 中的帧速率异常高

转载 作者:行者123 更新时间:2023-12-03 05:21:01 25 4
gpt4 key购买 nike

我启动了this site昨天(一个实时编辑网站 three.js 示例),发现在更新代码或导航到多个示例文件时,帧速率飙升至 1000 f/s 左右。

第一次提到这个是here 。我不确定为什么更新后帧速率会增加。 WebGL Canvas 位于 iframe 内,我使用以下代码更新 iframe 内容(iframe 的 id 为“preview”):

    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中.

最佳答案

我的猜测是您正在启动多个 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 上运行的方式是使用 blob 在 iframe 中运行示例。每当用户选择“更新”时,我都会使用其编辑的源生成一个新的 blob,然后将 iframe 设置为该新 blob 的 URL。这意味着示例将完全重新加载,因此任何旧代码/循环/事件/webgl 上下文等都会被浏览器丢弃。

您可以看到the code here这实际上是

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

如果你看actual code for getSourceBlob您会发现它做了更多的工作,但基本上就是上面的内容。

关于javascript - Three.js 中的帧速率异常高,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41383107/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com