xr843/insect-world

Interactive 3D insect field guide: 63 species across 14 orders, every body procedurally generated in the browser with TypeScript + Three.js — no model or texture files in the repo. Eight species step through a full life cycle; the hoverers beat their wings.

해결하는 문제

Insect World는 14개의 목에 걸쳐 63종의 곤충을 다루는 인터랙티브 3D 백과사전입니다. 정적인 이미지나 사전에 제작된 3D 모델이 아닌, 시각적이고 인터랙티브한 경험을 통해 곤충의 해부학, 생애 주기, 생태적 역할을 배울 수 있는 방법을 제공합니다.

작동 방식

전통적인 3D 갤러리와 달리, 이 프로젝트는 브라우저 내에서 TypeScript로 실시간으로 생성되는 파라미터화된 기하학을 사용합니다. 외부 모델 파일(GLB/OBJ)은 전혀 사용하지 않습니다. 대신 코드가 각 곤충의 구조적 파라미터(머리, 가슴, 배, 다리, 날개)를 정의하여 실시간으로 기하학을 구축합니다.

주요 기술적 특징:

  • 절차적 텍스처 생성: CanvasTexture를 사용하여 미세한 표면 디테일인 구멍, 홈, 복합눈 패턴 등을 생성합니다.
  • 동적 애니메이션: 도마뱀의 반상적 날개 펄럭임과 나비의 지속적인 '부화' 애니메이션과 같은 생물학적으로 기반을 둔 움직임을 구현합니다.
  • 생애 주기 모델링: 특정 종에 대해 알, 유충, 번데기, 성충의 모델을 생성하여 완전변태와 불완전변태의 차이를 보여줍니다.
  • 인터랙티브 도구: 내부 구조를 관찰할 수 있는 세로면 절단 도구, 외골격의 투명도를 조절할 수 있는 레이어링 도구, 특정 해부학적 지점을 향해 카메라를 이동시키는 가이드 투어를 포함합니다.

대상 사용자

시각적으로 매력적인 방식으로 곤충의 형태학과 생물학을 탐구하고 싶은 호기심 많은 독자와 학생, 그리고 절차적 3D 생성과 인터랙티브 교육 도구에 관심 있는 개발자들을 위한 것입니다.

주요 특징

  • 자산 의존 없음: 모든 63종이 코드에서 렌더링되므로 확장성이 뛰어나고 가볍습니다.
  • 생애 주기 시각화: 8종의 곤충에 대해 알, 유충, 번데기, 성충의 총 22개의 단계 모델을 생성하며, 특히 번데기와 유충의 세부 모델을 포함합니다.
  • 생물학적으로 근거 있는 움직임: 화면 표시를 위해 날개 펄럭임 주파수를 압축했지만, 종 간 상대적 순서는 유지됩니다.
  • 포괄적인 테스트: 기하학적 유효성, 대칭성, 중국어 및 영어 버전 간 데이터 일치를 보장하기 위해 4,000개 이상의 테스트를 수행했습니다.
  • 이중 테마: "표본 테이블" 라이트 모드와 "박물관의 밤" 다크 모드를 제공하며, 반사성 날개와 생물발광을 위한 특수 조명을 지원합니다.

관련

  • 프로젝트
  • 프로젝트
  • 프로젝트
  • 프로젝트
  • 프로젝트