three.js学习的第三天——屏幕自适应与全屏

前言：当我们使用web端和移动端等不同的屏幕时，难免会遇到屏幕的不适用问题

1.1屏幕画布大小会一直随着屏幕大小的改变画布大小，做到自适应

window.addEventListener("resize", ()=> {     //监听画面变化，更新渲染画面
//console.log("画面改变了");
camera.aspect = window.innerWidth / window.innerHeight;   //更新摄像头
camera.updateProjectionMatrix();    //更新摄像头的投影矩阵
renderer.sizeSize(window.innerWidth,window.innerHeight);  //更新渲染器
renderer.setPixelRatio(window.devicePixelRatio);  //设置渲染器的像素比
});

 

1.2双击屏幕进入全屏或者退出全屏

window.addEventListener("dblclick",() = > {
const fullScreenElement = document.fullscreenElement;
if(!fullScreenElement){
//双击控制屏幕进入全屏，退出全屏
//让画布对象全屏
renderer.domElement.requestFullscreen();
}else{
//退出全屏，使用document对象
document.exitFullscreen();
}
});