three.js的响应式设计

three.js的物体是通过canvas渲染的，在不同的屏幕尺寸上我们通常需要改变canvas的大小来让场景显示完整。 回忆一下我们在配置相机时的代码

const fov = 75; // field of view，垂直视野范围
const aspect = 2;  // 相机默认值
const near = 0.1;
const far = 5;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

这里的aspect就是画布的宽高比，因此我们也需要动态调整这个aspect的值，才能让物体在屏幕拉伸时保持原来的形状

camera.aspect = canvas.clientWidth / canvas.clientHeight;

另外的一个问题是物体出现了块状化，即物体边缘出现锯齿。 这是因为canvas其实有两个尺寸，一个是显示尺寸，一个是分辨率尺寸。 我们改变了显示尺寸而分辨率尺寸并没有相应的跟随改变。 在three.js中我们有renderer.setSize来帮助改变canvas的分辨率尺寸(drawing buffer)

const needResize = canvas.width !== width || canvas.height !== height;
if (needResize) {
  renderer.setSize(width, height, false);
}