ThreeJS canvas画布自适应的原理

Posted 2023-03-17

参考技术A 在窗口变化时，如果不做自适应，立方体的边界会出现锯齿，这就是位图被css拉伸后失真导致的，默认canvas 画布的尺寸只有300*150。
因此，我们需要用canvas 画布的像素尺寸自适应窗口。

canvas 的行内属性width、height与css的width、height属性差别
我们可以使用css设置设置canvas元素的像素的宽度和高度，但是我们在使用坐标系进行绘图时，使用的坐标系是通过canvs行内属性设置的width和height，默认为300x150；也就是如果没有设置行内的width 和 height属性，使用canvasAPI进行绘图时整个canvs的坐标系在可见范围内是300x150，并不是css设置的像素尺寸。

Three加载模型常用的方法-判断窗口是否变化，更新canvas尺寸，解决模型锯齿的问题。

当canvas 画布的尺寸变化了，相机视口的宽高比也需要同步调整。
当相机视口的宽高比变了，相机的透视投影矩阵也会随之改变，因此我们需要使用camera.updateProjectionMatrix() 方法更新透视投影矩阵。
这样我们拖拽浏览器的边界，缩放浏览器的时候，就可以看到canvas 画布自适应浏览器的尺寸了。

渲染尺寸改变时 重置相机视口的宽高比，更新透视头一个矩阵。解决模型变形的问题。