three.js | Scene, Camera, Renderer

three.js로 3D 콘텐츠를 만들기 위해서는 반드시 알아야 할 핵심 개념이 있습니다. 바로 Scene(장면), Camera(카메라), Renderer(렌더러)입니다. 이 세 가지는 three.js의 뼈대이자 가장 기본적인 구조입니다.

---

🎬 1. Scene(장면)

3D 오브젝트들이 배치되는 가상의 공간입니다.

모든 3D 도형, 빛, 카메라 등은 이 Scene 안에 들어갑니다.

비유하자면 Scene은 공연 무대와 같습니다. 무대 위에 배우(3D 오브젝트)를 올리고 조명(빛)을 설치하며 카메라로 촬영을 합니다.

const scene = new THREE.Scene();

---

🎥 2. Camera(카메라)

Scene(장면)을 어떤 시점에서 바라볼지 결정하는 역할을 합니다.

Camera는 사람의 눈 역할을 한다고 보면 됩니다. 얼마나 넓게 얼마나 가까이서 어떤 각도로 장면을 바라볼지 설정할 수 있습니다.

three.js에서는 보통 PerspectiveCamera (원근감 있는 카메라)를 가장 많이 사용합니다.

const camera = new THREE.PerspectiveCamera (
  75, // 시야각(Field of View)
  window.innerWidth / window.innerHeight, // 화면 비율
  0.1, // 가까운 범위
  1000 // 먼 범위
);

• 시야각(FOV)이 클수록 왜곡이 생기고 작을수록 줌인된 느낌입니다.
• 비율(aspect)은 화면 가로세로 비율을 유지하기 위해 설정합니다.

---

🖼️ 3. Renderer(렌더러)

Renderer는 Scene과 Camera 정보를 바탕으로 실제 화면에 그림을 그려주는 역할을 합니다.

쉽게 말해 Scene을 Camera 시점에서 바라본 결과를 브라우저 화면에 출력해주는 도구입니다.

three.js에서는 WebGL 기반의 렌더러인 WebGLRenderer 를 주로 사용합니다.

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight); // 화면 크기 설정
document.body.appendChild(renderer.domElement); // 브라우저에 캔버스 추가

---

🧩 기본 코드 구조

const scene = new THREE.Scene(); // 무대
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); // 눈
const renderer = new THREE.WebGLRenderer(); // 스크린

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

이렇게 세 가지 요소를 준비한 후 우리가 만든 3D 오브젝트들을 Scene에 배치하고 Camera로 바라본 장면을 Renderer로 그려서 브라우저에 출력하게 됩니다.

---