画布充满窗口

让画布充满窗口需要设置尺寸，可以使用 window.innerWidth 属性，同时移除 canvas 标签上设置的宽高

html 代码如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>08 fullscreenAndResizing</title>
  </head>

  <body>
    <canvas id="mainCanvas" class="webgl"></canvas>
    <script src="<%= path %>" charset="utf-8"></script>
  </body>
</html>

js 代码如下

// Size
const sizes = {
  width: window.innerWidth,
  height: window.innerHeight,
}

使用 innerWidth, innerHeight 获取视口的宽高。

同时需要设置一些标签的 CSS 属性，如下

html,
body {
  overflow: hidden; /* 避免滚动时出现问题 */
}

body {
  margin: 0;
  padding: 0;
}

.webgl {
  position: fixed;
  top: 0;
  left: 0;
  outline: none;
}

这样我们的画布就完整的充满屏幕了

resize

考虑到 resize 窗口时的处理，需要监听 resize 事件

window.addEventListener('resize', () => {
  // update sizes
  sizes.width = window.innerWidth
  sizes.height = window.innerHeight

  // update camera
  camera.aspect = sizes.width / sizes.height
  camera.updateProjectionMatrix()

  // update renderer
  renderer.setSize(sizes.width, sizes.height)
})

在线 demo 链接

demo 源码

pixel ratio 像素比

可以看到屏幕上立方体的边缘出现了锯齿，这是像素比问题，我们可以通过设置像素比解决这个问题

renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

不需要设置过高，过高的像素比设定可能会带来性能问题，最大值设置为 2 已经能满足绝大部分场景了。

同时需要设置在 resize 事件中，因为有可能用户使用显示器连接多块像素比不同的屏幕，我们将页面拖动到另一个屏幕中时，需要赋予新的像素比

window.addEventListener('resize', () => {
  // update sizes
  sizes.width = window.innerWidth
  sizes.height = window.innerHeight

  // update camera
  camera.aspect = sizes.width / sizes.height
  camera.updateProjectionMatrix()

  // update renderer
  renderer.setSize(sizes.width, sizes.height)
+  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})

在线 demo 链接

demo 源码

全屏

用户一般习惯双击全屏，所以我们要监听双击事件

window.addEventListener('dblclick', () => {
  if (document.fullscreenElement) {
    document.exitFullscreen()
  } else {
    canvas.requestFullscreen()
  }
})

添加如上的代码，就完成了双击进入全屏，再次双击退出全屏。为了解决 safari 浏览器的兼容问题，需要加 webkit 前缀

window.addEventListener('dblclick', () => {
  const fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement
  if (fullscreenElement) {
    if (document.exitFullscreen) {
      document.exitFullscreen()
    } else {
      document.webkitExitFullscreen()
    }
  } else {
    if (canvas.requestFullscreen) {
      canvas.requestFullscreen()
    } else {
      canvas.webkitRequestFullscreen()
    }
  }
})

完整代码和 demo 如下

在线 demo 链接

demo 源码

小结

本节我们学习了设置满屏画布、resize 时适配、高分辨率屏幕像素比、双击全屏等功能。下一节讲讲几何体。

Three.js 之 3 画布与全屏

画布充满窗口

resize

pixel ratio 像素比

全屏

小结

Similar Posts

Comments