如何在响应iframe中呈现webgl？

我正在用

响应式
iframe绘制行星的3D实验。举个例子，这里有一个例子

这适用于
DOMContentLoaded
，但不适用于onresize。根据场景的第一次渲染，场景将被切断或保留在（0,0）左上角。注意，这是根据的建议行为

但我想根据iframe的新大小来缩放行星，无论是在调整窗口大小还是
方向改变（并导致调整大小）时。从本质上讲，是为了使其跨平台且响应迅速

我有一些想法可以让这一切顺利进行：

使用
innerWidth/innerHeight
，即使它是一个，但如果我们dispose（）并使用iframe的新高度和宽度重新绘制场景，则可以使用它

确保有效执行处置和重新喷漆，即设置超时并检测
resizeFinish（）
如下：

function resizeFinish() {
  width = window.clientWidth;
  height = window.clientHeight;

  renderer.setSize(width, height);
  render();

  if (scene) {
    while (scene.children.length > 0) {
      scene.remove(scene.children[scene.children.length - 1]);
    }

    // cleanup without calling render (data needs to be cleaned up before a new scene can be generated)
    renderer.dispose(scene.children);
  }

  alertSize();


}
window.onresize = function() {
  clearTimeout(doit);
  doit = setTimeout(function() {
    resizeFinish();
  }, 1000);
};


function render() {
  controls.update();
  sphere.rotation.y += 0.003;
  clouds.rotation.y += 0.005;
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

这足够好吗？
不是完整的答案，但试着阅读，看看它们是否适合你。