[Three.js 설치]웹에서 3D 구현하기

Three.js란?

three.js는 웹페이지에 3d객체를 렌더링하도록 도와주는 자바스크릡트 라이브러리입니다. 웹사이트를 인터렉티브하게 표현할 수 있는 기술이며, 3D툴을 사용하실 수 있다면 활용하면 좋은 라이브러리입니다. 

 

https://threejs.org/

Three.js – JavaScript 3D Library

 

 

Boilerplate로 three.js 설치하기 

 1) Node.js 설치

npm은 명령어를 통해 자바 스크립트 라이브러리를 설치하고 관리할 수 있는 패키지 매니저입니다. npm으로 three.js를 설치하기 위해 먼저 아래 링크에서 node.js를 다운로드 해줍니다. 

https://nodejs.org/ko/

Node.js

 

Visual studio code를 켜서 터미널을 켜줍니다. node -v를 입력하여 Node.js가 잘 다운되었는지 확인합니다. 

node -v 
Node.js 버전 확인 

 

 

Webpack 설치

웹 최적화를 위해 사용하는 자바스크립트 정적 모듈 번듈러로, 다양한 언어와 에셋을 js, css, jpg, png의 static assets으로 변환시켜줍니다. 

https://webpack.kr/

webpack

 

Boilerplate code 사용 

매번 반복적인 코드를 입력하지 않고도 기본 골격을 제공하여 효율성을 높인 소스 코드를 의미합니다. 

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

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

git clone https://github.com/aakatev/three-js-webpack.git
npm i
//vscode터미널에서 입력

cd three-js-webpack
//폴더로 이동

npm run start
//webpack development server 실행

 

불필요한 코드 삭제 

index.js파일 등에서 불필요한 코드를 삭제하고 작업환경을 만들어줍니다.