티스토리 뷰
three.js 라이브러리를 다운로드 받아봅시다.
공식 홈페이지에서 다운로드를 누르면 three.js - master 폴더를 다운로드 하게 됩니다. 300MB가 넘는 크기인데, 저희가 처음에 만들 튜토리얼에서는 사용하지 않는 것들이 많기 때문에 일단은 minified를 사용하도록 하겠습니다.
해당 소스코드는 공식홈페이지 > source code를 누르시면 깃허브로 이동하게 되고, README에 나타나 있습니다. 직접 가셔서 소스코드를 보셔도 되고 간편하게 위의 링크를 클릭해주셔도 됩니다.
마우스 오른쪽 버튼을 클릭하고 "다른 이름으로 저장"을 누르면 three.min.js 로 저장할 수 있습니다. 해당 파일을 우리의 튜토리얼 폴더로 옮겨주세요.
three-tutorial
-index.html
-three.min.js
-main.js
저는 파일 구성이 이렇게 되어있습니다.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge" /> | |
| <title>Three</title> | |
| <script src="three.min.js"></script> | |
| <script src="main.js"></script> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| overflow: hidden; | |
| } | |
| </style> | |
| </head> | |
| <body></body> | |
| </html> |
index.html 파일의 소스코드입니다. 이렇게 파일 구성이 끝났으면 이제 three.js를 시작할 준비가 모두 다 된 것입니다. 다음 포스팅부터는 main.js에 튜토리얼을 하나씩 진행시켜 보도록 하겠습니다.
시작은 minified로 하지만 나중에 이벤트 등을 추가할 때는 라이브러리 전체를 다운로드 받아주셔야 합니다. 첫 튜토리얼에서는 minified로만 진행을 합니다.
'Frontend-dev > HTML-CSS-JS' 카테고리의 다른 글
| [three.js] camera 설정하기 (0) | 2018.12.21 |
|---|---|
| three.js의 scene을 정의하는 것부터 시작해봅시다. (0) | 2018.12.21 |
| three.js 배워보기 (0) | 2018.12.20 |
| 로컬스토리지(local storage)를 이용해서 데이터를 저장해봅시다. (0) | 2018.11.22 |
| css 그리드로 간단한 페이지 만들어보기 (0) | 2018.11.02 |