javascript - THREE.JS - 如何在调整窗口大小时保持场景的完整性？

Question

我在一个 div 中有一个场景，它非常适合；但是当我移动窗口时，场景超出了 div 的范围并且几乎占据了整个窗口。这肯定有点疯狂。

有哪些方法即使在窗口移动或调整大小时也能将场景保持在 div 中？

Answer 1

创建一个窗口调整大小监听器并附加您的自定义逻辑以保持一致是一种常见的解决方案。

添加监听器:

window.addEventListener( 'resize', onWindowResize, false );

您可以在 onWindowResize 回调方法中添加任何代码，但这里有一个示例:

function onWindowResize() {

    var width = window.innerWidth,
        height = window.innerHeight;

    camera.aspect = width / height;
    camera.updateProjectionMatrix();
    renderer.setSize( width, height );   
}