Three.js iframe加载场景重复导入、上下文丢失及渲染异常问题

• 反复对同一个iframe执行document.open()/write()/close()操作，不会彻底销毁iframe上一轮的执行上下文：之前加载的Three.js实例、WebGL渲染上下文、未终止的requestAnimationFrame循环都会残留在内存中。反复写入就会重复导入Three.js触发多实例警告，累积到浏览器WebGL上下文数量上限后，就会抛出Context Lost错误。
• 你之前尝试的销毁逻辑存在两个典型问题，直接导致红色立方体无法渲染：
  • 资源释放不完整：仅调用了renderer.dispose()，没有终止动画循环、没有释放几何体/材质/纹理等Three.js资源，且销毁逻辑的执行时序不可控
  • onbeforeunload事件触发时机不稳定：重写iframe文档时，很可能出现新场景已经初始化完成，旧实例的销毁逻辑才执行的情况，误清空新场景的对象导致渲染失败

优先选择从DOM层面替换iframe的方案，实现成本最低、清理最彻底，完全不需要依赖iframe内部的自销毁逻辑。

方案1：替换iframe节点（推荐） #

修改父页面的test_iframe()逻辑，停止预览时直接从DOM中移除旧iframe，播放时创建全新的iframe节点写入内容，浏览器会在节点移除时自动回收该iframe关联的所有JS上下文、WebGL资源、定时器、事件监听，从根源避免资源泄漏。
对应代码如下：

function test_iframe() {
  const playBtn = document.getElementById('play_btn');
  const existingIframe = document.getElementById('testing_frame');

  if (playBtn.textContent === 'Play') {
    // 创建全新的干净iframe节点
    const newIframe = document.createElement('iframe');
    newIframe.id = 'testing_frame';
    newIframe.className = 'ui';
    // 替换旧节点，不存在则直接挂载
    existingIframe ? existingIframe.replaceWith(newIframe) : document.body.appendChild(newIframe);
    
    // 写入最新生成的场景代码
    const generatedCode = generateCodeFromProjectData();
    const iframeDoc = newIframe.contentDocument;
    iframeDoc.open();
    iframeDoc.write(generatedCode);
    iframeDoc.close();

    // 切换UI状态
    newIframe.style.display = 'block';
    playBtn.textContent = 'Stop';
  } else {
    // 停止时直接移除iframe，彻底销毁所有资源
    existingIframe.remove();
    playBtn.textContent = 'Play';
  }
}

该方案实现后不会再出现Three.js多实例警告，也不会触发WebGL上下文丢失问题，不需要修改生成的场景代码逻辑。

方案2：复用单iframe（不推荐） #

如果必须保留同一个iframe实例复用，需要修正销毁逻辑的执行时序和释放范围：

• 父页面写入新代码前，先主动获取iframecontentWindow上的旧场景实例，手动调用销毁方法，确认资源释放完成后再执行write操作，不要依赖onbeforeunload事件触发销毁
• 销毁逻辑需要覆盖所有泄漏点：
  1. 调用cancelAnimationFrame()终止正在运行的渲染循环
  2. 递归遍历场景下所有对象，对Mesh类型的对象分别调用geometry.dispose()、material.dispose()，材质关联的纹理也需要单独调用texture.dispose()
  3. 调用renderer.dispose()，移除渲染器挂载的canvas节点
  4. 清空场景、相机、渲染器等对象的引用

如果修改后仍然看不到红色立方体，优先排查三个点：

• 销毁逻辑是否误绑定到新创建的场景实例，初始化完成后误执行了销毁操作清空了资源
• 相机位置、近远裁面配置是否正确，是否出现立方体被裁面裁剪、不在相机视野范围内的情况
• Three.js脚本加载是否正常，是否存在脚本未加载完成就执行初始化逻辑，导致THREE对象未定义、场景创建失败的问题

内容的提问来源于stack exchange，提问作者TheHaloDeveloper