three.js - Resizing and FullScre

• Fit in the viewport

// 修改画布尺寸 原先为 800 * 600

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

// 监听窗口大小改变
window.addEventListener('resize', () => {
  // Update sizes
  sizes.width = window.innerWidth
  sizes.height = window.innerHeight

  // update camera
  camera.aspect = sizes.width / sizes.height
  camera.updateProjectionMatrix() // 更新camera投影矩阵

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

• Handle pixel ratio

  • window.devicePixelRatio设备像素比, 有时候我们看到的渲染是不清晰的，有锯齿边的，通常因为我们使用的显示器像素比是大于1的

// Render
const renderer = new THREE.WebGLRenderer({})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio))
document.body.appendChild(renderer.domElement)

• Handle fullscreen

// 双击全屏
window.addEventListener('dblclick', event => {
  const fullScreenElement = document.fullscreenElement // 全屏元素
  if (fullScreenElement) {
    document.exitFullscreen()
  } else {
    renderer.domElement.requestFullscreen()
  }
})