[ThreeJS] ThreeJS 환경 세팅

환경세팅하는 법

프로젝트 디렉토리를 생성하는 절차는 생략하고 진행한다.

Vite를 사용하여 프로젝트를 생성한다.

npm create vite@latest project_name -- --template vanilla

Vite가 지원하는 템플릿은 이러한 것들이 있다.

Vite가 지원하는 템플릿

프로젝트 생성 후 그 디렉토리 안에서 다음 명령어를 실행해 Threejs 라이브러리를 설치해준다. 설치방법은 다음과 같다.

npm i three

package.json

방금 전 명령어가 문제없이 실행되었다면 프로젝트 디렉토리 내부에 package.json 안에 dependencies에 "three" 라이브러리가 추가된 모습을 볼 수 있다.

npm run dev

프로젝트를 생성 후 위의 명령어를 입력하면 서버를 실행시킬 수 있다.

실행된 모습

이렇게 ThreeJs 세팅과 실행을 간단히 알아봤다.