threeJs屏幕自适应和双击全屏切换场景实现

在threeJs进行3D项目展示的过程中，会遇到浏览器尺寸变化，以及想要全屏展示的场景。如果，我们想在屏幕尺寸变化时，让展示铺满可视区。如果，我们想通过双击实现展示的全屏，再次双击退出全屏，可以参照以下代码。

import * as THREE from 'three';
import {
    OrbitControls
} from 'three/examples/jsm/controls/OrbitControls.js'

// 获取画布
const canvas = document.querySelector('canvas.webgl')

// 创建场景
const scene = new THREE.Scene()

// 创建物体并添加至场景中
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({
    color: 'orange',
})
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

// 定义尺寸
const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}

// 监听尺寸变化：更新尺寸，修改屏幕宽高比，设置尺寸，并进行像素比的修改
window.addEventListener('resize', () => {
    // 更新尺寸
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight

    // 设置宽高比，并且进行更新
    camera.aspect = sizes.width / sizes.height
    camera.updateProjectionMatrix()

    // 渲染屏幕设置尺寸
    renderer.setSize(sizes.width, sizes.height)

    // 设置屏幕像素比
    renderer.setPixelRatio(window.devicePixelRatio)
})

// 监听双击：进行全屏和退出全屏操作
window.addEventListener('dblclick', () => {
    const fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement

    if (!fullscreenElement) {
        if (canvas.requestFullscreen) {
            canvas.requestFullscreen()
        } else if (canvas.webkitRequestFullscreen) {
            canvas.webkitRequestFullscreen()
        }
    } else {
        if (document.exitFullscreen) {
            document.exitFullscreen()
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen()
        }
    }
})

// 相机：正交相机
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 1, 1000)
camera.position.z = 3
scene.add(camera)

// 控制器
const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true

// 渲染
const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    antialias: true // 消除物体锯齿
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

// 动画
const update = () => {
    // 控制器更新
    controls.update()
    // 渲染更新
    renderer.render(scene, camera)
    // 下一个屏幕帧时继续执行
    window.requestAnimationFrame(update)
}

update()

参考资源： 0008_Fullscreen_and_resizing_哔哩哔哩_bilibili