携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情 >>
resize事件
resize事件是在浏览器窗口大小发生变化时触发，利用该事件可以跟踪窗口大小的变化来动态调整页面元素的显示。
window.addEventListener('resize', () => {
// 监听浏览器窗口的resize事件
console.log("window has been resized");
// Update sizes 更新canvas画布尺寸
sizes.width = window.innerWidth;
sizes.height = window.innerheight;
// Updata camera 更新相机属性
camera.aspect = sizes.width / sizes.height;
// 自适应
camera.updateProjectionMatrix();
// Update renderer
renderer.render(sizes.width, sizes.height);
})
window.devicePixelRatio 当前设备像素比
它是设备上物理像素和设备独立像素( device-independent pixels (dips) )的比例，即：devicePixelRatio = 屏幕物理像素/设备独立像素。
Window接口的devicePixelRatio返回当前显示设备的物理像素分辨率与CSS像素分辨率之比。 此值也可以解释为像素大小的比率：一个CSS像素的大小与一个物理像素的大小。 简单来说，它告诉浏览器应使用多少屏幕实际像素来绘制单个CSS像素。
我们日常所需的像素比最大为2，更大就没有什么必要了。
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
// 所以，最小值为1.25，最大为2
// console.log(window.devicePixelRatio); // 1.25
dblclick 双击全屏事件
当双击元素时，会发生 dblclick 事件。
Fullscreen介绍
让你可以简单地控制浏览器，使得一个元素与其子元素，如果存在的话，可以占据整个屏幕，并在此期间，从屏幕上隐藏所有的浏览器用户界面以及其他应用。
| API | 作用 |
|---|---|
| document.fullscreenElement 属性 | 被展示为全屏模式的element元素 |
| document.requestFullscreen() 方法 | 让当前文档进入全屏模式，要做好兼容前辍处理 |
| document.exitFullscreen() 方法 | 让当前文档退出全屏模式，跟requestFullscreen一样要做好兼容前辍处理 |
// 双击事件
// Safari不支持
window.addEventListener("dblclick", () => {
// console.log("double click");
const fullscreenElement = document.fullscreenElement || document.webKitFullscreenElement;
if (!fullscreenElement) {
// 双击全屏
canvas.requestFullscreen()
// console.log("go fullscreen");
} else {
// 再次双击退出全屏
document.exitFullscreen();
// console.log("leave fullscreen");
}
})
Safari支持的情况也可以做，但是相对比较复杂：
// Safari支持做法↓：
window.addEventListener("dblclick", () => {
// 双击全屏
canvas.requestFullscreen();
} else if (canvas.webKitRequestFullscreen) {
canvas.webKitRequestFullscreen();
}
} else {
// 再次双击退出全屏
if (!document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webKitRequestFullscreen) {
document.webkitExitFullscreen();
}
}
})
