跳到主要内容

画布自适应&全屏

画布自适应​

// 监听窗口大小
window.addEventListener('resize', () => {
  // 更新渲染器大小
  renderer.setSize(window.innerWidth, window.innerHeight)
  // 更新相机宽高比
  camera.aspect = window.innerWidth / window.innerHeight
  // 更新相机
  camera.updateProjectionMatrix()
})

全屏​

添加“点击全屏”按钮，点击后进入全屏模式。

const button = document.createElement('button')
button.innerText = '点击全屏'
button.style.position = 'absolute'
button.style.top = '10px'
button.style.left = '10px'
button.style.zIndex = '9999'
document.body.appendChild(button)

button.onclick = () => {
  document.documentElement.requestFullscreen()
}

同理，添加退出全屏按钮，点击后退出全屏模式。


// 退出全屏按钮
const exitFullscreenButton = document.createElement('button')
exitFullscreenButton.innerText = '退出全屏'
exitFullscreenButton.style.position = 'absolute'
exitFullscreenButton.style.top = '10px'
exitFullscreenButton.style.left = '100px'
exitFullscreenButton.style.zIndex = '9999'
document.body.appendChild(exitFullscreenButton)

exitFullscreenButton.onclick = () => {
  document.exitFullscreen()
}

Fullscreen and exit fullscreen

示例代码：https://github.com/wukaipeng-dev/threejs-demo/blob/main/02-basic/src/main-fullscreen.ts