three.js 환경 구축하기

three.js 라이브러리를 다운로드 받아봅시다.

공식 홈페이지에서 다운로드를 누르면 three.js - master 폴더를 다운로드 하게 됩니다. 300MB가 넘는 크기인데, 저희가 처음에 만들 튜토리얼에서는 사용하지 않는 것들이 많기 때문에 일단은 minified를 사용하도록 하겠습니다.

three.min.js 소스코드 보기

해당 소스코드는 공식홈페이지 > source code를 누르시면 깃허브로 이동하게 되고, README에 나타나 있습니다. 직접 가셔서 소스코드를 보셔도 되고 간편하게 위의 링크를 클릭해주셔도 됩니다.

마우스 오른쪽 버튼을 클릭하고 "다른 이름으로 저장"을 누르면 three.min.js 로 저장할 수 있습니다. 해당 파일을 우리의 튜토리얼 폴더로 옮겨주세요.

three-tutorial

-index.html

-three.min.js

-main.js

저는 파일 구성이 이렇게 되어있습니다.

index.html 파일의 소스코드입니다. 이렇게 파일 구성이 끝났으면 이제 three.js를 시작할 준비가 모두 다 된 것입니다. 다음 포스팅부터는 main.js에 튜토리얼을 하나씩 진행시켜 보도록 하겠습니다.

시작은 minified로 하지만 나중에 이벤트 등을 추가할 때는 라이브러리 전체를 다운로드 받아주셔야 합니다. 첫 튜토리얼에서는 minified로만 진행을 합니다.