02 · Scene·Camera·Renderer
1주 차 / 원문 Day 2 · 문서 제공 / 실행 예제 제공 · 고정된 하루 분량이 아닌 학습 순서입니다.
목표
카메라 위치와 시야각의 효과를 구분한다.
선수 지식
01, x/y/z 위치와 라디안 개념.
핵심 개념과 설명
Scene은 물체와 광원의 관계를 담습니다. Camera는 어떤 공간을 볼지 정하며 Renderer는 둘을 사용해 그립니다. PerspectiveCamera의 FOV는 세로 시야각, aspect는 가로/세로 비율이고 near/far는 보이는 깊이 범위입니다.
position은 카메라 위치, OrbitControls.target은 바라보는 중심입니다. 위치 변화는 각도뿐 아니라 대상까지의 거리도 바꾸므로 화면 크기가 달라질 수 있습니다. 카메라를 원점에 놓으면 원점의 큐브 내부에 들어갈 수 있습니다.
학습 후 얻을 역량
- 카메라 위치와 시야각의 효과를 구분한다.
- 아래 완료 조건을 재현하고 자가 점검 질문에 자신의 말로 답할 수 있습니다.
실습 과제
- 01의 실행 예제에서 회전을 정지하고 CAMERA_POSITION을 [3,2,5] → [0,0,5] → [5,0,0] → [3,5,3]으로 하나씩 바꿉니다.
- 기본 위치로 복구하고 FOV만 50 → 30 → 75로 바꿉니다.
- 거리와 각도 중 무엇이 변했는지 구분하여 예상/실제 표를 작성합니다.
이 단위의 실행 코드를 학습 화면에서 편집할 수 있습니다. 기존 빈 코드 기록이 있다면 원본 코드를 복원하세요. 필기는 유지됩니다.
관찰할 변수
CAMERA_POSITION, FOV, target, near/far. 한번에 하나만 변경합니다.
완료 조건
- 세 위치의 보이는 면을 예상하고 비교했다.
- FOV 변경과 카메라 이동의 차이를 설명한다.
- 카메라 위치·대상까지 거리를 기록했다.
자가 점검 질문
- position과 target이 같으면 어떤 문제가 있나요?
- aspect 변경 후 왜 투영 행렬을 갱신하나요?
공식 참고
실험 기록 — 직접 작성
목표
핵심 개념
바꾼 변수와 예상
실제 결과
배운 점
남은 질문
이전: WebGL·GPU와 첫 화면 · 다음: Geometry·Material·Mesh
연결된 예제
예제 원본은 화면의 편집기에 표시되고 실제로 실행됩니다. 첫 주석의 변수나 과제를 하나씩 바꾸고 예상과 결과를 기록하세요. 원본 복원은 코드만 되돌리며 필기를 지우지 않습니다.
실행 환경과 제한을 확인하세요.
연결된 예제와 실행 범위
원본 실행 코드 · 화면 단위 ID: 02-camera
연결된 원본 코드를 Monaco에서 편집하면 검사 후 sandbox 미리보기에 반영됩니다. 확장 과제와 완료 조건은 직접 수행하고 결과를 기록하세요.
기존에 저장한 코드가 있으면 그대로 유지합니다. 새 원본을 사용하려면 먼저 전체 JSON으로 백업한 뒤 원본 코드로를 선택하세요. 필기는 지워지지 않습니다.