Three.js와 첫 3D 객체 만들어보기

우연히 지인을 통해 Three.js 를 알게 되었다. 

 

Three.js 는 쉽게 말해 브라우저에 3D 객체를 쉽게 렌더링 되도록 도와주는 자바스크립트 라이브러리이다.

 

WebGL은 3D 랜더링을 위한 일반 개발환경의 OpenGL의 ES 2.0을 바탕으로 웹에서 구동 할 수 있게 제공한 기술로서 Three.js는 WebGL 기술을 기반으로 보다 간편하게 3D프로그래밍을 할 수 있게 해주는 라이브러리라고 생각하면 되겠다. 

https://threejs.org/

위 사이트에 올라가있는 예제들 혹은 사이트들을 보면 나처럼 흥미가 생길 수 밖에 없을 것이다. 

 

 

 

이제 간단한 큐브 모양의 3D객체를 만들어 볼텐데 그러기 위해서는 Three.js를 CDN으로 부르거나 혹은 직접 공식홈페이지에서 다운로드 받아 프로젝트 폴더에 넣어서 호출 할 수도 있다. npm으로 관리해줄 수 있다면 npm install three  로 깔고 import 해주면 된다. 

 

 

압축파일을 보면 build 폴더 안에 three.min.js가 우리가 필요한 파일이다. 

 

 

 

 

여기까지 했는데 콘솔에 에러가 안뜨면 잘 따라오고 있는것이다. 

 

Scene은 컨테이너 같은 개념이라고 보면 된다. 우리가 만들 객체들이 들어갈 공간이라고 쉽게쉽게 생각하면 되겠다. 

 

Scene을 만들었으면 그안에 넣을 3d 큐브를 만들어보자 우선 하나의 객체를 만들 때

 

geometry  +  material  = mesh  식으로 만들어진다. 

 

geometry는 그냥 모양, 형체라고 생각하고,  material은 이제 디자인? 정도로 그리고 그 둘을 묶어서 만들어진 mesh가 직접적인 모델이라고 생각하면 되겠다. 

 

 

그 다음은 Three.js에서 중요한 요소인 camera이다. Three.js로 만들어진 예제를 보면 바로 알 수 있듯이 카메라 즉 보이는 시점을 어떻게 조정하느냐에 따라 너무나도 이쁘고 화려한 느낌을 줄 수 있다. 

 

 

3D 객체와 카메라까지 준비 되었으니 이제 html canvas에 rendering 해주면 된다. 

 

 

 

 

지금 당장은 2D 처럼 보이지만 정면에서 바라보고있기에 그런 거고 카메라 시점을 바꾸어주면

 

 

Camera의 size 부분과 몇군데 부족한 설명이 있는데 좀 더 개념이 명확해지면 그 때 다시 추가 설명을 하겠다.