three.js中画布自适应屏幕大小和控制场景全屏

设置画布自适应屏幕大小

问题描述： 

        在页面尺寸发生改变的时候，画布并不能自适应的改变尺寸，而出现空白或者滚动条突出的情况。所以监听屏幕大小的改变，来重新设置相机的宽高比例和渲染器的尺寸大小

 

 为浏览器添加监听事件 resize

// 监听画面变化，更新渲染画面
window.addEventListener("resize", () => {
  //   console.log("屏幕大小变化，下面进行自适应操作");

  // 更新摄像头
  //aspect属性是设置摄像机视锥体的长宽比，通常是使用画布的宽/画布的高。
  camera.aspect = window.innerWidth / window.innerHeight;

  //   更新摄像机的投影矩阵
  //camera.updateProjectionMatrix()用于更新摄像机投影矩阵，相机任何参数被改变以后必须被调用
  camera.updateProjectionMatrix();

  //   更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);

  //   设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio);
});

 控制场景全屏

        为窗口绑定事件，如双击。双击场景进入全屏。代码如下：

window.addEventListener("dblclick",()=>{
  //获取全屏元素 fullscreenElement只读属性返回当前在此文档中以全屏模式显示的元素。
  const fullScreenElement = document.fullscreenElement;
  // 使用element.requestFullscreen()方法以全屏模式查看元素，exitFullscreen方法退出全屏
  if(!fullScreenElement){
     // 让场景对象全屏
    renderer.domElement.requestFullscreen()
  }else{
    document.exitFullscreen()
  }
})