threejs监听窗口变化,更新渲染画面

417 阅读1分钟

当窗口发生变化时,为了保证我们的渲染效果,我们需要对照相机与渲染器进行一些更新设置。因为简单,这里直接贴代码

// 监听画面变化,更新渲染画面

window.addEventListener("resize", () => {

    // 更新摄像头投影画布的宽高比

    camera.aspect = window.innerWidth / window.innerHeight;

    // 更新摄像机的投影矩阵

    camera.updateProjectionMatrix();

    // 更新渲染器尺寸

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

    // 设置渲染器像素比

    renderer.setPixelRatio(window.devicePixelRatio);

});