웹사이트에서 3D를 자유자재로?! – Three.js 강좌

안녕하세요. 드디어 Three.js 강좌를 시작합니다. three.js란 웹페이지에 3D 객체를 쉽게 렌더링하도록 도와주는 자바스크립트 라이브러리입니다.

three.js 웹사이트 – https://threejs.org/
VS Code 웹사이트 – https://code.visualstudio.com/

웹사이트를 더욱 멋있게 생동감 있게 표현할 수 있는 기술이라서 평소에 3D툴을 다룰 줄 알거나 3D 인터렉션에 대해 관심있는 분들은 공부하셔도 좋을 것 같습니다.
three.js를 코드로 사용할 수 있도록 설치부터, three.js의 기본 구조를 파악하고, 간단한 도형을 불러오는 것부터, 빛을 불러오고, 질감을 입히고, 카메라를 세팅하고, 간단한 애니메이션도 적용해볼게요. 그리고 스크롤이나 마우스 오버, 클릭 등의 이벤트를 통한 인터렉션을 구현하는 방법도 당연히 배워보는게 좋겠죠?!
추가로 시포디나 블렌더 등의 3D툴로 작업한 3D 파일을 three.js에서 제공하는 loader를 통해 불러오는 것까지 해볼게요.

*디자인 베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커맨드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요.

핵심 요약

우리가 배우고자 하는 three.js는 입문자에게 난이도가 조금 있는 기술이라서 충분한 학습 기간을 두고 인내심을 가진 상태에서 배우시는 걸 추천드립니다.
이 강좌를 원활하게 배우고자 한다면 HTML, CSS는 당연히 알고 있어야 하고, javascript의 기본적인 문법은 알아야 합니다.

저도 다양한 언어나 프레임워크 이곳저곳에 기웃거려본 경험이 있는 디자이너라서 공감합니다.(위에 기술들은 디자이너 치고 나름 오래 공부한 것들이고 자잘한 것들은 다 뺐습니다… 삽질 마스터)
그래서 최대한 디자이너 입장에서 코딩을 즐길 수 있도록 제 지식을 공유하는 걸 목표로 삼고 있습니다. 제가 기웃거렸던 여러 언어 중에 그나마 최근에 제가 관심을 가지고 공부하기 시작했던 부분은 웹상에서 이렇게 3D로 표현하는 것이었습니다. 단순히 2D 혹은 영상으로도 표현이 가능하지만 3d를 다룰 줄 아는 분이거나 그걸 웹사이트에서 자유롭게 표현하고 싶은 분들에게는 매력적인 기술이에요.

Three.js가 이번이 3번째 개발 지식을 공유하는 강좌네요. Lottie.js가 궁금하신 분들은 Lottie.js 강좌도 올라가 있으니 보셔도 좋을 것 같습니다.