[WebGL] Three.js ES6이상의 모듈화 방식으로 사용하기 관련

 

 

=======================

=======================

=======================

 

 

 

 

 

 

WebGL의 라이브러리 Three.js의 자바스크립트 ES6이상 버전의 모듈화 방식으로 사용해 보겠다

 

모듈화방식: ES6 버전이상 자바스크립트에서 모듈화한 export 된 코드를 다른 JS파일에서 import해서 쓰는 방식이다.

 

참고:

- https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import

 

- https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/export

 

Three 사이트: https://threejs.org/

 

그림1

 

먼저 Three.js의 홈페이지에 들어 최신 Three.js의 라이브러리를 받는다. '그림1-1번'을 다운로드 링크를 누루면

'그림1-2번'과 같이 다운로드 될 것이다.

 

 

 

 

그림2

 

'그림1'에서 받은 파일을 "그림2-1번"과 같이 "내PC" 다운로드 폴더에서 찾은 다음 압축을 풀고 폴더 "three.js-master/build/" 폴더 안에 들어가 "그림2-2번"과 같이 "three.module.js" 파일을 찾아본다.

 

 

그림3

 

"그림3-1번" 과 같이 자신이 넣을 프로젝트 안의 폴더에 넣어주고 "그림3-2번"과같이 

import * as THREE from "../lib/three.module.js"

이와 같이해주면 된다.

 

이것은 ES6버전 이상 모듈 예제

import * as myModule from "my-module.js";

모듈에서 하나의 멤버만 가져옵니다. 현재 범위 내에 myMember 이 들어갑니다.

이것을 참고 하였다, 사용법을 모르면 아래 관련링크에서 링크해두었으니 참고 하면 되겠다.

 

이처럼 해주면 

 

export class CTest

{

 constructor(form)

 {

           this._GLT = new THREE.WebGLRenderer({antialias:true});

       }

}

 

이와 같이 모듈화방식으로 기존에 쓰던 방식대로 쓸 수 있게 된다.

 

 

=======================

=======================

=======================

 

 

 

관련링크:

 

- http://poiemaweb.com/es6-module

 

- https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import

 

- https://github.com/mrdoob/three.js/issues/9403

 

- https://stackoverflow.com/questions/48719999/three-js-es6-how-import-only-specific-modules

 

=======================

=======================

=======================