Three.js 오브젝트 선택이 실패할 때 확인한 것들
Three.js 편집 UI에서 클릭이 안 잡히거나 엉뚱한 객체가 선택되는 문제를 Raycaster 대상, hit mesh, userData, 선택 우선순위로 좁힌 과정입니다.
2026년 6월 20일
5분 읽기
Writing
카테고리 단위로 작성 글을 빠르게 탐색할 수 있습니다.
- Three.js 렌더링 순서가 꼬일 때 depth와 renderOrder로 정리한 기준
- Three.js 오브젝트 선택이 실패할 때 확인한 것들
- SVG 에디터 인터랙션이 꼬일 때 디버깅한 순서
- SVG 에디터에서 문서 상태와 편집 상태의 경계를 나눈 기준
- 2D SVG 교구와 3D Three.js 교구를 하나의 캔버스 경험으로 묶기
- Three.js Raycaster 선택 영역 넓히기
- Three.js 3D 수학교구에서 depth buffer와 renderOrder로 정보 가림 문제 해결하기
- Three.js 좌표축 클릭 시 카메라 방향 꼬임 문제
- Three.js 카메라 상태 저장
- Three.js 겨냥도 구현하기
- Three.js LineGeometry 문제 해결
- SVG 에디터 undo/redo 스냅샷 설계
- useLine 로직 통합하기
- SVG 에디터 선택 상태와 렌더링 상태 분리하기
- SVG 도형 리사이즈 핸들 제약 조건 정리
- SVG 좌표 변환에서 포인터 위치가 어긋나는 문제
- 생성된 교구 객체를 store에 등록하고 선택·편집 흐름을 추적한 구조
- SVG 캔버스에서 PointerEvent와 KeyboardEvent를 함께 제어한 이유
- 교구마다 다른 drag·rotate·place 규칙을 안정적으로 분기한 방법
- SVG 수학교구 20종을 확장 가능하게 만든 DigitalMathElement 설계