Three.js 浏览器窗口尺寸变化 自适应渲染

Question

开发的过程中你可能会遇到这样一个问题，通过鼠标拖动使浏览器的窗口变大，因为 Threejs 渲染器的渲染尺寸范围没有跟着变化，出现局部空白区域。对于这种情况要做的就是重新获取浏览器窗口新的宽高尺寸，然后通过新的宽高尺寸更新相机和渲染器的参数设置。

正投影相机

比如全屏渲染的时候，为了适应窗口的大小变化，要重新设置相机对象和渲染器对象的参数，不许需要在渲染函数 render 中周期性更新，至于快要通过窗口时间来触发一个函数 window.onresize，然后在函数中更新相机和渲染器的参数。

渲染区域变化了，要通过 Three.js 渲染器 .setSize() 方法重置渲染器渲染尺寸。

渲染区域尺寸变化，相机的相关参数自然也需要变化，改变相机的参数后，注意需要执行相机对象 .updateProjectionMatrix() 方法更新相机对象的投影矩阵，之所以需要手动更新，是因为 Threejs 为了提高渲染效率，没必要每次执行渲染器渲染方法的时候都读取相机相关的数据计算出来一个投影矩阵，只要计算一次就可以，所以如果你改变影响相机对应投影矩阵的属性，自然需要手动更新相机对象的投影矩阵值。

// onresize 事件会在窗口被调整大小时发生
window.onresize = function(){
  // 重置渲染器输出画布canvas尺寸
  renderer.setSize(window.innerWidth,window.innerHeight);
  // 重置相机投影的相关参数
  k = window.innerWidth/window.innerHeight;//窗口宽高比
  camera.left = -s*k;
  camera.right = s*k;
  camera.top = s;
  camera.bottom = -s;
  // 渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix
  // 但是不会每渲染一帧，就通过相机的属性计算投影矩阵(节约计算资源)
  // 如果相机的一些属性发生了变化，需要执行updateProjectionMatrix ()方法更新相机的投影矩阵
  camera.updateProjectionMatrix ();
};

透视投影相机

// onresize 事件会在窗口被调整大小时发生
window.onresize = function(){
  // 重置渲染器输出画布canvas尺寸
  renderer.setSize(window.innerWidth,window.innerHeight);
  // 全屏情况下：设置观察范围长宽比aspect为窗口宽高比
  camera.aspect = window.innerWidth/window.innerHeight;
  // 渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix
  // 但是不会每渲染一帧，就通过相机的属性计算投影矩阵(节约计算资源)
  // 如果相机的一些属性发生了变化，需要执行updateProjectionMatrix ()方法更新相机的投影矩阵
  camera.updateProjectionMatrix ();
};

如果你指向实现自适应渲染功能，不想深入了解直接使用上面的代码就可以，如果你想深入理解，需要有一定的鱼如果 WebGL 基础，了解 Threejs 底层的封装原理，知道什么是相机对应的投影矩阵，相机对象的投影矩阵值是如何计算出来的，Threejs 相机对象的哪些属性值与相机对象的投影矩阵是相关的。

Three.js 自适应渲染不一定就是窗口变化，本质上还是你要渲染的区域宽高尺寸变化了。