01_환경설정

출처 : sbcode - threejs

의존성 설치

# nodejs 사전 설치 필요 https://nodejs.org/
nodejs

# npm 을 통한 typescript 글로벌 설치 
npm install -g typescript

# 프로젝트 폴더 생성
mkdir Three.js-TypeScript-Tutorial
cd Three.js-TypeScript-Tutorial

# threejs 라이브러리 설치 (npm or yarn)
npm install three --dev
npm install @types/three --dev

# webpack 라이브러리 추가
npm install webpack webpack-cli webpack-dev-server webpack-merge ts-loader --save-dev

# typescript 라이브러리 추가
npm install typescript --save-dev

웹팩 관련 라이브러리 설명

• webpack : 코드를 개발 및 프로덕션 버전으로 묶을 코어를 포함합니다.
• webpack-cli : webpack을 실행하는 데 사용하는 명령줄 도구입니다.
• webpack-dev-server : 개발 단계에서 코드를 로드하고 HMR 기능을 제공하는 HTML 서버입니다.
• webpack-merge : 웹팩 구성을 여러 파일로 분할할 수 있는 웹팩 도구 라이브러리.
• ts-loader : TypeScript 파일을 처리하기 위한 모듈 규칙입니다.

폴더 구조

dist/client/index.html 내용을 복사 하여 넣어준다.

|-- Three.js-TypeScript-Tutorial
    |-- dist
        |-- client
            |-- index.html
        |-- server
    |-- node_modules
        |-- three
            |-- (Several extra files and folders containing the Three.js source code)
    |-- src
        |-- client
        |-- server
    |-- package.json
    |-- package-lock.json

webpack

웹팩 관련 설정 파일 정보를 추가

• src/client/webpack.dev.js
• src/client/webpack.common.js

package.json

scripts.dev 관련 설정 정보를 추가

{
  "scripts": {
    "dev": "webpack serve --config ./src/client/webpack.dev.js",
  },
}

실행

npm run dev 를 입력하면 샘플 화면을 볼 수 있음

src/client/client.ts 파일이 컴파일 되어 dist/client/bundle.js 파일로 번들링 된 후, webpack-server 에서 dist/client/index.html 파일을 로드하여 bundle.js 파일을 포함하여 해당 정보를 로딩 후 정적 웹을 구성하게 된다.

webpack.common.js 파일에 entry 가 설정되어 있는데 이를 변경하여 다양한 sample을 테스트 할 수도 있음

맺음말

예제가 많아서 그런지 babylonjs 보단 정말 빠르게 환경 구성을 완료 한 것 같습니다. ㅜㅜ

다음엔 MTLLoader 와 OBJLoader 를 활용하여 해당 resource 를 로딩하는 것을 구성 해보려 하네요 :)

godot babylon.js three.js 배워가는 재미가 있네요 ㅎ