ThreeJS全屏识别与切换----(7)

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情 >

前两天才发现文章可以设置主题,快乐++

回归正文,在我们渲染模型的时候,经常出现的情况是我们需要全屏渲染模型,把所有可用的空间都运用在画布上,也就是渲染器上;

设置渲染器尺寸为屏幕宽高

// 获取屏幕宽高
let width = window.innerWidth;
let height = window.innerHeight;
// 将屏幕宽高应用于相机
const camera = new THREE.PerspectiveCamera(75, width / height);
// 将屏幕宽高应用于渲染器
renderer.setSize(width, height)
// 此时我们的场景初次渲染时已经达到与屏幕可视域宽高一致，可能有部分的css样式需要调整，如padding，margin等，请自行调整，不过多赘述；

监听屏幕宽高变化

此时初次渲染时我们的场景与屏幕可视域宽高保持一致，但当我们修改调整时场景并未跟随可视域进行变化，我们需要监听可视域的resize

// 监听resize
window.addEventListener('resize',()=>{
    // 更新宽高
     width = window.innerWidth;
     height = window.innerHeight;
     // 更新相机纵横比
     camera.aspect = width / height;
     // 当我们更新了相机纵横比时我们的相机此时看起来并无变化，因为相机的旋转，偏移，缩放等数据都存储于相机的矩阵当中，我们需要更新矩阵实现相机的更新，矩阵为4*4的，我们可以看为16位的数组
     // 更新相机的矩阵
     camera.updateProjectionMatrix();
     // 更新渲染器
    renderer.setSize(width , height)
    // 此时效果如图1，场景渲染器与window可视域保持一致
    // 缺陷如图二，我们可以清晰的看到边界处有锯齿状（gif图可能有点糊，你们可以敲一下代码在自己的本地看）
    // 解决缺陷 将渲染器的渲染比率与window保持一致，但当window的渲染比率过高时，其实就是超过2我们的肉眼已经看不出来太大的区别，但会耗费太多的renderer的渲染，所以最大取2
    renderer.setPixelRatio(Math.min(window.devicePixelRatio,2))
    
})

图一

图二

监听鼠标双击事件，实现全屏与非全屏切换

// 监听事件
window.addEventListener('dblclick',()=>{
// webkit的操作只是为了兼容safari浏览器
const fullScreenElement = document.fullscreenEnabled || document.webkipFullscreenEnabled;
// 判断当前屏幕状态 非全屏？
    if(!fullScreenElement){
    // 此类api属于document与dom，除此场景外也可以使用
    // 开启全屏 此canvas为WebGLRenderer的canvas
        if(canvas.requestFullscreen()){
            canvas.requestFullscreen()
        }else if(canvas.webkitRequestFullscreen()){
            canvas.webkitRequestFullscreen()
        }

    }
    // 全屏
    else{
    // 退出全屏
        if( document.exitFullscreen()){
            document.exitFullscreen()
        }else if( document.webkitExitFullscreen()){
            document.webkitExitFullscreen()
        }
    }
})

预告：下一篇《几何》

如果有哪里描述不准确或者有问题,欢迎大佬指正!
(≖ᴗ≖)✧