Three.js?
Three.js는 웹페이지에 3D 객체를 쉽게 랜더링할 수 있도록 도와주는 Javascript 3D 라이브러리이다.
WebGL 기반으로 랜더링과 카메라, 조명 등의 3D 프로그래밍 기술을 간단하게 사용할 수 있다.
WebGL?
웹상에서 2D 및 3D 그래픽을 렌더링하기 위한 로우 레벨 Javascript API 이다.
WebGL 장점
- 누구나 사용 가능하다.
- 렌더링 가속화를 지원하는 그래픽카드를 사용한다.
- 별도의 플러그인이 필요 없다.
설치
본격적으로 Three.js이 뭔지 실습을 통해 알아보자.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script type="module" src="/main.js"></script>
</body>
</html>main.js
import * as THREE from 'three';public/
public/ 폴더는 포함된 파일이 변경되지 않고 웹 사이트에 푸시되기 때문에 정적 폴더라고 한다.
1. NPM 및 빌드 도구를 사용하여 설치
- Node.js 설치
- 프로젝트 폴더의 터미널을 사용하여 three.js 빌드 도구인 Vite를 설치한다.
# three.js
npm install --save three
# vite
npm install --save-dev vite- 터미널에서 다음 명령어를 실행한다.
npx vite- 정상적으로 설치했다면, 터미널에 http://localhost:5173 과 같은 URL이 표시된다.
2. CDN에서 가져오기
- index.html에서 head 태그 안에 아래 코드를 삽입한다.
index.html
<script async src="https://unpkg.com/es-module-shims@1.8.0/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@<version>/build/three.module.js",
"three/addons/": "https://unpkg.com/three@<version>/examples/jsm/"
}
}
</script>- Node.js를 설치하고, serve 명령어를 실행하여 프로젝트 디렉터리에서 로컬 서버를 시작
npx serve .- 모든 것이 순조롭게 진행되었다면, http://localhost:3000과 같은 URL이 표시된다.
여기까지 순조롭게 진행이 잘 되었다면, 본격적으로 3D 모델링을 만들 준비가 되었다는 것이다!!
애드온
기본적으로 Three.js에는 3D 엔진의 기본 사항이 포함되어 있다.
컨트롤, 로더, 후처리 효과 등 기타 three.js 구성 요소는 addons/ 디렉터리의 일부이다.
OrbitControls 및 GLTFLoader 애드온을 사용하여 Three.js 가져오기
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
const controls = new OrbitControls( camera, renderer.domElement );
const loader = new GLTFLoader();
유연한 자세