three.js 시작하기

패키지 설치

npm i -D @babel/cli @babel/core @babel/preset-env babel-loader clean-webpack-plugin copy-webpack-plugin core-js cross-env html-webpack-plugin source-map-loader terser-webpack-plugin webpack webpack-cli webpack-dev-server

npm i three

위와 같이 three.js 라이브러리를 설치하고, 서버 구동이나 동작은 npm을 이용한다. 

npm start / npm run build 등으로 npm 서버를 실행하거나 빌드한다.

(빌드 할 때 일반적으로 webpack을 사용하기에 stylesheet와 같은 파일도 webpack에서 관리한다.)

 

three.js 모듈에 대해서 알아보자.

 

import * as THREE from 'three';

앞으로 three.js 모듈의 객체를 THREE라고 하자.

 

THREE.WebGLRenderer를 통해 renderer객체를 생성할 수 있다. 

const renderer = new THREE.WebGLRenderer();

 

renderer 객체는 setSize()를 통해 rendering되는 창의 크기를 설정할 수 있는데,

renderer.setSize(window.innerWidth, window.innerHeight);

위처럼 window의 사이즈로 지정할 수 있다.

renderer.domElement를 이용해서 canvas DOM을 가져올 수 있다.

 

document.body.appendChild(renderer.domElement)

이렇게 document에 canvas DOM을 append하면 확인할 수 있다.

appendChild를 이용하지 않고도 다음과 같이 querySelector를 통해 renderer canvas를 지정할 수 있다.

const canvas = document.querySelector('#three-canvas');
const renderer = new THREE.WebGLRenderer({
	canvas : canvas
});