Three.js 오브젝트 선택 디버깅: Raycaster 대상, hit area, 선택 우선순위 정리
Three.js 편집 UI에서 얇은 선이 클릭되지 않거나 엉뚱한 객체가 선택되는 문제를 pickable registry, userData, 투명 hit mesh, 선택 우선순위, 생명주기 관리로 좁혀 간 과정입니다.
2026년 5월 12일
8분 읽기
Writing
카테고리별로 모았습니다.
- SVG 에디터 인터랙션이 꼬일 때 디버깅한 순서
- SVG 에디터에서 문서 상태와 편집 상태의 경계를 나눈 기준
- Three.js 3D 수학교구의 가림 문제를 depthTest, depthWrite, renderOrder로 정리한 기준
- SVG 수학교구 20종을 확장 가능하게 만든 DigitalMathElement 설계
- 수학교구 SVG 캔버스의 인터랙션 구조: 입력 이벤트, store 선택 흐름, 교구별 조작 규칙
- 2D SVG 교구와 3D Three.js 교구를 하나의 캔버스 경험으로 묶기
- SVG 에디터 undo/redo 스냅샷 설계
- SVG 좌표 변환에서 포인터 위치가 어긋나는 문제
- SVG 도형 리사이즈 핸들 제약 조건 정리
- Three.js 오브젝트 선택 디버깅: Raycaster 대상, hit area, 선택 우선순위 정리
- Three.js 좌표축 클릭 시 카메라 방향 꼬임 문제
- Three.js 카메라 상태 저장
- Three.js 겨냥도 구현하기
- Three.js LineGeometry 문제 해결
- useLine 로직 통합하기