前言:当我们使用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();
}
});