이전부터 HTML5 Canvas에 관심이 많았지만 굉장히 low level의 API에 압도당해서
너무 힘들것같아서 포기했다. 하지만 이번에 Three.js 라는 WebGL을 사용하는 웹기반의 3D 렌더링을 제공해주는 라이브러리를 보고 다시 공부해야겠다고 마음먹고 공부를 시작하려고 합니다.

https://threejs.org/

공식 홈페이지에 아주 화려한 예제들이 많습니다. 하지만 좀 간단해보이는 예제들도 코드가 짧지 않습니다. 3D 그래픽을 표현하기에는 굉장히 많은 공부가 필요함을 느꼈습니다. 그래서 packtpub 에서 제공하는 eBook을 구매해서 공부를 시작해보려고합니다.

블로그에 쭉 기록해보겠습니다. 나중에는 ReactJS 와 연결해서 데이터 시각화 툴을 한번 만들어보는 것이 최종목표입니다.

개발환경은 vscode를 주로사용할 예정입니다. 그리고
http://c9.io 라는 클라우드 기반 자바스크립트 에디터를 책에서 소개하는데 한번 사용해보려고 합니다. 그리고 Three.js 에서 제공하는 https://threejs.org/editor/ 기능도 참고해서 공부 중 사용할 예정입니다. 바로바로 눈에 보여서 도움이 많이 될 것 같습니다.

사용할 브라우저는 Chrome을 사용할 것입니다. 크롬을 사용하는 이유는 WebGL의 많은 지원과 좋은 성능 그리고 훌륭한 JS debugger를 제공해주기 때문입니다.
보고 있는 eBook에서 Chrome 디버거를 이용해서 할 수 있는 많은 팁을 정리해서 기록할 예정입니다.

예제 repository : https://github.com/josdirksen/learning-threejs-third

추가적으로 예제를 돌려볼 때는 http-server npm package 를 사용할 것입니다.

npm install -g http-server 
http-server // 실행

Creating the HTML skeleton