[Three.js] Three.js 시작하기(2) : renderer, camera 설정

# Three.js 시작하기 (1)

[Three.js] Three.js 시작하기 (1)

---

# renderer,camera 설정

* 기존 코드의 문제점

- 영상에서 보이듯 창을 줄이면 오브젝트가 사라짐

- 개발자 도구를 열고 새로고침 후 개발자 도구 닫으면 renderer 크기가 제대로 안잡힘

* 해결 방법

- 크기가 변경될 경우 이벤트 리스너를 걸어서 Camera, renderer 설정을 다시 잡아줌

# main.js

// 크기가 변경될 경우의 이벤트 리스너 추가
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;     // 카메라 가로 세로 비율 재설정
    camera.updateProjectionMatrix();                            // 카메라를 재설정하면 무조건 해줘야함
    renderer.setSize(window.innerWidth, window.innerHeight);    // renderer 사이즈 재설정
    renderer.render(scene, camera);                             // renderer 재설정
})

- 변경된 크기에 따라서 오브젝트가 잘 출력되는 것을 볼 수 있음