Three.js 3D 수학교구에서 depth buffer와 renderOrder로 정보 가림 문제 해결하기
3D 수학교구에서 블록, 축, 숫자 라벨이 서로 가려지는 문제를 depthTest, depthWrite, renderOrder 기준으로 정리한 과정입니다.
2025년 7월 30일
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 설계