웹 사이트에서 멋있게 3D 모델을 적용해보자!

hyunho4562·2023년 9월 11일
13

Three.js

목록 보기
1/2
post-thumbnail

Three.js?

Three.js는 웹페이지에 3D 객체를 쉽게 랜더링할 수 있도록 도와주는 Javascript 3D 라이브러리이다.


WebGL 기반으로 랜더링과 카메라, 조명 등의 3D 프로그래밍 기술을 간단하게 사용할 수 있다.

WebGL?

웹상에서 2D 및 3D 그래픽을 렌더링하기 위한 로우 레벨 Javascript API 이다.

WebGL 장점

  1. 누구나 사용 가능하다.
  2. 렌더링 가속화를 지원하는 그래픽카드를 사용한다.
  3. 별도의 플러그인이 필요 없다.

설치

본격적으로 Three.js이 뭔지 실습을 통해 알아보자.

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 및 빌드 도구를 사용하여 설치


  1. Node.js 설치

  1. 프로젝트 폴더의 터미널을 사용하여 three.js 빌드 도구인 Vite를 설치한다.
# three.js
npm install --save three

# vite
npm install --save-dev vite

  1. 터미널에서 다음 명령어를 실행한다.
npx vite

  1. 정상적으로 설치했다면, 터미널에 http://localhost:5173 과 같은 URL이 표시된다.

2. CDN에서 가져오기

  1. 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>

  1. Node.js를 설치하고, serve 명령어를 실행하여 프로젝트 디렉터리에서 로컬 서버를 시작
npx serve .

  1. 모든 것이 순조롭게 진행되었다면, 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();
profile
유연한 자세

0개의 댓글