직접 만들면서 배우는 Three.js

ep.0 | 직접 만들면서 배우는 Three.js - 시작하면서...

이도울 2022. 2. 15. 12:14
SMALL

시작하면서...

꾸준함은 똑똑함을 이긴다는 말이 있다. 똑똑하지 못한 탓에 내가 잘할 수 있는 것을 꾸준하게 기록하고, 더 나아가, 지식을 누군가에게 계속해서 나누고 싶다. 나의 기록이 어디선가 큰 힘이 되기를 바라며 앞으로 1주일에 1회 이상 Three.js와 관련한 강의를 업로드해보고자 한다.

 

Three.js란?

Three.js란 웹 브라우저에서 3차원 컴퓨터 그래픽스 애니메이션 응용을 만들고 표현하기 위해 사용되는 자바스크립트 라이브러리이자 API다. 오픈 소스 프로젝트로 깃허브에 공개되어 있다. 


학부 Computer Graphics 수업을 통해 접하게 된 Three.js

Three.js를 처음 다룬 것은 작년 1학기 학부에서 Computer Graphics를 수강하면서다. 3D 기반의 웹 프로젝트를 제작하는 수업이었는데, Three.js에 관심이 생겨 후반부 과제를 모두 Three.js로 만들게 되었다.

Three.js로 만든 3D 웹 프로젝트들(일부 P5.js가 섞여있긴하지만..)

Computer Graphics 수업의 묘미는 학생들이 제출한 프로젝트 중 매주 Best Works를 뽑는 것인데, 한 두번을 제외하고는 계속 선정되어서 기분이 좋았다. :) :) :) 제작한 프로젝트들은 인스타 작업계정에서 볼 수 있다. 

 

또한 최근 학과 컨퍼런스에서 출품한 프로젝트 Permo도 Three.js로 제작하였다. 안무가의 움직임 깊이 데이터를 Kinect로 기록한 뒤에, Three.js로 만든 웹으로 시각화시킨 프로젝트였다. 아카이빙


왜 Three.js인가?

Three.js로 제작된 인터렉티브 3D 웹

 

Three.js의 장점은 많이 사용한다는 것이다. 이 링크의 프로젝트들만 봐도 많은 웹사이트에서 3D 그래픽을 표현하기 위해 사용하고 있음을 알 수 있다. 하지만 Three.js를 한국어로 공부할 수 있는 자료가 많이 없어서, 만들어보면 좋겠다고 생각했다. Three.js는 P5.js보다 어렵고, Web과 Javascript에 대한 이해를 필수로 한다. 하지만 이해 못할 정도는 아니다. 그렇기 때문에 차근차근 지식을 풀어나가고, 추후에는 게시물을 필두로 책을 만들어보고 싶다. 이 강의는 지난 학기 Three.js를 다루고, 더 나아가, 산학협력 프로젝트와 컨퍼런스까지 Three.js로 제작했던 필자의 경험을 담은 강의가 될 것이다. 이 초라한 블로그에 찾아와주어서 이 게시물을 보고 있는 사람이 있다면 댓글과 하트를 눌러주면 좋겠다.ㅎㅎ


처음 프로젝트 시작하기

우선 수강대상은 Three.js를 처음 접하고, Web에 대한 기초가 있는 사람을 대상으로 진행한다. Web 기초도 모른다고 해서 강의를 따라오지 못한다는 것은 아니다. Html CSS Javascipt에 대한 지식이 없어도, IDE를 설치하지 못하였어도, 프로젝트를 제작하는 과정을 세세하게 기록해보고자 한다.

LIST