06 · Raycaster·OrbitControls
1주 차 / 원문 Day 6 · 문서 제공 / 실행 예제 제공 · 고정된 하루 분량이 아닌 학습 순서입니다.
목표
포인터를 공간 광선으로 바꾸고 카메라 조작과 선택을 구분한다.
선수 지식
02~04, DOM pointer 이벤트.
핵심 개념과 설명
clientX/clientY는 viewport 좌표입니다. canvas의 left/top을 빼고 width/height로 정규화해야 패널 안의 위치가 됩니다. NDC는 x=-1~1, y는 위쪽이 +1이므로 y 방향을 뒤집습니다.
Raycaster.setFromCamera는 카메라와 화면 점으로 광선을 만들고 교차 결과를 거리순으로 제공합니다. OrbitControls는 카메라를 움직입니다. 드래그 종료와 클릭 선택을 구분하고, 빈 공간을 눌렀을 때 선택을 해제해야 합니다.
학습 후 얻을 역량
- 포인터를 공간 광선으로 바꾸고 카메라 조작과 선택을 구분한다.
- 아래 완료 조건을 재현하고 자가 점검 질문에 자신의 말로 답할 수 있습니다.
실습 과제
- 두 큐브를 놓고 x=((clientX-left)/width)*2-1, y=-((clientY-top)/height)*2+1을 계산합니다.
- 가장 가까운 교차 물체의 색을 바꾸고 빈 공간에서는 복원합니다.
- canvas 여백과 크기를 바꿔 다시 선택하고 이벤트를 cleanup에서 제거합니다.
이 단위의 실행 코드를 학습 화면에서 편집할 수 있습니다. 기존 빈 코드 기록이 있다면 원본 코드를 복원하세요. 필기는 유지됩니다.
관찰할 변수
pointer 좌표, canvas 크기·위치, 물체 거리. 카메라 회전을 멈춘 기준도 남깁니다.
완료 조건
- 두 물체 선택과 선택 해제를 구현했다.
- 패널 크기가 바뀌어도 좌표가 맞는다.
- 선택과 카메라 드래그를 구분한다.
자가 점검 질문
- window.innerWidth로 NDC를 만들면 왜 3분할 화면에서 틀리나요?
- 겹친 물체 중 무엇을 선택해야 하나요?
공식 참고
실험 기록 — 직접 작성
목표
핵심 개념
바꾼 변수와 예상
실제 결과
배운 점
남은 질문
이전: Light·Shadow·Texture · 다음: 인터랙티브 장면 복습
연결된 예제
예제 원본은 화면의 편집기에 표시되고 실제로 실행됩니다. 첫 주석의 변수나 과제를 하나씩 바꾸고 예상과 결과를 기록하세요. 원본 복원은 코드만 되돌리며 필기를 지우지 않습니다.
실행 환경과 제한을 확인하세요.
연결된 예제와 실행 범위
원본 실행 코드 · 화면 단위 ID: 06-interaction
연결된 원본 코드를 Monaco에서 편집하면 검사 후 sandbox 미리보기에 반영됩니다. 확장 과제와 완료 조건은 직접 수행하고 결과를 기록하세요.
기존에 저장한 코드가 있으면 그대로 유지합니다. 새 원본을 사용하려면 먼저 전체 JSON으로 백업한 뒤 원본 코드로를 선택하세요. 필기는 지워지지 않습니다.