728x90
Three.js 설치(번들러 없이)
Three.js 는 모듈 방식으로 개발하는 것을 권장한다.
three.js에서 공식적으로 webpack이나 vite같은 번들러의 이용을 권장하고 있고,
공식 문서도 번들러의 사용을 전제로 작성되어 있다.
아래의 설치 방법은 번들러를 사용하지 않은 방법이다.
번들러를 사용하지 않기 때문에 폴더의 경로를 직접 지정해줘야 하는 번거로움이 있다.
importmap을 사용하여 그 번거로움을 해결한다.
1. npm 명령어 이용하여 설치
1.1 node_moduls/three/build 폴더에서 three.module.js 가져오기
npm install three<script type="module" defer>
import * as THREE from "./node_modules/three/build/three.module.js";
</script>
Three.js를 불러오기 위해서는 폴더의 경로를 지정해 주어야 한다.
하지만 Three.js의 다양한 모듈(controls, loaders 등)을 사용할 때도,
모듈 파일마다 three의 경로를 재정의해주어야 한다.
그렇지 않으면 three의 위치를 찾지 못해 오류가 발생한다.
so, 오류를 방지하고, 경로를 용이하게 관리하기 위해 importmap을 사용한다.
1.2 index.html head 내부에 경로에 대한 정보를 json 형식으로 작성
<!DOCTYPE html>
<html lang="en">
<head>
<script type="importmap">
{
"imports": {
"three": "../node_modules/three/build/three.module.js",
"three/examples/jsm/controls/OrbitControls": "../node_modules/three/examples/jsm/controls/OrbitControls.js",
}
}
</script>
</head>
<body>
</body>
</html>
1.3 일부 브라우저에서 importmap을 지원하기 위해 ex-modules-shipms 폴리필 추가
<!-- es-modules-shims -->
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
1.4 모듈 경로 수정
// import * as THREE from "../node_modules/three/build/three.module.js"
import * as THREE from "three";
2. CDN을 통한 설치
2.1 cdn에 있는 파일 불러오기
import * as THREE from "https://unpkg.com/three@^0.154.0/build/three.module.js";
console.log(THREE);2.2 index.html head 내부에 경로에 대한 정보를 json 형식으로 작성하여 모듈 경로 수정
<!DOCTYPE html>
<html lang="en">
<head>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@^0.154.0/build/three.module.js",
"three/addons/": "https://unpkg.com/three@^0.154.0/examples/jsm/",
}
}
</script>
</head>
<body>
</body>
</html>import * as THREE from "three";
console.log(THREE);728x90
'3D > Three.js' 카테고리의 다른 글
| Three.js 재질별 material 속성 정리 (0) | 2024.08.15 |
|---|---|
| Three.js 설치(번들러 사용) (0) | 2024.08.15 |
| 평면도를 3D로 만드는 방법 (0) | 2023.11.06 |
| UPBGE로 navigation mesh 만들기 (1) | 2023.10.20 |
| Three.js 공부 참고용 포스트 (0) | 2023.06.03 |