【Three.js基础学习】3.Fullscreen and resizing

本文链接：https://blog.youkuaiyun.com/weixin_41722662/article/details/137098604

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

课程要点

1.样式问题，画布占满全屏

2.屏幕尺寸更改，画布实时自适应

3.像素比概念，即是指相同像素下如100，能展示更多像素 200/100 则像素比2 越大则内容展示越清晰

// updateProjectionMatrix() // 更新相机

// setPixelRatio() // 设置当前设备像素比，能获得更好的画质，但是会有性能问题 // 参数最小1 最大2

// window.devicePixelRatio // 获取当前设备的像素比

4.双击全屏和取消全屏

requestFullscreen , exitFullscreen

一、实现代码

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

/* 
    课程要点
    1.样式问题，画布占满全屏
    2.屏幕尺寸更改，画布实时自适应
    3.像素比概念，即是指相同像素下 如100，能展示更多像素 200/100 则像素比2 越大则内容展示越清晰
    // updateProjectionMatrix() // 更新相机
    // setPixelRatio() //  设置当前设备像素比，能获得更好的画质，但是会有性能问题 // 参数 最小1 最大2
    // window.devicePixelRatio // 获取当前设备的像素比
    4.双击全屏 和 取消全屏
    requestFullscreen , exitFullscreen
*/

/**
 * Base
 */
// Canvas
const canvas = document.querySelector('canvas.webgl')

// Scene
const scene = new THREE.Scene()

/**
 * Object
 */
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

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

window.addEventListener('resize',(event)=>{
    // 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)
})

window.addEventListener('dblclick',()=>{
    // 判断当前是否是全屏 不是则null
   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()
        }
        
    }
    console.log(document.fullscreenElement)
})

/**
 * Camera
 */
// Base camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
camera.position.z = 3
scene.add(camera)

// Controls
const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true

/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio),2)
/**
 * Animate
 */
const clock = new THREE.Clock()

const tick = () =>
{
    const elapsedTime = clock.getElapsedTime()

    // Update controls
    controls.update()

    // Render
    renderer.render(scene, camera)

    // Call tick again on the next frame
    window.requestAnimationFrame(tick)
}

tick()

*{
    margin: 0;
    padding: 0;
}

html,
body{
    overflow: hidden;
}

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

二、知识点

1.样式

我们希望能够实现中间的three.js展示出来的界面占满整个窗口，同时能自适应；因此在设置完css代码之后，应该监听resize,同时获取innerWidth，innerHeight，放到 sizes中，

camera.aspect = sizes.width/sizes.height // 宽高比

camera.updateProjectionMatrix() // 相机更新投影矩阵，假设不更新，就会导致在拖拽窗体时canvas内部物体显示，发生形变如图，只有相机更新，才能实时展示对应的画面，不然还是之前的视角

renderer.setSize(sizes.width,sizes.height)

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

完成之后应该在通过渲染器，重新渲染页面，如果不写，就会发现，窗口变小，视野变小，但是物体不变，没有随窗口大小，而自适应显示到页面上如图

若都不设置就无法自适应,初始化拖拽之后，会发现有空白区域

2.像素比

像素比的概念：

相同数量的像素展示更多的像素，有点绕口，举个例子：屏幕只有100,像素，但是像素比很高，例如是2 ，那么就相当于 200/100，即在屏幕一个像素上面，划分成两个像素点；展示更清晰。

renderer.setPixelRatio(Math.min(window.devicePixelRatio),2) // 设置当前设备像素比，会有性能问题

参数最小1 最大2 ，数值随意，Math.min(window.devicePixelRatio),2

其中window.devicePixelRatio是获取当前设备像素比

3.像素比

双击全屏和取消全屏

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()
        }
        
    }