three.js调整浏览器窗口时,让相机和渲染器自适应

three.js调整浏览器窗口时,让相机和渲染器自适应

不废话直接上代码，cv进项目里面就能用

/**
 * Sizes
 */
const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}

// 用来调整,当浏览器尺寸发生改变，及时进行调整摄像机和渲染器
window.addEventListener('resize', () => {
    // Update sizes
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight

    // Update camera
    camera.aspect = sizes.width / sizes.height
    // 更新投影的变换矩阵
    camera.updateProjectionMatrix()

    // Update renderer
    renderer.setSize(sizes.width, sizes.height);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
    renderer.render(scene,camera);
})