在开发 Three.js 项目时，我们需要考虑到不同的设备和屏幕尺寸。当用户调整浏览器窗口大小时，我们希望场景能够自适应地进行调整，以保持正确的比例和尺寸。原理也比较简单：监听 window 对象的 resize 事件，在浏览器窗口大小发生变化时更新相机和渲染器的设置。

window.addEventListener('resize', function () {
  // 重新设置渲染器的宽高
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 重新设置相机的宽高比
  camera.aspect = window.innerWidth / window.innerHeight;
  // 渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix
  // 但是不会每渲染一帧，就通过相机的属性计算投影矩阵(节约计算资源)
  // 如果相机的一些属性发生了变化，需要执行updateProjectionMatrix()方法更新相机的投影矩阵
  camera.updateProjectionMatrix();
})