Three.js and TypeScript (2)

• Udemy의 Three.js and TypeScript 강의를 듣고 정리한 내용을 기록한다.
  • 8. Install Three.js Course Boilerplate 부터 9. Scene 까지.

---

• Three.js에서 필수적으로 고려해야 하는 3가지: Renderer, Scene, Camera 이다.
• 앞으로의 강의에서는 이 3가지에 대한 개념을 먼저 짚고 넘어갈 것.
• 중간중간 새롭게 등장하는 클래스들이 있는데, 이것들에 대해서도 나중에 살펴볼 것이다.

 

Scene

: Three.js에서 렌더링 되는 모든 것들이 존재하는 공간.

• 카메라, 각종 3D 오브젝트들, 빛이 위치하는 공간.
• Three.js를 사용하기 위해 최소 한 개는 생성해야 할 필요가 있다.

 

Scene 생성

• Scene 생성자를 통해 생성할 수 있다.

import * as THREE from 'three'

const scene = new THREE.Scene();

 

 

• Scene은 Object3D 객체를 확장한다.

Object3D란, Three.js에서 많은 객체들의 베이스가 되는 클래스이다. Object3D에 대해서는 추후에 더 살펴본다.

 

 

Scene의 속성 탐색

.background

: Scene의 배경을 나타내는 속성으로, 기본값은 null 이다. 크게 3가지 유형의 값을 지정할 수 있다.

• Color: 색상. 여기서 받는 색상은 Three.js의 Color 객체이다.
  • Color 생성자는 헥스코드, RGB코드 등 다양한 포맷의 색상값을 받을 수 있다.

import * as THREE from 'three';

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x123456); // 헥스코드 형태의 색상값

scene.background = new THREE.Color('FF0000'); // 문자열 형태로 주어진 RGB 코드값

Color로 Scene 배경을 설정한 모습

 

 

• Texture: 이미지를 받아 평면적인 배경으로 만든다. 이 때, TextureLoader를 사용한다.
  • TextureLoader는 텍스쳐로 사용될 이미지를 로딩해올 때 사용되는 클래스이다.

import * as THREE from 'three';

const scene = new THREE.Scene();
scene.background = new THREE.TextureLoader().load('URL');

 

Texture로 Scene 배경을 설정한 모습

 

 

• Skybox(Texture cube): 단어대로 6개의 텍스쳐(이미지)로 구성된 육면체 배경을 만든다. 이 때 사용하는 클래스는 CubeTextureLoader 이다.

import * as THREE from 'three';

const scene = new THREE.Scene();
scene.background = new THREE.CubeTextureLoader()
  .setPath('URL')
  .load([px, nx, py, ny, pz, nz]);

• setPath() 를 통해 이미지를 가져올 경로를 지정한다.
• load() 를 통해 육면체에 지정할 6개의 이미지 경로를 지정한다.
  • 이 때, 전달하는 이미지 경로의 순서는 다음과 같다;
    Postive X → Negative X → Postive Y → Negative Y → Postive Z → Negative Z
  • 처음 Scene을 생성하고, 카메라 속성을 변경하지 않았다고 가정할 때, 화면 기준 위 값들은 아래와 같다;
    X값 → 화면 기준 좌우(음수일수록 왼쪽)
    Y값 → 화면 기준 상하(음수일수록 아래)
    Z값 → 화면의 원근(음수일수록 뒤쪽)

CubeTexture로 Scene 배경을 설정한 모습

 

 

.backgroundBlurriness

: Scene의 배경의 흐릿함 정도를 조절할 수 있는 속성이다. 0부터 1 사이의 소수점 숫자를 받는다.

 

이 외에도 몇 가지 다양한 속성이 존재함. Scene 자체의 고유 속성도 있지만, Scene은 Object3D를 확장하는 클래스이기 때문에 Object3D의 속성 또한 다룰 수 있음을 기억하기.

 

 

 

Scene을 다뤄보기

• 주로 한 개의 Scene을 생성하여 다루는 케이스가 많지만, Scene을 여러 개 생성하는 것 자체는 가능하다.
• Scene을 전환하고 싶다면 renderer에 변경되는 Scene 객체를 전달해주면 된다.

import * as THREE from 'three';
import { GUI } from 'dat.gui';

/* 중략 */

const sceneA = new THREE.Scene();
const sceneB = new THREE.Scene();
const sceneC = new THREE.Scene();

let currentScene = sceneA;
const cube = new THREE.Mesh(geometry, material);
sceneA.add(cube);

const setCurrentScene = {
  sceneA: () => {
    currentScene = sceneA;
  },
  sceneB: () => {
    currentScene = sceneB;
  },
  sceneC: () => {
    currentScene = sceneC;
  },
}

const gui = new GUI();
gui.add(setCurrentScene, 'sceneA').name('Scene A');
gui.add(setCurrentScene, 'sceneB').name('Scene B');
gui.add(setCurrentScene, 'sceneC').name('Scene C');

/* 중략 */

renderer.render(activeScene, camera);

/* 하략 */

 

• 3개의 Scene을 정의한 후, Dat GUI의 버튼을 누를 때 Scene이 전환될 수 있도록 하고 있다.

 

※ 복수의 Scene이 존재할 때, Scene들은 한 가지의 Object를 공유하는 것이 불가능하다.

→ 즉, 오브젝트는 무조건 한 개의 Scene에서만 존재할 수 있음을 의미한다.

→ 위 코드에서, Scene A에 추가된 큐브는 다른 Scene으로 전환할 시 보이지 않는 것을 통해 알 수 있다.

→ 비슷하게, Scene A에 있던 큐브를 add 메서드를 통해 다른 Scene에 추가할 경우 원래 있던 Scene A에서 사라지는 것을 확인할 수 있다.

 

 

+) Dat GUI 의 컨트롤러

Dat GUI에 컨트롤러를 추가하는 add 메서드에 어떤 데이터를 전달하느냐에 따라 Dat GUI에서 띄우는 UI가 달라짐.

• 숫자가 전달된 경우: 슬라이더 형태의 UI를 추가한다.
• 문자열이 전달된 경우: 텍스트 input 형태의 UI를 추가한다.
• 함수가 전달된 경우: 버튼 형태의 UI를 추가한다 → 누르면 전달된 함수를 실행한다.
• Boolean이 전달된 경우: 체크박스 형태의 UI를 추가한다.

위의 예제에서는 함수를 전달했기 때문에, 지정한 이름(’Scene A’, ‘Scene B’, ‘Scene C’)의 버튼들이 컨트롤러로 추가된다.

 

 

---

• 본래는 카메라 까지 봤는데 한 번에 정리하면 너무 내용이 많아질 것 같아 다음으로 미루기로!