---
type: page-frontend
status: stable
page_id: B05_Profile
related_pages: ["[[B05_Profile/B05_frontend]]", "[[B05_Profile/B05_backend]]", "[[architecture/project_map]]", "[[architecture/workflow_data_flow]]"]
last_updated: 2026-07-23
source: ["docs/raw/verification/2026-07-19_verify_responsive_layout_drag.md", "docs/raw/verification/2026-07-19_verify_b05_dark_theme.md"]
---

# B05_Profile — 3D Viewer & Interaction

## 3D 지형 뷰포트 시각화 (`_UI_Viewer.ts`, `_UI_Markers.ts`)
*   B04에서 확정된 지표면 모델 정보를 기반으로 preview(GLTF/PLY) 파일 및 DTM/TIN 모델을 자동으로 렌더링합니다.
*   **뷰 컨트롤 오버레이**: 3D 뷰포트 내 좌상단 배치, 반투명 배경 및 블러 필터(`backdrop-filter: blur(6px)`)와 세로 구분선 적용. 체크박스 대신 `toggleButton` 형태(active 클래스 제어) 사용.
*   **측점 가로선 (`stationGroup` LineSegments)**: 최적 경로 라인 위에 종단면도 측점과 동일한 위치에 노란색(`0xfacc15`)으로 시각화. 선택된 측점은 빨간색(`0xef4444`)과 두꺼운 선으로 표시되며, 기존 10인덱스마다 그려지던 노란색 수직선은 삭제.
*   **가로선 반폭 연동**: 도로폭 조회 API를 통해 가져온 법정 최소 도로폭 정보(`FOREST_ROAD_MIN_WIDTH_M`)를 기반으로 임도 등급(`gradeClass`)에 맞춰 `roadWidths[gradeClass] / 2`로 자동 연동 설계.
*   **3D 뷰어 다크 테마 배경 연동**: 다크 테마 시 `--color-surface-raised` 값을 동적 감지하여 `scene.background`에 연동. 미감지 시 다크 폴백(`DARK_VIEWER_BACKGROUND = 0x251f38`) 사용. MutationObserver 및 dispose()를 통한 자원 해제 보장.

## 3D 마커 직접 드래그 이동 (0_old I-401 이식)
*   3D 뷰에 배치된 BP/EP/CP/AP/FP 마커를 포인터로 드래그하여 지형 표면 위에서 직접 위치 변경 가능 (`setPointerCapture` / `releasePointerCapture` 활용).

| 이벤트 | 조건 및 동작 |
|---|---|
| `pointerdown` | 드래그 후보(`dragStart`)로만 등록 |
| `pointermove` | 이동 거리가 `3px` 초과 시 드래그 모드로 판별, `OrbitControls.enabled = false`로 카메라 회전 차단 후 레이캐스트 지점으로 마커와 AP/FP 실린더 동기 이동 |
| `pointerup` | 최종 지형 좌표로 상태 갱신/저장, `OrbitControls` 복원. 이동 거리 `3px` 이하 시 클릭 선택/팝오버 수행 |
| `pointerleave`/`cancel` | 드래그 동작 안전하게 롤백 종료 |

*   AP(회피 영역), FP(금지 영역) 마커는 실시간 반경 입력 팝오버를 제공하여 반경 변경 및 위치 조정을 연동.