고대하던 three.js 와의 첫 만남

꼭 만나고 싶었습니다

HTML을 처음 배우기 시작했던 작년 여름, 해외 웹사이트들을 눈팅하다가 한눈에 반해버렸던 2D/3D WebGL 라이브러리 - three.js 🤩
시각적인 결과물을 내는 작업을 좋아하는 나에게는 아주아주 매력적인 도전 과제였다.

현란한 애니메이션과 3D 요소들이 너무 복잡하고 어려워보여서 도전을 망설이고 있다가 오늘 드디어 첫 개시! 계속 미루다보면 시작하기 어려워질 것 같아서 일단 documentation이라도 읽어보자는 마음으로 첫 작업을 해보았다.

three.js의 필수 3 요소 - 1. SCENE, 2. CAMERA, 3. RENDERER

과연 어떻게 저런 화면을 코드로 구현해낼 수 있을까 항상 궁금했었는데, 원리를 쪼개서 보니 더더욱 흥미롭다. 씬과 카메라라는 단어가 나오니 다시 영상편집하고 싶어서 근질근질하기도 하고😗

documentation은 아쉽게도 영어와 중국어만 제공되지만, 워낙 설명이 이해하기 쉽게 잘 되어있어서 쉽게 따라해볼 수 있었다.

그렇게 만들어낸 첫 결과물은?

documentation 코드 그대로 따라해 본 심플한 정육면체 애니메이션이지만 너무 신기하고 귀엽다 ㅋㅋㅋ 🦔 다음엔 선 하나 그리고 그 다음엔 동그라미 그리고... 뭐 그러다 눈 떠보면 awwwards 노미네이트 되고 그런 거 아니겠어요?

포트폴리오에 playground 섹션에 three.js로 미니 프로젝트 하나 넣어야겠다. 신난다