简述
前面的画布具有个固定的尺寸，尺寸为800x600，虽然没必要让WebGL适配整个屏幕，但是为了更好的体验，适配屏幕大小是必须的。
首先，期望画布占用所有可用空间。然后，我们需要确保如果用户调整其窗口大小，它仍然适配。最后，我们需要为用户提供一种以全屏方式体验的方法。
设置
初始内容(私信索取)包含之前完成的内容。立方体位于中心，并且可以通过拖拽操作来移动相机。
适配视口
要使画布适配视口，而非使用sizes变量中的固定数字，使用window.innerWidth和window.innerHeight
// ...
// 尺寸
const sizes = {
width: window.innerWidth,
height: window.innerHeight
}
// ...
此时可以看到画布的大小等同于视口大小。但不幸的是，外围有白色的边框和一个滚动条。
这是因为浏览器有默认样式，比如重要的标题、带下划线的链接、段落之间的空白以及页面上的填充。有很多方法可以解决这个问题，这取决于网页所使用的框架。如果页面上有其他内容，请在执行操作时尽量不影响其他内容。
这里使用CSS来解决这个问题。
在模版中，已经在src/style.css文件中链接了一个CSS。如果不常使用Webpack，代码看上去会很奇怪，但CSS文件确实是在script.js的第一行引入。
import './style.css'
CSS文件中可以直接写CSS代码，页面会自动重载
首先要做的一件事就是使用通配符*移除margin和padding类型的元素
*
{
margin: 0;
padding: 0;
}
然后，使用class选择webgl画布，并调整画布对齐左上角
.webgl
{
position: fixed;
top: 0;
left: 0;
}
这样就不用再指定画布的宽和高，因为Three.js在调用renderer.setSize()方法时，完成了调整。
另一个问题，拖拽操作时画布会有一个蓝色的轮廓，这主要发生在Chrome上。要解决这个问题，只需要在.webgl上添加outline: none;
.webgl
{
position: fixed;
top: 0;
left: 0;
outline: none;
}
如果想删除滚动条，可以在html和body上添加overflow: hidden
html,
body
{
overflow: hidden;
}
但是这样并不会在窗口大小发生变化时，重新调整画布大小。
句柄调整大小
要想调整画布大小，首先需要知道窗口何时调整大小，所以应在窗口监听resize事件。
在sizes变量后添加resize监听器
window.addEventListener('resize', () =>
{
console.log('window has been resized')
})
此时，在调整窗口大小时会触发一个函数，并显示在控制台。
可以通过这个更新值。
首先，更新变量sizes
window.addEventListener('resize', () =>
{
//更新sizes
sizes.width = window.innerWidth
sizes.height = window.innerHeight
})
然后通过更新aspect属性，修改相机宽高比
window.addEventListener('resize', () =>
{
// ...
// 更新相机
camera.aspect = sizes.width / sizes.height
})
当修改相机属性时，比如修改aspect时，也需要使用camera.updateProjectionMatrix()更新投影矩阵.
window.addEventListener('resize', () =>
{
// ...
camera.updateProjectionMatrix()
})
最后，需要更新renderer。更新renderer也会自动更新画布的宽和高。
window.addEventListener('resize', () =>
{
// ...
// 更新 renderer
renderer.setSize(sizes.width, sizes.height)
})
综上
window.addEventListener('resize', () =>
{
//更新sizes
sizes.width = window.innerWidth
sizes.height = window.innerHeight
// 更新相机
camera.aspect = sizes.width / sizes.height
camera.updateProjectionMatrix()
//更新renderer
renderer.setSize(sizes.width, sizes.height)
})
此时可以根据需要调整窗口大小，且画布完美覆盖视口，不会有宽边和滚动条。
