前言

three中渲染出来的场景是没有自适应功能的，如果我们缩放放大窗口整个场景不会跟着窗口变动，本节我们就来学一下如何实现自适应渲染。

自适应渲染

自适应渲染原理非常简单，监听窗口resize事件，窗口大小发生变化时，重新获取窗口大小，并且更新相机和渲染器。重新获取窗口width跟height很简单，重点是相机与渲染器如何更新。 首先是相机的更新，相机更新涉及到projectionMatrix投影矩阵，在此之前我们先了解一下相机的两种矩阵属性：

• matrixWorldInverse：视图矩阵的逆矩阵。视图矩阵会将3D物体转换为相机视角的矩阵，利用场景中物体的世界坐标转换为相机坐标来实现。由于相机本身就存在一个变换矩阵，所以在视图矩阵计算的过程中需要用matrixWorldInverse来完成该计算。

• projectionMatrix：投影变换矩阵，投影矩阵是将物体从相机坐标系转为屏幕坐标系，该矩阵规定了转换过程中具体的算法，如视角、纵横比等的计算。渲染过程中，物体都要乘以投影矩阵，这样才能投影到屏幕上渲染出来。当窗口发生变化时，相机属性也要发生变化，这时候我们就要更新投影变换矩阵，Camera有专门的方法去、更新——updateProjectionMatrix。

  相机更新需要用updateProjectionMatrix方法，而投影矩阵的计算需要长宽比才能正确的计算，所以在更新前我们需要修改相机的长宽比——aspect。aspect指的是渲染场景长宽比，这个值能够影响物体形状大小的呈现。
  更新完相机接下来就是渲染器，相机的长宽比都变化了，渲染器的长宽肯定也要变，我们通过渲染器的setSize方法去更新长宽。接着我们再更新下像素比，通过setPixelRatio方法。相机渲染器分析完毕，我们只需加上以下代码就能实现自适应。

   window.addEventListener('resize', () => {
  //更新长宽比
  camera.aspect = window.innerWidth / window.innerHeight;
  //更新摄影机的投影矩阵
  camera.updateProjectionMatrix();
  // 更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio);
});

总结

以上就是自适应渲染的方法，我们要同步更新相机与渲染器才能让渲染出来的物体具有自适应的效果。