[Three] 윈도우 크기에 따라 반응형으로 만들기

아무 이벤트도 설정하지 않고 three.js의 캔버스를 랜더링하면,

 

창의 크기가 변해도 캔버스는 크기가 변하지 않습니다.

 

원본이 이렇게 보인다고 할 때

이렇게 한 번 개발자모드를 켜도 캔버스는 그대로 있습니다.

만약 창의 크기가 바뀔 때 마다 캔버스도 그 비율에 맞추어 랜더링하고자 한다면,

 

화면의 크기가 바뀔 때 마다('resize' 이벤트) 실행되는 event handler를 만들어,

 

window 객체의 너비(=innerWidth)와 높이(=innerHeight)를 받아와 계산하면 됩니다.

window.addEventListener('resize', () => {
    // 1. camera 종횡비 갱신
    camera.aspect = window.innerWidth / window.innerHeight;
    // 2. camera 사영 행렬 갱신
    camera.updateProjectionMatrix();
    // 3. renderer 종횡비 갱신
    renderer.setSize(window.innerWidth, window.innerHeight);
});

이렇게 하면 여기서

창의 크기가 바뀌어도 화면 비율이 유지됩니다.