리사이징

뷰포트 사이즈에 맞추기

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

여기까지만 설정하면 마진+패딩과 스크롤바 문제가 생기므로

* {
	margin: 0;
  	padding: 0;
}

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

html,
body {
	overflow: hidden;
}

css로 화면에 꽉 차게 만들어준다

리사이즈 핸들링

window.addEventListener('resize', () =>
{
    // Update sizes
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight
})

addEventListener로 화면이 resize 될 때 마다 sizes 변수를 업데이트 해준다

window.addEventListener('resize', () =>
{
    // ...

    // Update camera
    camera.aspect = sizes.width / sizes.height
  	camera.updateProjectionMatrix()
})

화면 사이즈가 변경됨에 따라 aspect ratio도 변경되므로 aspect도 업데이트 해주고 그에따라 aspect같은 카메라 프로퍼티를 변경할 때는 projection matrix도 업데이트 해준다

window.addEventListener('resize', () =>
{
    // ...

    // Update renderer
    renderer.setSize(sizes.width, sizes.height)
})

마지막으로 renderer까지 업데이트 해주면 자동으로 캔버스의 넓이와 높이를 업데이트 해준다

pixel ratio 핸들링

대부분의 디바이스는 1과 2사이의 pixel ratio를 가지고 있다
window.devicePixelRatio를 콘솔에 찍어서 해당 기기의 pixel ratio를 확인해 볼 수 있다
2보다 큰 pixel ratio는 대부분 마케팅이며 퍼포먼스 이슈와 배터리를 빠르게 닳게 할 수 있다

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

위 코드를 통해 pixel ratio의 리밋을 정해줄 수 있다

window.addEventListener('resize', () =>
{
    // Update sizes
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight

    // Update camera
    camera.aspect = sizes.width / sizes.height

    // Update renderer
    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})

유저들이 서로 다른 pixel ratio를 가진 여러가지의 스크린을 가지고 있을 때만 pixel ratio의 변화를 감지하면 되므로, resize 콜백 내에 메소드 두 개만 추가해준다

풀스크린 핸들링

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

더블클릭을 했을 때 전체화면 토글하는 코드
진입하기는 canvas에, 빠져나오기는 document에서 하면 된다

그런데 사파리에서는 위 코드가 먹히지 않으므로

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

이 코드를 통해 모든 모던 브라우저에서 작동하게 해줄 수도 있다