three.js의 scene을 정의하는 것부터 시작해봅시다.

우리가 정의할 것들을 다시 한번 생각해봅시다.

three.js에 대해서 설명할 때 우리가 필요한 것들을 모두 정의한 후에 그냥 렌더링 하면 된다고 했었습니다. 그 상황을 다시 되짚어 볼까요?

또 다시 장미 사진입니다.

오브젝트 들이 있어야 하는 장소(장미 꽃이 있는 장소), 오브젝트(장미꽃, 나무줄기, 잎), 장미를 비추는 빛, 우리의 시선 및 카메라가 필요하고, 그것들을 다 정의한 후에 렌더링 하면 된다고 했었습니다. 각각의 것들이 three.js에서는 순서대로 scene, mesh, light, camera랑 매치된다고 했었죠. 이것들만 기억하면 그 다음부터는 그냥 정의하면 됩니다.

scene을 정의해봅시다.

모든 것은 Init 함수안에 순서대로 정의할 예정입니다. 그리고 페이지가 로드되면 Init 함수가 실행되도록 이벤트를 지정해 주도록 하겠습니다.

코드를 보니 아주 간단한 구조라서 바로 이해되시죠? 그리고 따로 생각한 크기가 없으므로, 페이지의 전체 width와 height를 캔버스의 크기로 사용할 예정입니다. 즉 브라우저 전체 화면을 다 사용할 것이라는 말이죠. 그래서 맨 처음은 브라우저의 width와 height를 가져와서 변수에 넣어주시면 됩니다. 그리고 three.Scene을 생성자로 생성해주시면 됩니다.

scene을 생성하는 것이 아주 간단하죠? scene만 정의해도 상관없지만 우리의 예제에서는 뒤에 색이 있습니다. rgb(129, 236, 236)이지만 보통 three에서는 16진수로 색을 전달합니다.

scene.background = new THREE.Color(0x81ecec);

이렇게 scene에 배경색을 전달해주시면 됩니다. 공식 문서를 보시면 fog(안개)도 전달할 수 있습니다. 이번 예제에서는 사용할 일이 없으니 간단히 언급만 하고 넘어가도록 하겠습니다.

지금은 이해되지 않으실 수도 있지만 나중에 정의하는 것(오브젝트, 빛, 카메라)들을 이 scene에 추가해주셔야 합니다. 하지만 카메라의 경우 꼭 추가하지 않으셔도 자동으로 추가되기 때문에 추가하지 않도록 하겠습니다. 

다음 포스팅에서는 카메라를 추가해보도록 하겠습니다.