【Three.js】画布自适应大小与全屏

目录

画布自适应大小 

全屏实现

画布自适应大小 

在Three.js中，要使画布能够自适应窗口大小的变化，需要在窗口大小变化时更新相关的渲染器、摄像机等参数。

① 监听窗口大小变化事件： window.resize

② 摄像机宽高比更新： camera.aspect = window.innerWidth / window.innerHeight; 更新摄像机的宽高比，以确保画面不会变形。

③ 摄像机投影矩阵更新： camera.updateProjectionMatrix(); 通过更新摄像机的投影矩阵，确保透视投影的正确显示。

④ 渲染器大小更新： renderer.setSize(window.innerWidth, window.innerHeight); 更新渲染器的大小，使其与新的窗口大小相匹配。

⑤ 渲染器像素比设置： renderer.setPixelRatio(window.devicePixelRatio); 设置渲染器的像素比，以适应高分辨率屏幕，提高渲染效果。

（不一定要用window对象的宽高，可以根据实际情况使用任意dom容器的宽高值）

代码实现： 

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


//根据实际情况设置
// window.addEventListener("resize", () => {
//   // 更新摄像头
//   camera.aspect = dom.offsetWidth / dom.offsetHeight
//   //   更新摄像机的投影矩阵
//   camera.updateProjectionMatrix()
//   //   更新渲染器
//   renderer.setSize(dom.offsetWidth, dom.offsetHeight)
//   //   设置渲染器的像素比
//   renderer.setPixelRatio(dom.devicePixelRatio)
// }) 

全屏实现

进入全屏和退出全屏可以使用全屏API实现。

🌱方法：

document.exitFullscreen() 退出全屏；

element.requestFullscreen() 将特定元素设置为全屏模式；

🌱属性：

document.fullscreenElement 判断是否是全屏模式，如果这个值为 null，文档不处于全屏模式；

document.fullscreenEnabled 提供了启用全屏模式的可能性。当它的值是 false 的时候，表示全屏模式不可用（可能的原因有 "fullscreen" 特性不被允许，或全屏模式不被支持等）

 🌱事件：

document.onfullscreenchange / element.onfullscreenchange 进入全屏或退出全屏时触发

document.onfullscreenerror / element.onfullscreenerror 当进入全屏或退出全屏出错时触发

const threeContainer = document.getElementById('three')

threeContainer.addEventListener("dblclick", () => {
    const fullScreenElement = document.fullscreenElement
    if (!fullScreenElement) {
      // 进入全屏,让画布对象全屏
      renderer.domElement.requestFullscreen()
    } else {
      // 退出全屏
      document.exitFullscreen()
    }
  })