제작자: The Bugged Dev
라이브 체험 프로젝트 소개
Anatomy Atelier는 심장, 뇌, 폐, 간, 신장, 눈, 장, 췌장, 피부를 검색 가능한 9개 장기 라이브러리로 모았습니다. 각 항목은 회전·확대할 수 있는 3D 표본에 구조 핫스팟, 핵심 정보, 학습 카드를 결합하고 단면, 레이어, 분리 및 장기 비교 도구도 제공합니다.
모델 탐색을 넘어 수업, 간단한 애니메이션 일러스트 및 퀴즈로 이어집니다. GLTFLoader와 Meshopt 디코더가 각 에셋을 불러오며, 3개 장기 캐시, 프리페치 및 온디맨드 렌더링으로 잦은 전환에도 빠르게 반응합니다.
체험 포인트
- 심장, 뇌, 폐, 간, 신장, 눈, 장, 췌장, 피부의 9개 장기를 검색하고 전환할 수 있습니다.
- 드래그해 회전하고 스크롤해 확대·축소하며, 핫스팟을 선택해 구조 설명을 확인할 수 있습니다. 자동 회전을 켜 두고 연속으로 관찰할 수도 있습니다.
- 단면으로 내부 구조를 확인하고 와이어프레임 레이어 보기로 전환하거나, 분리 모드에서 받침대와 접촉 그림자를 흐리게 표시할 수 있습니다. 비교 모드에서는 두 장기를 나란히 보여 줍니다.
- 장기 정보와 학습 카드에서 수업과 퀴즈로 이어지며, 자유 탐색을 안내형 학습으로 확장합니다.
기술 분석
3D 에셋 · Tripo 장기 라이브러리
9개 장기는 장면 노드와 재질에 Tripo 식별자가 포함된 개별 GLB 에셋으로 제공됩니다. GLTFLoader와 Meshopt 디코더가 각 장기를 하나의 보기 공간에 불러와 크기를 맞추고 중앙에 배치하므로, 핫스팟과 뷰어 도구가 같은 좌표계를 공유할 수 있습니다.
뷰어 인터랙션 · 컨트롤과 화면 공간 핫스팟
OrbitControls가 회전, 확대·축소 및 자동 회전을 처리합니다. 핫스팟은 포인터 선택에 화면 공간 투영을 사용하고, 깊이 버퍼와 방향 판정으로 메시 레이캐스트를 반복하지 않고 가시성을 제어합니다. 클리핑 평면은 단면을 제공하고, 와이어프레임 전환은 레이어 보기를 보여 주며, 분리 모드는 받침대와 접촉 그림자를 흐리게 합니다. 비교 모드는 두 장기를 나란히 배치하고 현재 장기의 역할과 크기 정보도 표시합니다.
로딩 전략 · 3개 모델 캐시와 프리페치
에셋 관리자는 최근 사용한 장기 3개를 유지하고 진행 중인 로딩 요청을 재사용합니다. 장기에 포인터를 올리거나 포커스하면 낮은 우선순위로 GLB 프리페치를 시작하며, 장기를 전환할 때는 관련 일러스트도 브라우저 캐시에 미리 불러옵니다.
렌더링과 학습 · 필요할 때만 업데이트
상시 실행되는 애니메이션 프레임 루프는 상호작용, 애니메이션 또는 상태 변화가 있을 때만 렌더러를 호출하므로 정지된 장면을 계속 다시 그리지 않습니다. React는 검색, 장기 선택, 비교, 수업 및 퀴즈를 관리하고, GSAP은 선택된 콘텐츠가 바뀔 때 가벼운 등장 애니메이션을 더합니다.
