Three.js and TypeScript (1)

• Udemy의 Three.js and TypeScript 강의를 듣고 정리한 내용을 기록한다.
  • 1. Introduction ~ 7. Dat GUI 까지 들은 내용이 기록되어있다.

---

 

개발환경 구성하기

• 실습 프로젝트 구성으로 Vite + TypeScript 를 사용한다.

 

Three.js 설치

yarn add -D three @types/three

 

 

Three.js 모듈 Import 하기

• 기본적으로 Three.js의 코어 부분은 3D 엔진에서 가장 중요한 컴포넌트들 (렌더러, 카메라, 텍스쳐 등)을 중점적으로 갖고 있다.
• 코어를 가능한 한 작게 유지하고 빠르게 취급하기 위해 다른 모듈들을 별도의 경로에 빼두고 있다.
  • 따라서 사용하고 싶은 모듈이 있을 경우 이들을 따로따로 Import 해야 한다.

import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

• three.js의 폴더 구조를 살펴보면 실제로 addons라는 이름의 폴더는 존재하지 않으나, example/jsm 경로의 별칭이다(이는 three.js 자체적으로 설정되어있는 별칭이다).

 

 

Stats 패널

• 개발 중 현재 프로젝트의 FPS를 확인할 수 있는 Stat 패널을 추가할 수 있다.

추가된 Stats 패널

import Stats from 'three/addons/libs/stats.module.js';

const stats = new Stats();
document.body.appendChild(stats.dom);

function animate() {
	/* 중략 */
  stats.update();
}

animate();

• 사용하는 브라우저에 따라 Stat 패널의 기능이 다르다 (어떤 브라우저는 2개, 다른 브라우저는 3개의 기능을 지원할 수 있다).
• Stat 패널을 누르면 표시되는 정보를 전환할 수 있다.
• 다만 Stat 패널을 추가하기만 하면 아무런 정보가 나오지 않는다. Stat 패널의 정보를 업데이트 하기 위해선 update 메서드를 사용해야 한다.

 

function animate() {
  requestAnimationFrame(animate);

  stats.begin();
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  stats.end();

  renderer.render(scene, camera)
}

 

• Stat 패널에서 측정할 특정 부분의 코드만을 선택하는 것도 가능하다.
  • begin 메서드와 end 메서드를 사용하면 이 두 메서드 사이의 코드만 측정하게 된다.
• showPanel(): Stat 패널에 보여질 정보를 설정할 수 있다(Stat 패널을 직접 클릭해서 전환하는 것과 똑같은 효과를 가진다).
  • 인자를 통해 보여질 정보를 설정한다.
  • 0: FPS 정보. 지난 1초 간 렌더링된 프레임 수. 높을 수록 좋다.
  • 1: 한 프레임을 렌더링 하기 위해 필요한 ms(밀리세컨드). 낮을 수록 좋다.
  • 2: 할당된 메모리(Mb 단위).
  • 3 이상의 숫자로는 사용자가 커스텀한 패널을 보여준다. 커스텀 안하면 아무 것도 안 보이는듯.

Three.js에서만 쓰이는 건 아니고, 별도의 라이브러리가 Three.js 내부에 포함되어있는 것으로 보인다.
자바스크립트 성능 측정을 위한 라이브러리.

GitHub - mrdoob/stats.js: JavaScript Performance Monitor

 

 

Dat GUI

• Stat 패널과 마찬가지로 Three.js 개발에서 유용하게 사용할 수 있는 GUI 라이브러리.
• 자바스크립트 개발에서 사용할 수 있는 컨트롤러 GUI 를 제공하는 라이브러리로, 관리하려는 값을 등록하면 그 값을 간단히 변경할 수 있는 GUI 인터페이스를 띄워주는 역할을 하는 것 같다.
• 설정 창 같은 조작 패널을 띄운다.
  • 비단 Three.js에서 뿐 아니라 자바스크립트 어플리케이션 개발이라면 사용할 수 있다.
  • Stat과는 달리 별도의 패키지 추가가 필요하다.

yarn add -D dat.gui@latest @types/dat.gui@latest

 

※ 실제 사용 예

import { GUI } from 'dat.gui';

const gui = new GUI();
gui.add(cube.rotation, "x", 0, Math.PI * 2);

• GUI 생성자를 통해 새 GUI 인터페이스를 정의한다. 다만, 이렇게 생성하기만 하면 처음엔 아무 것도 조작 패널에 뜨지 않으므로, 컨트롤러를 등록해주어야 함.
• add(): GUI 에 컨트롤러를 등록하는 메서드. 다음과 같은 인자를 받는다.
  • object: 컨트롤러를 통해 변경될 값.
  • property: 컨트롤러를 통해 변경시킬 object의 속성.
  • min: 최소값.
  • max: 최대값.
  • step: 증감치의 단위.
• 따라서 위 코드는 정육면체의 rotation.x 값을 0에서 최대 PI * 2로 바꾼다.
  • 이는 정육면체를 x축으로 한 바퀴 회전시킬 수 있는 것과 같다.

(+ 사족)

어째서 Math.PI * 2 값이 한 바퀴 회전을 나타낼 수 있는지 헷갈려서 따로 알아봤는데, 각도 표현에 '라디안'이 사용되어서라고 한다.

라디안 - 위키백과, 우리 모두의 백과사전

라디안으로 1바퀴는 2π이고, 이를 익숙한 '도' 단위로 치환하면 360도가 된다고.

 

Dat GUI에 폴더 추가하기

• Dat GUI 로 만들어진 패널 내의 컨트롤러들을 연관있는 것들끼리 묶고 싶을 때, 폴더를 만든다.
• addFolder() : GUI에 폴더를 추가한다. 이렇게 만들어진 폴더에 add를 사용함으로써, 폴더 안으로 컨트롤러를 넣을 수 있다.

const gui = new GUI();

const cubeFoler = gui.addFolder('Cube');
cubeFoler.add(cube.rotation, "x", 0, Math.PI * 2);
cubeFoler.add(cube.rotation, "y", 0, Math.PI * 2);
cubeFoler.add(cube.rotation, "z", 0, Math.PI * 2);

 

Cube라는 폴더 아래로 x, y, z에 대한 컨트롤러가 들어간 모습

• open 메서드를 사용하면 코드를 통해(programmatically) 폴더를 열 수 있다.

 

비슷한 라이브러리로 lil-gui 라는 라이브러리가 있음. 사용법 등은 Dat GUI랑 비슷한 것으로 보인다. 이 강의에서는 Dat GUI를 사용하는 것으로.

---

• 강의가 생각보다 볼륨이 크지 않아서 금방 들을 수 있을 것 같다.
• 별개로 아직까지는 개발환경 세팅만을 진행했는데, 어쩐지 코드가 굉장히 길어질 것 같은 느낌.