25 · 마커와 Raycasting
4주 차 / 원문 Day 25 · 문서·예제 제공 · 고정된 하루 분량이 아닌 학습 순서입니다.
목표
선택 좌표의 의미를 정하고 마커를 배치한다.
선수 지식
06, 20, 24.
핵심 개념과 설명
마커에는 world 위치와 화면에 표시할 위치가 필요합니다. 카메라가 움직이면 world 좌표를 다시 투영하여 DOM 마커 위치를 갱신할 수 있습니다. 물체 뒤에 가려졌는지와 화면 밖에 있는지를 별도로 판단합니다.
mesh의 교차점과 GS 전용 picking의 결과가 동일한 표면 의미를 갖는다고 가정하지 않습니다. 선택 결과가 center 근사인지 보이는 표면인지 명시하고 마커가 가리키는 의미를 UI와 문서에 씁니다.
학습 후 얻을 역량
- 선택 좌표의 의미를 정하고 마커를 배치한다.
- 아래 완료 조건을 재현하고 자가 점검 질문에 자신의 말로 답할 수 있습니다.
실습 과제
- mesh의 raycast 교차점에 작은 마커를 놓습니다.
- 카메라 이동·줌·리사이즈에서 마커 위치가 맞는지 확인합니다.
- GS에서는 선택 API의 기준을 확인하고 선택 불가/불확실한 경우의 표시를 정합니다.
관찰할 변수
교차 위치, camera 변환, occlusion, picking 기준.
완료 조건
- 마커 좌표계와 갱신 경로를 설명한다.
- 화면 밖/가림 상태를 처리했다.
- GS 선택의 한계를 명시했다.
자가 점검 질문
- world 좌표를 그대로 CSS left/top으로 쓸 수 있나요?
- GS의 보이는 경계와 선택 기준이 다르면 어떻게 안내하나요?
공식 참고
실험 기록 — 직접 작성
목표
핵심 개념
바꾼 변수와 예상
실제 결과
배운 점
남은 질문
이전: 카메라 이동·회전·줌 · 다음: FPS·Draw Calls·메모리 분석
연결된 예제와 실행 범위
원본 실행 코드 · 화면 단위 ID: 25-markers
연결된 원본 코드를 Monaco에서 편집하면 검사 후 sandbox 미리보기에 반영됩니다. 확장 과제와 완료 조건은 직접 수행하고 결과를 기록하세요.
기존에 저장한 코드가 있으면 그대로 유지합니다. 새 원본을 사용하려면 먼저 전체 JSON으로 백업한 뒤 원본 코드로를 선택하세요. 필기는 지워지지 않습니다.