THREE中canvas画布尺寸动态变化

场景

当浏览器尺寸动态变化时，canvas画布尺寸跟着变化。

要解决的问题：

如下图所示：当页面尺寸变化了，canvas渲染画布尺寸没有跟着变化，需要重新刷新。

如何解决

// 使用onresize事件监听页面尺寸变化
window.onresize = function () {
    const width = window.innerWidth; //canvas画布宽度
    const height = window.innerHeight; //canvas画布高度
    // 1. WebGL渲染器渲染的Cnavas画布尺寸更新
    renderer.setSize(width, height);
};

效果：

可以看到，canvas画布已经跟随着浏览器尺寸变化而变化了，但还存在问题,便是canvas尺寸变化时，场景里面的物体的形状被扯变形了！

那如何解决这个问题呢？

window.onresize = function () {
    const width = window.innerWidth; //canvas画布宽度
    const height = window.innerHeight; //canvas画布高度
    // 1. WebGL渲染器渲染的Cnavas画布尺寸更新
    renderer.setSize(width, height);
    
    // 2.1.更新相机参数(根据自己的使用情况而定，如果使用的是正投影相机，则按照正投影相机的格式改；若使用的是透视投影相机，便根据透视投影相机的格式改！)
    
    //正投影相机
    //canvas画布宽高比会影响left, right需要跟着更新
    const k = width / height; //canvas画布宽高比
    camera.left = -s*k;
    camera.right = s*k;
    
    
    //透视投影相机
    camera.aspect=width/height;
    
    
    // 2.2.相机的left, right等属性变化了，通知threejs系统，这步很重要！！！！
    
    camera.updateProjectionMatrix();
};

结果：

可以看到通过上述步骤，已经可以达到canvas尺寸动态变化的效果。