07 · 인터랙티브 장면 복습
1주 차 / 원문 Day 7 · 문서 제공 / 실행 예제 제공 · 고정된 하루 분량이 아닌 학습 순서입니다.
목표
카메라·선택·리사이즈·정리를 하나의 작은 장면으로 통합한다.
선수 지식
01~06.
핵심 개념과 설명
canvas의 CSS 크기와 drawing buffer 픽셀 수는 다릅니다. DPR이 2배면 가로·세로 픽셀 수가 각각 2배여서 픽셀 수는 4배가 됩니다. camera.aspect와 renderer 크기를 함께 갱신합니다.
ResizeObserver는 창뿐 아니라 컨테이너 크기도 관찰합니다. 렌더 루프는 경과 시간 기준으로 갱신하고 탭 복귀 때 큰 delta를 제한합니다. DOM 제거만으로 geometry/material·이벤트·observer가 모두 정리되는 것은 아닙니다.
학습 후 얻을 역량
- 카메라·선택·리사이즈·정리를 하나의 작은 장면으로 통합한다.
- 아래 완료 조건을 재현하고 자가 점검 질문에 자신의 말로 답할 수 있습니다.
실습 과제
- 장면에 카메라 조작, 선택 강조, 초기화를 결합합니다.
- 가로·세로 패널에서 CSS 크기와 buffer 크기를 기록하고 찌그러짐이 없는지 확인합니다.
- 전환을 10회 반복하며 canvas/루프/observer가 늘지 않는지 점검하고 핵심 코드 흐름을 설명합니다.
이 단위의 실행 코드를 학습 화면에서 편집할 수 있습니다. 기존 빈 코드 기록이 있다면 원본 코드를 복원하세요. 필기는 유지됩니다.
관찰할 변수
viewport, DPR 상한, delta, 전환 횟수. 장면 구성은 고정합니다.
완료 조건
- 선택·조작·리사이즈가 함께 동작한다.
- 생성한 자원과 cleanup을 짝지었다.
- 1주 개념을 자신의 말로 정리했다.
자가 점검 질문
- window resize만으로 놓치는 변화는 무엇인가요?
- React StrictMode 재실행에서 중복 canvas가 생기면 어디를 보나요?
공식 참고
실험 기록 — 직접 작성
목표
핵심 개념
바꾼 변수와 예상
실제 결과
배운 점
남은 질문
이전: Raycaster·OrbitControls · 다음: Vertex·Fragment shader
연결된 예제
예제 원본은 화면의 편집기에 표시되고 실제로 실행됩니다. 첫 주석의 변수나 과제를 하나씩 바꾸고 예상과 결과를 기록하세요. 원본 복원은 코드만 되돌리며 필기를 지우지 않습니다.
실행 환경과 제한을 확인하세요.
연결된 예제와 실행 범위
원본 실행 코드 · 화면 단위 ID: 07-scene-review
연결된 원본 코드를 Monaco에서 편집하면 검사 후 sandbox 미리보기에 반영됩니다. 확장 과제와 완료 조건은 직접 수행하고 결과를 기록하세요.
기존에 저장한 코드가 있으면 그대로 유지합니다. 새 원본을 사용하려면 먼저 전체 JSON으로 백업한 뒤 원본 코드로를 선택하세요. 필기는 지워지지 않습니다.