TL;DR

이 저장소는 React Three Fiber와 Three.js로 만든 standalone 웹 도구이자 3D 곤충 field guide입니다. 63종의 몸체를 TypeScript builder가 브라우저에서 절차적으로 생성하고, Vite 코드 분할로 선택한 종의 모듈만 불러오므로 외부 모델·texture 파일과 백엔드가 필요 없습니다. 회전·확대·절단·레이어·비교·부위별 가이드·Quiz를 제공하며 Cloudflare Pages에 정적 배포할 수 있습니다. 4000개가 넘는 테스트가 구현 접점을 관리하지만 AI 작성 콘텐츠는 전문가 검수를 받지 않았으므로 학술 자료보다는 시각화 기반과 교육용 인터랙션 참고 사례로 사용하는 편이 적절합니다.

핵심 포인트

• Standalone web tool인 대화형 3D 곤충 도감으로 React Three Fiber와 Three.js 생태계에 속합니다. TypeScript가 브라우저에서 각 곤충의 기하를 실시간 생성하므로 GLB 모델이나 texture 파일 없이 동작합니다. 63종과 14개 목을 탐색하려는 교육용 웹 서비스에는 적합하지만, 별도 SDK나 재사용 가능한 라이브러리를 기대하면 맞지 않습니다.
• 각 종은 `build<Name>(): InsectModel`을 내보내는 개별 builder와 공통 `kit.ts`를 조합해 생성됩니다. `loft`, `leg`, `wing`, `compoundEye`, `venation` 같은 API가 입력 치수와 색상 데이터를 폐쇄형 geometry와 anchor로 변환하며, 종 모듈은 Vite의 `import.meta.glob`으로 필요할 때 동적으로 로드됩니다. 종별 코드가 200~400행이고 물종 추가 시 geometry, 중·영문 데이터, 가이드, SVG 실루엣을 모두 작성해야 하므로 확장성은 높지만 제작 비용도 분명합니다.
• 3D 전시장은 회전, 확대, 부위별 색상 hotspot, 포커스, 절단, 반투명 레이어, 종간 비교를 실제 장면 상태에 연결합니다. 가이드의 각 단계는 대응하는 anchor의 세계 좌표로 카메라를 이동하고, Quiz는 답안 판정과 해설 및 점수 집계를 수행합니다. 13,308~35,732 삼각형의 모델을 브라우저에서 30~90밀리초에 만들고 생산 빌드의 초기 JS gzip이 약 424KB라는 점은 정적 교육 사이트와 인터랙티브 전시 UI에 실용적인 근거가 됩니다.
• 테스트는 50개가 넘는 파일과 4000개가 넘는 사례로 데이터 계약, 중·영문 필드 정렬, anchor 접점, 대칭성, 날개 방향, 면 수와 표면 재질을 검사합니다. 다만 문구와 생활사 정보는 AI가 작성했고 곤충학 문헌이나 전문가의 항목별 검수를 거치지 않았으며, 영어판도 AI 번역본입니다. 학술·정식 교육 자료로 쓰기보다 MIT 라이선스의 독립형 시각화 기반을 참고하거나, 전문 검수와 데이터 교체를 거쳐 유사한 도감을 구축할 때 활용하는 편이 안전합니다.

이미지 분석