React Three Fiber · 14 프레임과 이벤트
단계: 3D 입력과 UI 상태 · 편집 가능한 예제 · 저장 ID: react-three-fiber-02
목표와 학습 후 역량
- 클릭 10회에 의도한 선택 변경 10회만 발생한다.
- 회전 중 React 상태가 프레임마다 갱신되지 않는다.
선수 지식
14단위는 13단위 결과물과 실험 기록을 이어 사용합니다.
핵심 개념과 설명
역할 분리
useFrame은 잦은 좌표·회전을 ref로 갱신합니다. hover·클릭 선택처럼 UI 의미가 바뀔 때만 React 상태를 갱신합니다.
전파 정책
겹친 객체에서는 포인터 전파 규칙이 선택 결과를 결정합니다. 이벤트 로그로 실제 교차 순서와 중복 선택을 확인합니다.
실습 준비
별도 React Vite 프로젝트에서 JSX를 사용합니다. React와 @react-three/fiber의 호환 메이저 버전, Three.js 버전과 lockfile을 기록하세요. 이 과정은 WebGL 기반 안정 버전 API를 사용하며 alpha WebGPU API를 혼용하지 않습니다. 프레임 갱신은 useFrame과 ref로 처리합니다. 기존 react-three-fiber-02 미리보기는 출발점입니다. 본문의 확장 결과물은 별도 프로젝트에서 구현합니다.
연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.
실습 과제
- src/InteractiveScene.jsx에 hover 색·클릭 선택·delta 회전을 통합하세요.
- 겹친 큐브에서 stopPropagation 정책과 onPointerMissed 선택 해제를 구현하세요.
- 10회 클릭과 5초 회전을 기록하고 프레임 setState가 없는지 검사하세요.
관찰할 변수
| 변수 | 기준 조건 | 바꿀 조건 | 예상할 변화·검증 가설 |
|---|---|---|---|
| 전파 | 허용 | 앞 mesh에서 차단 | 한 클릭이 뒤 객체 선택까지 바꾸지 않는다. |
표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.
완료 조건
- 클릭 10회에 의도한 선택 변경 10회만 발생한다.
- 회전 중 React 상태가 프레임마다 갱신되지 않는다.
자가 점검
- hover와 실제 선택은 같은 상태인가요?
- 빈 공간 클릭과 drag 종료 클릭을 어떻게 구분할 수 있나요?
공식 참고
연결된 예제와 실행 범위
원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.
다음 학습
이전: UI 상태와 프레임 목표 · 다음: 모델 로딩과 Suspense