프로젝트 구조
three.js 프로젝트를 제작하기 위해선 최소 HTML 파일 하나와 three.js 코드를 실행하기 위한 JavaScript 파일이 필요하다. 아래의 구조와 네이밍을 똑같이 할 필요는 없으나, 설명을 위해 해당 카테고리에서 사용할 예정이다.
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script type="module" src="/main.js"></script>
</body>
</html>- main.js
import * as THREE from 'three';
...- public/
- public / 폴더에 있는 파일은 변경되지 않은 채 바로 웹사이트에 푸시되기 때문에 보통 텍스처, 오디오, 3D 모델이 여기에 들어간다.
이제 기본 프로젝트 구조를 설정했으므로 로컬에서 프로젝트를 실행하고 웹 브라우저를 통해 액세스 해보자. 설치 및 로컬 개발은 npm과 빌드 도구를 사용하거나 CDN에서 three.js를 가져오는 두 방법에 대해 모두 설명해보겠다.
옵션 1: NPM 및 빌드 도구로 설치
개발
NPM 및 빌드 도구로 설치하는 것을 권장한다.
- Node.js를 설치한다 .
- 프로젝트 폴더의 터미널을 사용하여 three.js와 빌드 도구인 Vite를 설치한다 . 다른 빌드 도구(yarn 등)도 가능하다.
# three.js
npm install --save three
# vite
npm install --save-dev vite3. 다음 터미널에서 vite를 실행한다
npx vite4. 설치가 완료되면 http://localhost:5173 주소로 해당 프로젝트의 창을 띄울 수 있다.
생산
제작 완료 후, 배포할 준비가 되면 Vite에 프로덕션 빌드( npx vite build )를 실행하면 된다. 애플리케이션에서 사용하는 모든 것이 컴파일되고 최적화되어 dist/ 폴더에 복사된다. 해당 폴더의 내용으로 웹사이트에 호스팅하게 된다.
옵션 2: CDN에서 가져오기
개발
빌드 도구 없이 설치하려면 위에 제공된 프로젝트 구조에서 일부 코드를 추가해야 한다.
- main.js 에서 'three'(npm 패키지)에서 코드가 무엇인지 정의해야 한다. 아래 코드를 <head></head> 태그 안의 스타일 뒤에 넣는다.
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@<version>/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@<version>/examples/jsm/"
}
}
</script><version>은 "v0.149.0" 과 같은 three.js의 실제 버전으로 바꿔야 한다..
- 구현 기능을 위해 npx serve로 로컬 서버를 실행해야 한다.
- Node.js를 설치한 다음 serve를 실행하여 프로젝트 디렉토리에서 로컬 서버를 시작한다.
- 터미널에 http://localhost:3000과 같은 URL이 나타나고, 해당 URL을 열어 웹 페이지를 볼 수 있다.
빈 페이지가 뜨면 three.js를 시작할 준비가 완료 된 것이다.
애드온
three.js는 기본적으로 3D 엔진의 기본을 포함한다. 컨트롤, 로더, 후처리 효과와 같은 다른 three.js 구성 요소는 addons/ 디렉토리의 일부다. 애드온은 별도로 가져와야 한다 .
아래 예는 OrbitControls 및 GLTFLoader 애드온 으로 three.js를 가져오는 방법이다 .
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
const controls = new OrbitControls( camera, renderer.domElement );
const loader = new GLTFLoader();three.js에 대한 라이브러리 및 플러그인 역시 별도로 설치가 필요하다.
'Three.js' 카테고리의 다른 글
| 호환성 메세지 (0) | 2025.01.02 |
|---|---|
| 회전하는 큐브 만들기 (three.js 기본) (1) | 2025.01.02 |