Three.js _ 01 설치

https://www.youtube.com/watch?v=JFX_IM2FJyQ&t=315 

01. npm  인스톨

02. git clone으로 인스톨  V

---

01. 위 영상에서 code 프로그램에서 npm으로 three.js 설치하는 과정

문서 : https://threejs.org/docs/#manual/ko/introduction/Installation

three.js docs

여기에 코드가 설명되어 있다.

---

code에 live server 설치

---

> three.js 설치 코드

npm install --save three

 

three  모듈 불러와서 사용하기.

>app.js

///////////////////////////////////////////////////////
// Option 1: Import the entire three.js core library.
import * as THREE from '../node_modules/three/build/three.module.js'

console.log(THREE)
//제대로 불러와지는 지 확인

const scene = new THREE.Scene();


///////////////////////////////////////////////////////
// Option 2: Import just the parts you need.
import { Scene } from 'three';

const scene = new Scene();

 

 go live ->  웹 f12 콘솔에서 확인

---

---

02. 위 영상에서 보일러 플레이트(webpack, git clone)로 three.js 설치하는 과정

 

웹팩 ?

웹 최적화를 위해 웹팩을 사용하는 것을 추천.

다양한 언어, 파일, 에셋을 -> js css jpg png(static asset)로 간단하고 빠르게

---

webpack + three.js

: 디자인 오픈소스와 비슷한 개념

---

설치

https://github.com/aakatev/three-js-webpack

GitHub - aakatev/three-js-webpack: Boilerplate for Three JS project

 

> 콘솔에서  git clone 해준다 npm i 해주고 서버 띄운다 npm start

git clone https://github.com/aakatev/three-js-webpack.git
npm i

npm run start

 

> 주소로 접속한다

http://localhost:9000/

 

> 파일 정리