How to render a webgl in a responsive iframe? - iframe

Question

I'm using ThreeJS to paint 3D experiments of planets in a responsive iframe. Here's an illustration of Earth, for example.
This works fine on DOMContentLoaded, but not onresize. The scene is cut off or remains at (0,0) top-left as per its first render. Note, this is the recommended behavior according to webgl anti patterns.
But I want to scale the planet according to the new size of the iframe, both when the window is resized or when orientation changes (and leads to a resize). Essentially, to make it cross-platform and responsive.
I have a few ideas to make this work:
Use innerWidth/innerHeight, even though it is an anti-pattern, but can work if we dispose() and repaint the scene with new height & width of the iframe.
Ensure the disposition and repaint is carried out efficiently, i.e. setTimeout and detect resizeFinish() like so:
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);
}
Is this good enough?