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 );   
}