브라우저를 사이즈 조절했을 때 카메라를 변화시키는 것은 매우 간단합니다.
맨 처음 할 것은 event listener를 아래와 같이 등록하는 것입니다.
register event listener in window
window.addEventListener('resize', onResize, false);addEventListener의 인자 3개는
type: 이벤트 타입
listener : 해당 이벤트를 받았을 때 수행될 콜백함수,
(마지막인자는 boolean값으로 올 경우, useCapture을 사용할지말지에 대한 설정입니다.
useCapture은 브라우져가 이벤트를 처리하는 방식인 캡쳐링에 관한 내용이므로 문서로 대신하겠습니다. https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener)
위 이벤트리스너를 등록하면 브라우저 사이즈가 변경될 때마다, onResize를 호출합니다.
function onResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}onResize함수는 위와 같습니다. 스크린의 aspect ratio를 가지고 있는 aspect property를 수정하고
renderer의 사이즈를 변경시켜줍니다.
위와 같이 브라우저 사이즈에 따라 camera와 renderer의 프로퍼리를 조절하는 콜백함수를 이벤트 리스너로 추가해주면 성공적으로 scene의 사이즈도 줄어드는 것을 볼수 있습니다.
기초적인 개발환경 세팅하는 방법을 여기까지 봐왔습니다. 앞으로는 scene을 어떻게 렌더링해갈지를 배워가겠습니다.
Chapter 1 정리
THREE.Scene 객체를 만들고 거기에 camera, light and objects를 추가했습니다.
그리고 기본적인 scene을 확장해서 그림자를 추가하고 animation 효과를 추가해봤습니다.
그리고 몇개의 helper라이브러리들을 추가했고 우리는 dat.GUI를 사용해서 사용자 인터페이스를 컨트롤할수 있게 했습니다. 그리고 마지막으로 frame rate 와 다른 metric들을 통해 피드백을 제공하는 stats.js를 추가했습니다. 다음 챕터부터는 우리가 지금까지 만들었던 기초적인 예제들을 확장해나가겠습니다.
후기: ebook 영문을 해석해서 대부분 요약해서 개인 공부로 정리하고 있었지만 조금 더 이해하고 글을 쓸 필요가 있다고 느끼고 있습니다. ThreeJS doc이 생각보다 간략해서 구글링을 좀더 많이 하고 정리해보겠습니다.
