human development

Explorer combines dynamic spatial rendering with an agentic Gemini AI assistant to revolutionize medical embryology education.

Comment

🧬 3D Embryo Explorer

An interactive 3D, AI-powered platform for exploring human embryonic development from Day 1 → Day 28.

💡 Inspiration

Understanding early human embryology—especially the dramatic transformations occurring between Week 1 and Week 4—is one of the most challenging parts of medical education.

Traditional 2D textbook diagrams often struggle to represent the complex spatial relationships involved in:

Gastrulation → Neurulation → Embryonic Folding → Organogenesis

We created 3D Embryo Explorer to transform embryology from something students primarily memorize into something they can see, manipulate, and explore.

What if students could actually step inside a developing human embryo?

🧬 What It Does

3D Embryo Explorer is an interactive 3D web platform that maps major human developmental milestones from Day 1 → Day 28.

📅 Interactive Developmental Timeline

Day 1
🧬 Zygote
↓
Day 3
🔵 Compacting Morula
↓
Day 5
🫧 Hatching Blastocyst
↓
Day 8
🟡 Bilaminar Disc
↓
Day 16
🧬 Gastrulation
↓
Day 21
🧠 Neurulation
↓
Day 28
❤️ Organogenesis + C-shaped Embryonic Folding

The Day 28 model also includes an animated embryonic heart with an approximately 160 BPM heartbeat.

🔬 Real-Time 3D Cross-Section Engine

One of the core features of 3D Embryo Explorer is the ability to slice through embryonic models in real time.

Users can explore three anatomical planes:

Sagittal ↕️ | Transverse ↔️ | Coronal ↕️

Interactive depth controls allow users to move through the model layer by layer.

3D Embryo Model
↓
Select Anatomical Plane
↓
Adjust Section Depth
↓
Real-Time Cross-Section
↓
Explore Internal Structures

This allows students to understand spatial relationships that are difficult to appreciate from static diagrams.

🧬 Germ Layer & Structure Inspection

Structures can be isolated and highlighted according to their developmental origin:

  • 🔵 Ectoderm
  • 🟢 Mesoderm
  • 🟡 Endoderm
  • 🟣 Trophoblast
  • ⚪ Extraembryonic / Other

The platform helps students visualize:

Germ Layer → Differentiation → Tissue → Organ

Instead of memorizing isolated lists, students can visually follow developmental organization.

👁️ Exploded Views & Transparency

Users can make external cellular structures semi-transparent or separate developmental layers using an exploded-view mode.

Normal 3D Model
↓
Transparency Mode
↓
Exploded Germ-Layer View
↓
Separate Developmental Layers
↓
Study Internal Spatial Relationships

🤖 AI-Powered Embryology Assistant

3D Embryo Explorer integrates server-side Gemini AI to provide contextual embryology assistance.

Users can ask questions about developmental mechanisms directly while exploring the model.

Student Question
↓
Backend Server
↓
Google Gen AI SDK
↓
Gemini
↓
Contextual Embryology Explanation

This creates an interactive learning loop:

Explore → Question → Understand → Explore Again

📝 Collaborative Study Tools

The platform includes:

  • 📝 Cloud-synchronized study/lab notes
  • 📐 Custom camera and slicing presets
  • 💬 Peer discussion panels
  • ☁️ Real-time data synchronization
  • 🤖 AI-assisted embryology Q&A

Together:

3D Visualization + AI Tutor + Notes + Collaboration

creates a unified embryology learning environment.

🛠️ How We Built It

🎨 Frontend & 3D Graphics

Our frontend and visualization stack includes:

React 19
↓
TypeScript
↓
Vite
↓
Three.js
↓
OrbitControls

Three.js powers the interactive 3D rendering, model manipulation, animations, and real-time cross-section functionality.

🎨 Styling & UI

The interface was developed using:

  • Tailwind CSS v4
  • Lucide React

⚙️ Backend & API

The backend architecture uses:

Node.js
↓
Express
↓
Server-Side API Layer

This handles server-side interactions, AI requests, and application logic.

🗄️ Database & Authentication

Firebase

Firebase Authentication
↓
Firestore
↓
Real-Time Synchronization

Firebase provides:

  • Authentication
  • Cloud-synchronized notes
  • Discussion threads
  • Real-time data synchronization

PostgreSQL

PostgreSQL
↓
Drizzle ORM
↓
Structured Application Data

🤖 AI Integration

The AI system uses the official Google Gen AI SDK:

@google/genai

The SDK is integrated server-side to provide contextual embryology assistance using Gemini.

Frontend
↓
Backend
↓
Google Gen AI SDK
↓
Gemini
↓
Backend
↓
Frontend

🏆 Accomplishments We're Proud Of

🧊 1. Real-Time 3D Cross-Sections

We implemented dynamic 3D cross-sectional visualization directly inside the browser using Three.js.

3D Embryo
↓
Select Plane
↓
Set Depth
↓
Slice Model
↓
Inspect Internal Anatomy

🧬 2. Modeling Complex Developmental Events

The platform represents complex developmental transformations:

Cellular Organization
↓
Germ Layer Formation
↓
Differentiation
↓
Embryonic Folding
↓
Organogenesis

We also incorporated animated functional elements, including an early embryonic heart tube with an approximately 160 BPM heartbeat.

🌐 3. Building More Than a 3D Viewer

Our goal was not simply to create another 3D model.

We combined:

3D Visualization

  • Real-Time Cross-Sections
  • Germ-Layer Visualization
  • AI Tutoring
  • Cloud-Synchronized Notes
  • Peer Collaboration

into a single learning environment.

🚀 Why It Matters

Embryology is inherently three-dimensional and dynamic, yet it is frequently taught through static two-dimensional diagrams.

Traditional Learning

2D Diagram
↓
Memorization
↓
Limited Spatial Understanding

3D Embryo Explorer

Interactive 3D Model
↓
Manipulation
↓
Cross-Section
↓
AI Question
↓
Visual Understanding
↓
Deeper Learning

Our vision is to make embryology something students don't just memorize—

but something they can explore.

🧬 3D Embryo Explorer

From a single cell to an organized embryo — one interactive layer at a time.

Built With

Share this project:

Updates