Three.js自适应窗口变化渲染

发生场景：当窗口大小发生变化时，会出现局部空白区域。
解决方法：重新获取浏览器窗口新的宽高尺寸，然后通过新的宽高尺寸更新相机Camera和渲染器WebGLRenderer的参数。
要注意一下，Three.js自适应渲染不一定就是窗口变化，本质上还是你要渲染的区域宽高尺寸变化了；更进一步变化是视图矩阵.matrixWorldInverse和投影矩阵.projectionMatrix的变化。
具体办法：重新设置相机对象和渲染器对象的参数，不需要在渲染函数render中更新，通过窗口事件window.onresize来触发一个函数，然后在函数中更新相机Camera和渲染器WebGLRenderer的参数。

1.正投影相机OrthographicCamera自适应渲染

// onresize 事件会在窗口被调整大小时发生
window.οnresize=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 ();
};

Threejs为了提高渲染效率，每次执行渲染器WebGLRenderer渲染方法.rener()的时候不会读取相机相关的参数重新计算一次投影矩阵.projectionMatrix，只会首次渲染的时候计算一次投影矩阵，所以当你改变影响相机投影矩阵的属性，自然需要调用.updateProjectionMatrix ()更新相机对象的投影矩阵.projectionMatrix。
2.透视投影相机PerspectiveCamera自适应渲染

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