방법1. npm 사용
※ node.js가 필요합니다.
Three.js를 사용하고자 하는 프로젝트 경로에 들어가 아래 명령어를 이용해 설치합니다.
npm install --save three만약 추가적인 빌드 툴이 없다면, 함께 설치할 수 있습니다. (예시 - vite)
npm install --save-dev vite방법2. CDN 사용
npm과 빌드 툴을 이용해 패키지를 설치하는 대신, html 파일에 직접 어디서 패키지를 가져올 것인지 명시해주는 방법입니다.
html 파일의 <head> 태그 바로 다음에 아래 태그를 추가합니다.
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@[버전]/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@[버전]/examples/jsm/"
}
}
</script>코드 작성하기
Three.js의 코드는 <canvas> 요소 안에서 작성합니다.
위치 설정을 용이하게 하기 위해 위치 설정은 absolute, left-0, top-0으로 합니다.
<canvas id="room" className="absolute left-0 top-0"></canvas>이후 Three.js가 작성될 객체에서 해당 canvas 요소를 찾아서 참조하면 됩니다.
const canvas = document.getElementById('room') as HTMLCanvasElement;참조한 canvas를 Three.js 코드에서 어떻게 사용하는지는 후에 추가로 다루도록 하겠습니다.
728x90
'Frontend' 카테고리의 다른 글
| [Frontend] Zustand에 대해서 (0) | 2025.04.14 |
|---|---|
| [Fronted] 상태관리 라이브러리 (0) | 2025.04.14 |
| [Three] Three.js에 대해서 (0) | 2025.01.12 |
| [TS] Could not find a declaration file for module '...' 해결하기 (0) | 2024.12.19 |
| [Frontend] 효율적인 비동기 코드 (0) | 2024.07.26 |