-----------------------------华丽的分割线---------------------

相关代码均已上传到 gitee 中：myThree: 学习 Three.js ，努力加油~！

Gitee 静态演示地址：Three JS 演示页面

 -----------------------------华丽的分割线---------------------

当浏览器窗口尺寸变化的时候，Three.js 渲染的场景，也就是 canvas 不会变化。

让 canvas 随着窗口的尺寸变化，可以利用 window 对象的 resize 事件实现响应式变化。

window.onresize = function(){winH = window.innerHeight;winW = window.innerWidth;renderer.setSize( winW, winH );renderer.render( scene, camera );
}

 resize 事件函数里，重新计算窗口尺寸，让渲染器重新进行大小渲染。不过，画面会被拉扯变形。这是因为，窗口的宽高比跟之前的不一样了。

需要重新调整 camera 相机视锥体的宽高比。  

window.onresize = function(){winH = window.innerHeight;winW = window.innerWidth;renderer.setSize( winW, winH );camera.aspect = winW/winH;camera.updateProjectionMatrix();renderer.render( scene, camera );
}

相机的方法updateProjectionMatrix ()其作用是更新摄像机投影矩阵。在相机的任何参数被改变以后必须被调用。

这样就实现了 Three.js 的响应式设计。