【ThreeJS Basics 07】全屏和调整大小

---

基础的尝试全屏视口

获取 windows 的视口宽高

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

---

去除白色的边框

注意 css 要放到 html，我这里的截图，js 引入是不对的

 <link rel="stylesheet" href="./style.css">

然后编辑 css 文件

* {
  margin: 0;
  padding: 0;
}

也可以使用定位来解决

* {
  margin: 0;
  padding: 0;
}

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

---

去除蓝边

每个人的浏览器环境都是不同的，所以想要统一样式的话，需要留意更多细节，这里蓝色的边框是因为 chrome 的版本问题导致的，可以 outline: none 来去除掉

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

---

阻止滚动，默认的控件会帮我们处理好这种滚动的瑕疵，但是当我们不使用控件的话，应该如何去掉这种滚动效果呢

如果您想删除任何类型的滚动，即使在触摸屏上，您也可以 overflow: hidden 在 html 和上添加 body

html,
body {
  overflow: hidden;
}

---

调整视口大小的适配

此时还会有个问题：当调整窗口大小时，画布的尺寸并不能变化

此时需要监听 windows 的 resize 事件来判断窗口的尺寸变化

当你改变相机属性时，还需要更新投影矩阵 camera.updateProjectionMatrix(), 我们稍后会讨论矩阵

最后，我们必须更新 renderer, 更新渲染器将自动更新画布的宽度和高度

window.addEventListener('resize', () => {
  console.log('windows resize')
  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)
})

可以根据需要调整窗口大小，画布应该覆盖视口而没有任何滚动条或溢出

---

像素比

可能你会看到这样的效果，感觉不够精细，原因是像素比比较低

---

历史

几年前，所有屏幕的像素比都是1，一切都很好。但当你仔细观察屏幕时，你会看到这些像素，这对图像的精确度和字体的细度是一个限制。

在这方面做得最多的公司是苹果。苹果看到了机会，开始制造像素比为2视网膜的屏幕。现在，很多制造商都在这样做，你可以看到像素比甚至更高的屏幕。

虽然这对于图像质量来说是一件好事，但像素比2意味着要渲染 4 倍的像素。像素比3意味着要渲染 9 倍的像素。

不过，2 的像素比以及足够了

处理像素比

要获取可以使用的屏幕像素比 window.devicePixelRatio，并更新渲染器的像素比，只需调用 renderer.setPixelRatio(...)

您可能想简单地将设备像素比发送给该方法，但最终会遇到高像素比设备的性能问题

像素比大于主要2是出于营销目的。你的眼睛几乎看不到2和之间的区别3，但这会产生性能问题并更快耗尽电池电量。你可以做的是将像素比限制为2。为此，你可以使用Math.min()

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

可以对比一下 1 跟 2 的区别

---

全屏

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

测试了一下，safari 也支持了