Three.js journey | Fullscreen and resizing

July 17, 2023

resize

Resize 이벤트를 활용하여 resize를 할 수 있습니다.

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

window.addEventListener('resize',()=>{
    console.log('window has been resized')
    
    //Update sizes
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight
    
    //Update camera
    camera.aspect = sizes.width/size.height
    camera.updateProjectionMatrix()
    //Update renderer
    renderer.setSize(sizes.width,sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio,2))
})

현재 pixel ratio를 알고 싶으면 window.devicePixelRatio를 사용하면 됩니다. rerender를 업데이트하기 위해서는 rerender.setPixelRatio()를 사용할 수 있습니다.

Handle Full screen

dbclick 이벤트로 fullscreen mode로 만들 수 있습니다.

window.addEventListener('dblclick',()=>{
if(!document.fullsceenElement){
    console.log('go fullscreen')
}
else {
    if(document.exitFullscreen){
        document.exitFullscreen()
    }
    else if(document.webkitExitFullscreen){
        document.webkitExitFullscreen()
    }
}
})

canvas element에서 fullscreen mode로 가고 싶다면 requestFullscreen()을 사용하면 됩니다.

window.addEventListener('dblclick',()=>{
if(!document.fullsceenElement){
  canvas.requestFullscreen()
}
else {
    document.exitFullscreen()
}
})

그러나, safari에서는 위 코드가 먹히지 않습니다. 그래서 safari에서도 가능하게 하려면 아래와 같이 작성할 수 있습니다.

window.addEventListener('dblclick',()=>{
    
    const fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement
if(!fullscreenElement){
    if(canvas.requestFullscreen) {
        canvas.requestFullscreen()
    }
   else if(canvas.webkitRequestFullscreen) {
       canvas.webkitRequestFullscreen()
    }
}
else {
    document.exitFullscreen()
}
})

Written by@굥

기록하는 것을 좋아하는 프론트엔드 개발자👩🏻‍💻

GitHub LinkedIn