在窗口变化时，如果不做自适应，立方体的边界会出现锯齿，这就是位图被css拉伸后失真导致的，默认canvas 画布的尺寸只有300*150。
因此，我们需要用canvas 画布的像素尺寸自适应窗口。
浏览器窗口改变时重置渲染尺寸
canvas 的行内属性width、height与css的width、height属性差别
我们可以使用css设置设置canvas元素的像素的宽度和高度，但是我们在使用坐标系进行绘图时，使用的坐标系是通过canvs行内属性设置的width和height，默认为300x150；也就是如果没有设置行内的width 和 height属性，使用canvasAPI进行绘图时整个canvs的坐标系在可见范围内是300x150，并不是css设置的像素尺寸。
juchi.jpeg
Three加载模型常用的方法-判断窗口是否变化，更新canvas尺寸，解决模型锯齿的问题。
// 将渲染尺寸设置为其显示的尺寸，返回画布像素尺寸是否等于其显示(css)尺寸的布尔值
resizeRendererToDisplaySize(renderer) {
// width 元素宽度 clientWidth 可见内容的宽度
const { width, height, clientWidth, clientHeight } = renderer.domElement;
const needResize = width !== clientWidth || height !== clientHeight;
// true 不等 false 相等
if (needResize) {
// 是重置渲染尺寸的方法 // setSize() 方法中的bool 参数很重要，会用于判断是否设置canvas 画布的css 尺寸。
// 设置了canvas画布的宽高
this.renderer.setSize(clientWidth, clientHeight, false);
}
return needResize;
}
浏览器窗口改变时调整相机视口的宽高比，更新透视投影矩阵
当canvas 画布的尺寸变化了，相机视口的宽高比也需要同步调整。
当相机视口的宽高比变了，相机的透视投影矩阵也会随之改变，因此我们需要使用camera.updateProjectionMatrix() 方法更新透视投影矩阵。
这样我们拖拽浏览器的边界，缩放浏览器的时候，就可以看到canvas 画布自适应浏览器的尺寸了。
bianxing.jpeg
渲染尺寸改变时 重置相机视口的宽高比，更新透视头一个矩阵。解决模型变形的问题。
// 渲染
render() {
this.renderer.render(this.scene, this.camera);
}
// 连续渲染
animate(time) {
requestAnimationFrame((time) => {
this.animate(time);
});
if (this.resizeRendererToDisplaySize(this.renderer)) {
const { clientWidth, clientHeight } = this.renderer.domElement;
this.camera.aspect = clientWidth / clientHeight; // camera.aspect是 相机视口的宽高比
this.camera.updateProjectionMatrix(); // 更新透视投影矩阵。
}
this.renderer.render(this.scene, this.camera);
}
zhengchang.jpeg
