2D SVG 교구와 3D Three.js 교구를 하나의 캔버스 경험으로 묶기
SVG 기반 2D 교구와 Three.js 기반 3D 교구를 같은 서비스 흐름 안에서 다루기 위해 상태와 UI 경계를 맞춘 과정을 정리합니다.
2025년 9월 04일
3분 읽기
Writing
카테고리 단위로 기술 문서를 빠르게 탐색할 수 있습니다.
- 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 설계