THREE.js学习笔记5——FullScreen and Resizing

这一小节学习Fullscreen and Resizing
将THREE.js渲染的结果铺满整个屏幕，以及避免出现蓝色边框和超过画面限制的滚动

renderer.setSize(window.innerWidth, window.innerHeight)

* {
  padding: 0;
  margin: 0;
}
body {
    overflow: hidden;
}

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

解决画面大小更新之后，THREE.js渲染的画面不会自动刷新的问题。

const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}
addEventListener('resize', (event) => {
    //更新宽高
    sizes.width = window.innerWidth;
    sizes.height = window.innerHeight;
    //更新相机
    camera.aspect = sizes.width / sizes.height;
    //重新渲染
    camera.updateProjectionMatrix();
    renderer.setSize(sizes.width, sizes.height)
})

解决像素比

有时候我发现我渲染出来的立方体具有锯齿状的边缘，如何解决？
如果在边缘看到模糊的渲染，是因为在像素比大于1的屏幕上进行测试。
像素比就是一个像素单位在屏幕上有多少物理像素。
要获取当前设备的像素比，我们可以使用window.devicePixelRatio，要相应更新渲染器，我们可以使用renderer.setPixelRatio(...)

//更改像素比
const PixeRatio = window.devicePixelRatio;
renderer.setPixelRatio(devicePixelRatio)

如果在一些像素比达到了5以上的显示器上运行这段代码，就会有些卡顿，可以以像素比2为限制

renderer.setPixelRatio(Math.min(PixeRatio, 2))

同时，也可以将这两行代码放入resize函数中，以便于适应有多个屏幕同时使用的情况

addEventListener('resize', (event) => {
    //更新宽高
    sizes.width = window.innerWidth;
    sizes.height = window.innerHeight;
    //更新相机
    camera.aspect = sizes.width / sizes.height;
    //重新渲染
    camera.updateProjectionMatrix();
    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})

双击进入全屏

添加双击事件监听器
要进入全屏模式，请在相关内容上使用requestFullscreen()，也就是<canvas>元素
退出全屏，则使用document.exitFullscreen()

addEventListener('dblclick', (event) => {
    const testDiv = document.querySelector('.test');
    if (!document.fullscreenElement && testDiv) {
        testDiv.requestFullscreen()
    } else {
        document.exitFullscreen()
    }
})