画布全屏和随着窗口变化而变化

全屏

这里，设置为双击画布全屏，画布监听点击事件，在回调函数中进行事件处理

canvas.adEventListener("dblclick",(e)=>{
    //e.target是目标节点，也就是双击的节点canvas画布
    /**document.fullscreenElement是全屏的元素节点，
     * 当画布没有全屏时，它的值是null，当canvas全屏时，它的值是canvas节点
     * 这个值可能对safari不起作用，所以要做以下兼容处理
     */
     const fullscreenElement=document.fullscreenElement || document.webkitFullscreenElement
     if(!fullscreenElement){
         if(e.target.requestFullscreen){
             // canvas请求全屏
             e.target.requestFullscreen();
         }else if(e.target.webkitRequstFullscreen){
             e.target.webkitRequestFullscreen();
         }
     }else{
         if(e.target.exitFullscreen){
             //canvas退出全屏
             e.target.exitFullscreen();
         }else if(e.target.webkitExitFullscreen){
             e.target.webkitExitFullscreen();
         }
     }
},false)

画布随窗口变化大小

这里有一个前置知识：像素比

如果电脑的像素比>1时，可能会看到渲染出的物体边缘有些模糊，像楼梯形状的齿状(我理解的像素比是设备像素/渲染css像素，不知道是不是)

可以通过window.devicesPixelRatio查看电脑像素比，像素比最高到2这里就行了，人眼分不出像素比是2和2和5的区别，可以设置渲染的像素比和设备像素比一致，就看不到渲染模糊的情况了:renderer.setPixelRatio(window.devicePixelRatio)

画布大小先设为窗口大小：

sizes={
    width=window.innerWidth,
    height=window.innerHeight
}

随窗口大小变换画布大小就要监测窗口的大小

window.addEventListener("resize",()=>{
    //窗口变化时
    //画布大小也变化
    sizes.width=window.innerWidth;
    sizes.height=window.innerHeight;
    //相机宽高比也变化
    camera.aspect=sizes.width/sizes.height;
    //更新投影矩阵，这个是three.js内部运行的
    camera.updateProjectMatrix()
    //更新渲染器渲染画布的大小
    renderer.setSize(sizes.width,sizes.height)
    //更新像素比，最大取值为2
    renderer.setPixelRatio(Math.min(window.devicePixelRatio,2))
},false)