// 修改画布尺寸 原先为 800 * 600
// Sizes
const sizes = {
width: window.innerWidth,
height: window.innerHeight
}
// 监听窗口大小改变
window.addEventListener('resize', () => {
// Update sizes
sizes.width = window.innerWidth
sizes.height = window.innerHeight
// update camera
camera.aspect = sizes.width / sizes.height
camera.updateProjectionMatrix() // 更新camera投影矩阵
// Update renderer
renderer.setSize(sizes.width, sizes.height)
})
-
Handle pixel ratio
-
window.devicePixelRatio设备像素比, 有时候我们看到的渲染是不清晰的，有锯齿边的，通常因为我们使用的显示器像素比是大于1的
// Render
const renderer = new THREE.WebGLRenderer({})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio))
document.body.appendChild(renderer.domElement)
// 双击全屏
window.addEventListener('dblclick', event => {
const fullScreenElement = document.fullscreenElement // 全屏元素
if (fullScreenElement) {
document.exitFullscreen()
} else {
renderer.domElement.requestFullscreen()
}
})
