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

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

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

또 다시 장미 사진입니다.

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

scene을 정의해봅시다.

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

	const Init = () => {
	//위에서 언급한 것들이 순서대로 진행됩니다.
	};
	//페이지가 로드되면 Init 함수가 실행됩니다.
	window.addEventListener("load", Init);

view raw main.js hosted with ❤ by GitHub

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

	// Init 함수의 내부입니다.
	const WIDTH = window.innerWidth,
	HEIGHT = window.innerHeight;
	const scene = new THREE.Scene();

view raw main.js hosted with ❤ by GitHub

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

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

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

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

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