three.module.js 파일을 다운로드하기 위해서는 Three.js 사이트에서 three.js-master.zip 파일을 다운로드하거나 GitHub에서 파일을 직접 다운로드하면 됩니다.
three.module.js 파일만 사용할 거면 GitHub에서 파일을 직접 다운로드하는 것이 간편하고 빠릅니다.
다운로드하여 스크립트 모듈로 불러오기
1. Three.js 사이트(https://threejs.org/)에서 왼쪽 메뉴에 있는 download를 클릭하여 three.js-master.zip 파일을 다운로드합니다.
다운로드한 three.js-master.zip 압축 파일을 풉니다.
2. Three.js를 Script으로 불러와 개발하기 위해 폴더를 생성합니다. 저는 "C:\workspaces\webstudys\myworld3" 폴더를 생성하였습니다. 생성된 프로젝트 폴더에 scripts 폴더를 생성합니다.
3. three.js-master.zip 압축 파일을 푼 폴더에서 three.js-master\build 폴더에 있는 three.module.js 파일을 scripts 폴더로 복사합니다.
저는 "C:\workspaces\webstudys\myworld3\scripts 폴더로 복사하였습니다.
또는 GitHub에서 three.module.js 파일을 직접 받을 수 있습니다.
https://github.com/mrdoob/three.js/blob/dev/build/three.module.js
오른쪽에 있는 More file actions("...") 버튼을 눌러 Download를 클릭합니다.
그러면 다운로드됩니다.
다운로드한 three.module.js 파일을 scripts 폴더로 복사합니다.
4. Visual Studio Code의 메뉴 File(파일) > Open Folder...(폴더 열기)를 클릭하거나 Ctrl 키를 누를 상태에서 K, O를 이어서 누릅니다. (Ctrl + K, Ctrl + O) 그리고 "C:\workspaces\webstudys\myworld3" 폴더로 이동하고 "폴더 선택" 버튼을 누르면 폴더가 오픈됩니다.
보안을 위해 Trust(신뢰) 확인 창이 나타납니다. "Yes, I Trust the authors" 버튼을 누릅니다. 그리고 Welcome(시작) 창은 닫습니다.
5. index.html 파일을 생성하기 위해서 EXPLORER(탐색기)의 MYWORLD3을 선택하고 첫 번째 아이콘(New File...(새 파일))을 클릭하고 입력란에 "index.html"를 입력하고 Enter 키를 눌러 파일을 생성합니다. 그리고 에디터에서 "!"를 입력하고 Enter 키를 누릅니다.
또는 에디터에서 "html:5"를 입력하고 Enter 키를 누릅니다.
그러면 자동으로 HTML5 형식으로 만들어집니다.
에디터에서 <html> 태그에 있는 "lang" 속성은 제거합니다. 그리고 <title> 태그에 있는 "Document"를 제거하고 "My first three.js app"로 입력합니다. 그리고 <style> 태그를 추가합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
</body>
</html>
6. three.module.js 파일을 불러오기 위해서 스크립트의 module을 추가합니다.
<script type="module" src="scripts/three.module.js"></script><script type="module">은 자바스크립트 모듈(JavaScript module)을 가져오게 합니다.
그리고 <body> 태그 안에 개발을 위한 자바스크립트를 추가합니다.
<script type="module" src="scripts/main.js"></script>
7. main.js 파일을 생성하기 위해서 EXPLORER(탐색기)의 scripts를 선택하고 첫 번째 아이콘(New File...(새 파일))을 클릭하고 입력란에 "main.js를 입력하고 Enter 키를 눌러 파일을 생성합니다. 그리고 import를 통해 three.module.js 모듈을 가져오게 하고 저장합니다.
import * as THREE from './three.module.js';
탐색기에서 index.html 파일을 더블 클릭하여 웹 브라우저에서 실행할 수 있지만 스크립트 모듈들이 보안상의 이유로 정상적으로 작동되지 않을 수 있습니다. 그래서 웹 서버를 통해 실행하는 것이 좋습니다.
웹 서버로 실행하는 방법으로 라이브 서버(Live Server)를 사용하면 됩니다.
라이브 서버(Live Server)로 실행
라이브 서버(Live Server)의 다운로드 및 설치에 대한 자세한 설명은 "VSCode 웹 서버 설치, 포트 변경 - 라이브 서버(Live Server)" 참고하시기 바랍니다.
1. index.html 파일에서 마우스 오른쪽 버튼을 눌러 콘텍스트 메뉴에서 "Open with Live Server"를 클릭합니다.
또는 index.html 파일 편집기에서 마우스 오른쪽 버튼을 눌러 콘텍스트 메뉴에서 "Open with Live Server"를 클릭합니다.
2. 기본 브라우저로 설정된 웹 브라우저가 실행됩니다.
localhost(로컬호스트, IP가 127.0.0.1)로 포트번호 5500으로 웹 서버가 실행됩니다. (저는 포트번호를 9000으로 변경하였습니다.)
빈 페이지가 나올 겁니다. 아직 코드가 없어 내용이 없습니다. 정상적으로 three.js 모듈이 로드된 겁니다.
이어서 Scene, Geometry, Camera, Renderer를 사용하여 3D를 만들어 보겠습니다.
참고로, OrbitControls과 GLTFLoader와 같은 모듈들은 별도로 가져와야 합니다.
three.js-master.zip 압축 파일을 푼 폴더에서 three.js-master\examples\jsm 폴더에서 모듈들을 찾을 수 있습니다.
OrbitControls은 three.js-master\three.js-master\examples\jsm\controls 폴더에서 OrbitControls.js 파일입니다.
GLTFLoader은 three.js-master\three.js-master\examples\jsm\loaders 폴더에서 GLTFLoader.js 파일입니다
GitHub에서도 파일을 직접 받을 수 있습니다.
https://github.com/mrdoob/three.js/tree/dev/examples/jsm에서 모듈들을 찾을 수 있습니다.
OrbitControls은 https://github.com/mrdoob/three.js/blob/dev/examples/jsm/controls/OrbitControls.js
GLTFLoader은 https://github.com/mrdoob/three.js/blob/dev/examples/jsm/loaders/GLTFLoader.js