레슨 1 / 8·15분
씬 구성하기
Three.js 씬의 3대 요소
Three.js에서 3D 장면을 렌더링하려면 반드시 세 가지가 필요합니다: Scene(장면), Camera(카메라), Renderer(렌더러). Scene은 3D 객체가 배치되는 공간이고, Camera는 그 공간을 바라보는 시점이며, Renderer는 카메라가 보는 장면을 2D 화면에 그려줍니다.
javascript
import * as THREE from 'three';
// 1. 씬(Scene) 생성 — 3D 객체를 담는 컨테이너
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x1a1a2e);
// 2. 카메라(Camera) 생성 — 장면을 바라보는 시점
// PerspectiveCamera(fov, aspect, near, far)
// fov: 시야각(도), aspect: 종횡비, near/far: 렌더링 범위
const camera = new THREE.PerspectiveCamera(
75, // 시야각 75도
window.innerWidth / window.innerHeight, // 화면 비율
0.1, // 가까운 클리핑 면
1000 // 먼 클리핑 면
);
// 3. 렌더러(Renderer) 생성 — 장면을 화면에 그림
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);- •Scene — 모든 3D 객체, 조명, 카메라가 존재하는 가상 공간
- •PerspectiveCamera — 원근감이 있는 카메라 (사람 눈과 유사)
- •WebGLRenderer — WebGL API를 사용하여 GPU에서 렌더링 수행
- •fov(Field of View) — 값이 클수록 넓은 영역이 보임 (보통 50~75)
- •near/far — 이 범위 밖의 객체는 렌더링되지 않음
javascript
// 카메라 위치 설정 — 기본값은 (0,0,0)이므로 뒤로 이동
camera.position.set(0, 2, 5); // x, y, z
camera.lookAt(0, 0, 0); // 원점을 바라봄
// 간단한 큐브를 추가하여 테스트
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff88 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 렌더링 실행
renderer.render(scene, camera);💡
브라우저 창 크기가 변경될 때 camera.aspect와 renderer.setSize를 업데이트해야 3D 장면이 찌그러지지 않습니다. window.addEventListener("resize", ...) 에서 camera.updateProjectionMatrix()를 호출하세요.