[Three] Three.js 프로젝트 시작하기

Frontend

[Three] Three.js 프로젝트 시작하기

Rayi 2025. 1. 12. 02:44

방법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