Three 探索 06

🛏

自适应渲染窗口大小

这里使用的原生JS

window.addEventListener('resize',()=>{
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight

    //相机更新
    camera.aspect =sizes.width/sizes.height
    camera.updateProjectionMatrix()
    
    //画布更新
    renderer.setSize(sizes.width, sizes.height)
})

---

像素绘制比率

只需要在加一句

renderer.setPixelRatio(Math.min(window.devicePixelRatio,2))

---

全屏 退出全屏
它可以是画布 或者视频
值得注意的是 苹果safari浏览器需要单独设置

//这里是双击全屏
window.addEventListener('dblclick',()=>{

const fullscreenElement = document.fullscreenElement || document.webkitfullscreenElement 

//如果没有全屏
if(!fullscreenElement){

    //👇这两个判断是判断浏览器是什么内核，如果是苹果浏览器他将走下面的，本质是为了兼容性
    if(canvas.requestFullscreen){
        canvas.requestFullscreen()
    }
    else if(canvas.webkitfullscreenElement){
        canvas.webkitrequestFullscreen
    }


}
//如果目前处于全屏
else{
    document.exitFullscreen()
}

})