Three.js在调整大小画布上保持比例和位置

Question

我有一个div包含three.js画布。我想在更改画布大小时保留内容画布的比例和位置。

我尝试了：

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

function onWindowResize(){

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

}

但这仅适用于窗口调整大小，而不适用于画布调整大小。我也修改了此代码，但画布的宽度和高度却不起作用。

Answer 1

您需要创建一个事件，该事件将在您调整画布大小时触发，因此您可能希望使用 js 而不是 css 来处理画布大小调整。此事件将触发您的onWindowResize功能，这将解决您的问题。