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

郁宇风、黄

已于 2023-10-06 11:02:17 修改

阅读量1.2k

点赞数

文章标签： javascript 前端 3d

于 2023-05-06 16:56:43 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_52960369/article/details/130530972

版权

文章讲述了如何处理画布在页面尺寸变化时无法自适应的问题。通过监听窗口resize事件，动态调整摄像头的宽高比、渲染器的尺寸，并设置渲染器的像素比以保证画质。同时，介绍了双击进入和退出全屏的功能，利用requestFullscreen和exitFullscreen方法实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

设置画布自适应屏幕大小

问题描述：

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

为浏览器添加监听事件 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()
  }
})