Three.js 기본 구성 - 렌더러, 씬, 메쉬

참고 파일: src/perspective.js

---

핵심 개념

Three.js로 3D 장면을 만들기 위해 반드시 필요한 3대 요소:

요소	역할	클래스
Renderer (렌더러)	씬을 화면에 그려주는 역할	THREE.WebGLRenderer
Scene (씬)	모든 오브젝트가 포함되는 공간 (무대)	THREE.Scene
Camera (카메라)	씬을 바라보는 시점	THREE.PerspectiveCamera 등

추가로 화면에 보이는 물체를 만들기 위해:

요소	역할
Geometry (지오메트리)	도형의 형태 (박스, 구, 원기둥 등)
Material (머티리얼)	도형의 재질 (색상, 투명도, 반짝임 등)
Mesh (메쉬)	Geometry + Material을 합친 최종 오브젝트

---

렌더러 생성 방법

방법 1: 동적으로 캔버스 생성

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement); // <canvas> 요소를 body에 추가

방법 2: HTML에서 캔버스 가져오기 (권장)

const canvas = document.querySelector('#three-canvas');
const renderer = new THREE.WebGLRenderer({
    canvas: canvas,       // HTML의 canvas 요소 전달
    antialias: true       // 계단 현상 제거 (메쉬를 부드럽게)
});
renderer.setSize(window.innerWidth, window.innerHeight);

antialias: true로 설정하면 3D 오브젝트의 가장자리가 매끄럽게 렌더링된다.

---

씬 (Scene)

const scene = new THREE.Scene();
scene.add(camera);  // 카메라를 씬에 추가
scene.add(mesh);    // 메쉬를 씬에 추가

• 모든 오브젝트(카메라, 조명, 메쉬 등)를 담는 컨테이너
• scene.add()로 요소를 추가

---

메쉬 (Mesh) = Geometry + Material

// 1. Geometry: 도형 형태 정의
const geometry = new THREE.BoxGeometry(1, 1, 1); // 가로, 세로, 깊이

// 2. Material: 재질 정의
const material = new THREE.MeshBasicMaterial({ color: 'red' });

// 3. Mesh: 합치기
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh); // 씬에 추가 (기본 위치: 원점 0,0,0)

색상 지정 방법

color: 0xff0000     // 16진수 숫자
color: '#ff0000'    // 16진수 문자열
color: 'red'        // CSS 색상 이름

---

최종 렌더링

renderer.render(scene, camera); // 씬과 카메라를 전달하여 화면에 그리기

---

전체 흐름 요약

1. Renderer 생성 (캔버스 연결)
2. Scene 생성
3. Camera 생성 & 위치 설정
4. Geometry + Material = Mesh 생성
5. scene.add(camera, mesh)
6. renderer.render(scene, camera)

---

퀴즈

Q1. Three.js에서 3D 장면을 구성하는 필수 3대 요소는?

정답 보기 Renderer(렌더러), Scene(씬), Camera(카메라)

Q2. Mesh는 어떤 두 가지 요소의 조합인가?

정답 보기 Geometry(지오메트리 - 형태) + Material(머티리얼 - 재질)

Q3. antialias: true 옵션의 역할은?

정답 보기 3D 오브젝트의 가장자리에서 발생하는 계단 현상(jagged edges)을 제거하여 메쉬를 부드럽게 보이게 한다.

Q4. 다음 코드에서 빈칸을 채우시오.

const mesh = new THREE._____(geometry, material);
scene._____(mesh);
renderer._____(scene, camera);

정답 보기 Mesh, add, render

Q5. HTML에서 캔버스를 가져와 렌더러에 전달하는 방식이 동적 생성보다 권장되는 이유는?

정답 보기 HTML 페이지 내 다른 요소들과 함께 어우러지게 배치하기 쉽고, 캔버스의 위치와 스타일을 HTML/CSS로 자유롭게 제어할 수 있기 때문이다.