2D SVG 교구와 3D Three.js 교구를 하나의 캔버스 경험으로 묶기
SVG 기반 2D 교구와 Three.js 기반 3D 교구를 같은 서비스 흐름 안에서 다루기 위해 상태와 UI 경계를 맞춘 과정을 정리합니다.
2026년 5월 13일
3분 읽기
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 로직 통합하기