three.js npm 설치하기

내가 해놓고 잊지 않기 위해서 기록함

사실 여러 문서들을 보고 설치한거라 약간 짬뽕 식으로 되었는데 맞는지 아닌지 불확실하다.

기존에는 가장 편하게 모든 파일을 다 내려받는 다운로드식으로 설치를했다. 그러다보니 뭔가 파일도 너무 많고 정리도 안되는 느낌이라 싹 정리하고 필요한것만 가지고 있고 싶어서 npm 으로 설치하는 방법으로 바꾸어보았다.

 

**깃허브로 전체 다운로드를 하려면 https://github.com/mrdoob/three.js 여기서 참고! 깃클론을 해서 가져오면 되는 형식이다.

 

사실 전체를 다 받으니 이렇게 많았다..;;

이런걸 줄이기 위해서 npm으로 설치를 함

 

1.우선 파일을 하나 만들고 터미널을 연다.

2.npm install --save three 입력

3.그럼 node modules와 package.json들이 설치된다.

4.node modules안에 있는 three파일을 밖으로 빼내어서 vendor이라는 폴더 안에다가 다시 넣어준다.

 => 이렇게 하는 이유는 경로를 설정하기 위해서

5.그리고 나서 index.html,css파일등을 만들어 주고

6. main.js파일에 module들을 불러오기 위해서 아래와 같이 경로를 연결하고 import한다.(사실 저 파일경로명을 제대로 확인 안해서 시간이 걸렸다)

import {
  BoxBufferGeometry,
  Color,
  Mesh,
  MeshBasicMaterial,
  PerspectiveCamera,
  Scene,
  WebGLRenderer,
} from '../vendor/three/build/three.module.js';

이런식으로 필요한 것만 부르기 위해서 할 수 도 있지만 전체적으로 다 불러주기 위해서 아래와 같이 해줄 수 있다.

import * as THREE from  '../vendor/three/build/three.module.js';

** 대신 const scene = new Scene()을 const scene = new THREE.Scene()으로 작성 해주어야한다.

확연히 줄은 파일 사이즈

끝!