我正在使用ThreeJS在responsive iframe中绘制行星的3D实验。以下是Earth的例子。
这适用于DOMContentLoaded，但不适用于onresize。根据第一次渲染，场景被截断或保持在（0,0）左上角。请注意，根据webgl anti patterns，这是推荐的行为。
但我希望根据iframe的新大小来缩放行星，无论是在调整窗口大小时还是在orientation更改（并导致调整大小）时。从本质上讲，使其跨平台和响应。
我有一些想法可以做到这一点：
使用innerWidth/innerHeight，即使它是anti-pattern，但如果我们处理（）并使用新的高度＆amp;重新绘制场景，则可以使用resizeFinish()。 iframe的宽度。
确保有效执行处置和重绘，即setTimeout并检测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);
}
，如下所示：
d这还不错吗？