22.08.13 [WebGL] 메타버스 만들기 Three.js 설치

Three.js 설치하는 방법은 크게 3가지이다. 

 

1. 그냥 파일로 다운로드하기 

code >> download 클릭 >> build >> three.module.js 사용

https://threejs.org/

Three.js – JavaScript 3D Library

스크립트 넣어주기

 

2. npm 으로 설치

npm install --save three

 

3. 웹팩 보일러 플레이트 클론 받기

아래 보일러 플레이트를 깃 클론 받고 

npm install 해주고 

npm run dev 로 실행 

로컬호스트 경로로 확인 

우와 진짜 신기하다...!

랜딩페이지는 다음과 같이 설정하면 되고 

const path = require('path')

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js',
  },
  performance: {
    maxEntrypointSize: 1024000,
    maxAssetSize: 1024000
  },
  devServer: {
    publicPath: '/public/',
    compress: true,
    port: 9000,
    hot: true,
  },
}

src/index.js 페이지가 번들로 표현되기 때문에 

index.js 들어가서 

 

if (WEBGL.isWebGLAvailable()) {
	// 코드 넣어준다.
}

위 스코프 안에 코드를 넣어준다. 

 

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

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

 

개인적으로 마음에 들었던 것은 

블렌더에서 만든 3D 오브젝트들을 three.js 에서 불러오는 기능도 포함되어 있어서 

내가 사용하는 툴 간의 호환성이 뛰어나 시너지 효과를 톡톡히 볼 수 있을 것 같다! 

 

 

https://threejs.org/docs/#manual/ko/introduction/Creating-a-scene

three.js docs

 

아주 흥미롭구먼