셀 아키텍처 스튜디오

React, Vite, Three.js 및 스테이지드 GLB 또는 절차적 3D 셀 자산으로 구성된 인터랙티브 셀 아키텍처 갤러리입니다. 이 프로젝트는 선택 가능한 세포 유형, 소기관 세부사항, 비교 모드, 반응형 레이아웃, 시각적 검증 커버리지를 갖춘 프리미엄 교육용 생물학 인터페이스를 재현합니다.

라이브 데모

라이브 Vercel 배포를 열기

MP4 데모 파일 보기

하이라이트

• 7개의 표본 뷰: 식물 세포, 백혈구, 뉴런, 상피세포, 박테리아 세포, 동물 세포, 근육 세포.
• 고충실도 식물세포 및 백혈구 GLB 렌더링과 자연 질감 보존.
• 기본 뷰로 3D 캔버스 렌더링을 사용하는 메시 우선 경험.
• 학습 프롬프트, 수업 집중, 숙달 추적 기능이 있는 AI 튜터 패널.
• 느린 네트워크에서 대규모 GLB 자산에 대한 부하 오버레이 모델링
• 아직 생산 GLB 자산이 없는 표본에 대한 절차적 대체 기하학
• 소기관, 현미경 모드, 표본 메타데이터, 비교 워크플로우에 대한 세부 패널
• 브라우저 스크린샷 검증이 가능한 반응형 데스크톱, 컴팩트, 모바일 레이아웃.

미리보기 모드

모드	목적
메시	사용 가능한 GLB 모델이나 절차적 Three.js 기하학을 불러오세요.
집중	선택된 소기관과 이를 뒷받침하는 생물학적 세부 사항을 강조합니다.

테크 스택

레이어	도구
앱	React 19, TypeScript, Vite
3D	Three.js, 리액트 쓰리 파이버, 드라이
UI	'src/styles.css'의 CSS 모듈, Luci

---

🌐 본 텍스트는 빠른 이해를 돕기 위한 요약 번역본입니다. 정확한 기술 정보 및 전체 코드는 GitHub 원문에서 확인하실 수 있습니다.