WebGL / Three.js - 시작하기 ( Getting Started ) #02

Three.JS 를 이용하여 큐브 모양세를 만들어내는 것까지는 확인 했다.

Getting Started 내용을 정리하면 장면을 렌더링하기 위해서는 "첫째, 장면을 준비해야하고, 둘째 카메라를 준비하고, 셋째 개체를 생성하고, 넷째 빛을 준비하여야 한다." 라는 내용으로 정리가 된다. 그럼 실질적으로 어떤 변화가 있을까?

크롬브라우저의 Console 을 이용해 스크립트를 크게 장면초기화, 객체 생성, 렌더링의 3단계로 나누어 확인을 해보기로 했다.

우선 빈 페이지를 준비해서 장면을 초기화 하는 소스를 입력할 준비를 했다.

장면을 초기화 시키는 스크립트를 실행하고 나니 body 안에 canvas 요소가 생성이 된 것을 확인 할 수 있었다. 별도의 하위 엘리먼트 같은거는 존재하지 않는다.

카메라, 객체(오브젝트), 빛 등의 오브젝트를 추가한 상태의 모습이다. 아무런 변화가 없고 단순히 변수나 프로퍼티의 변화만이 일어난 것으로 추정해 볼 수 있다.

최종적으로 렌더링을 실행한 결과 canvas 요소에 큐브가 생성된 것을 확인할 수 있었다. 다만, 큐브가 생성이 되었어도 canvas 요소에 별다른 변화는 없었다. 추정컨데 canvas는 보유한 값을 특정 메모리 주소에 이미지나 픽셀의 형태로 가지고 있을 것이라고 볼 수 있다.

그럼 각각의 객체 생성이나 초기화 함수들은 어떠한 역할을 하는지 확인해봐야할 것 같다.