Frontend-dev/HTML-CSS-JS
three.js 환경 구축하기
RunningWater
2018. 12. 20. 16:34
three.js 라이브러리를 다운로드 받아봅시다.
공식 홈페이지에서 다운로드를 누르면 three.js - master 폴더를 다운로드 하게 됩니다. 300MB가 넘는 크기인데, 저희가 처음에 만들 튜토리얼에서는 사용하지 않는 것들이 많기 때문에 일단은 minified를 사용하도록 하겠습니다.
해당 소스코드는 공식홈페이지 > source code를 누르시면 깃허브로 이동하게 되고, README에 나타나 있습니다. 직접 가셔서 소스코드를 보셔도 되고 간편하게 위의 링크를 클릭해주셔도 됩니다.
마우스 오른쪽 버튼을 클릭하고 "다른 이름으로 저장"을 누르면 three.min.js 로 저장할 수 있습니다. 해당 파일을 우리의 튜토리얼 폴더로 옮겨주세요.
three-tutorial
-index.html
-three.min.js
-main.js
저는 파일 구성이 이렇게 되어있습니다.
index.html 파일의 소스코드입니다. 이렇게 파일 구성이 끝났으면 이제 three.js를 시작할 준비가 모두 다 된 것입니다. 다음 포스팅부터는 main.js에 튜토리얼을 하나씩 진행시켜 보도록 하겠습니다.
시작은 minified로 하지만 나중에 이벤트 등을 추가할 때는 라이브러리 전체를 다운로드 받아주셔야 합니다. 첫 튜토리얼에서는 minified로만 진행을 합니다.