[threejs] VSCode에서 three.js npm module 설치하기

three.js 란? 

 

three.js 모듈 설치 방법

three.js 라이브러리를 사용하기 위해서는 본격적인 웹 코딩에 앞서 three.js 모듈을 설치해야한다.  

three.js 공식 문서에서 제안하는 three.js 설치 방법에는 크게 두 가지가 있다. 

크게 npm(Node Package Manager)으로 설치하는 방법과 cdn(Contents Delivery Network)으로 설치하는 방법이 있다. 

공식 문서에서는 npm으로 설치하는 것이 대부분 경우에 적합하다고 설명한다. 

 

기본적으로 three.js 라이브러리에 포함된 모든 파일은, 구버전이든 최신버전이든 버전이 모두 동일해야 라이브러리가 정상적으로 실행된다. 

라이브러리를 npm으로 설치하면 한꺼번에 동일한 버전의 파일들이 일괄적으로 다운로드된다.

이때 모든 파일은 최신버전으로 다운로드되며, 이를 터미널과 Package.jason 파일에서 확인할 수 있다.

따라서 애초에 파일의 버전이 맞지 않아서 문제가 생길 염려가 없다. 

하지만 cdn으로 설치하는 방식은 npm과는 달리 하나하나 경로를 가져와서(?) 입력하는 방식으로, 파일의 버전이 맞지 않아서 실행이 되지 않는 이슈가 발생할 확률이 다소 크다. 

 

따라서 공식 문서에서는 npm으로 설치하는 방식을 권장하는 것으로 보인다. 

 

우선 여기서는 three.js npm module을 설치해보고자 한다. 

VSCode를 실행하고 새 폴더와 새 파일을 만든다. 

 

 

프로젝트 창에 터미널 창을 열고 three.js npm module을 설치할 경로로 Change Direction 한다. 

(여기에서는 폴더 이름을 "module"이라고 했다. -> cd module)

터미널 창에 아래 내용을 입력한다. 

참고로, nodejs가 설치되어있어야 npm을 install할 수 있다. 

nodejs 공식 홈페이지에서 다운로드 받고, VSCode를 종료 후 다시 실행해야 npm이 정상적으로 설치된다. 

 

three.js npm module 설치하기

1. 라이브러리를 설치할 경로 지정

cd "경로"

 

2. three.js 라이브러리 설치

npm install --save three

 

three.js npm module이 정상적으로 설치되면 터미널에 아래와 같은 내용이 뜬다. 

커멘드 창에 코드 한줄만 입력하여 three.js의 최신버전을 순식간에 설치했다. 

 

 

이제 three.js의 라이브러리를 활용하여 웹 개발을 시작할 수 있다.