[이슈] three.js 모듈 webpack환경에서 import해서 사용할 때 알아둘 것

three.js 라이브러리를 npm으로 설치하고 webpack 환경에서 사용할 때 알아두어야 할 사항이다.

three.js example에서 사용하는 control이나 여러가지 loader들을 import 해서 사용할 때

 

three/examples/js/ 디렉토리 이하에 있는 것을 import 해서 사용하면 " THREE is not defined " 에러가 발생한다.

해결방법! 결론부터 얘기하자면, three/examples/js 디렉토리에 있는 것이 아니라 three/examples/jsm에 있는 모듈들을 사용 해야한다.

(npm에 별도로 import해서 쓸 수 있는 three-obj-mtl-loader 같은 모듈들이 있긴 하지만, 모든 모듈들이 있는 것은 아니기 땜에 근본적 해결책을 알아야 한다.)

 

예를 들어, OBJLoader를 사용한다고 할때, 아래와 같이 사용한다면 THREE is not defined 에러가 발생할 것이다.

import {OBJLoader} from 'three/examples/js/loaders/OBJLoader';

let OBJLoader = new OBJLoader();

하지만 jsm 내의 모듈을 사용하면 정상적으로 동작한다.

import {OBJLoader} from 'three/examples/jsm/loaders/OBJLoader';

let OBJLoader = new OBJLoader();

three.js의 버전이 낮은 걸 사용한다면 이 jsm 경로에 모듈이 많이 없을 수 있다. 그럴 경우에는 더 높은 버전으로 업데이트 해보면 된다. 점점 더 많이 생겨나 있다. ( 나도 r103 사용했었는데, OBJ, MTLLoader정도 밖에 없어서 당황했었다. )

 

js 이하 모듈과 jsm 이하 모듈들의 차이를 보자면

js 이하 모듈은 " THREE.OBJLoader " 의 형태로 THREE 객체로 모듈을 접근하고 있다.

반면 jsm 이하 모듈은 " OBJLoader " 의 형태로 Webpack 환경에서 단독으로 해당 모듈만 사용할때도 사용할 수 있도록 되어 있다.