🧬 EduSim

An interactive 3D human anatomy explorer built with Three.js and vanilla JavaScript/HTML/CSS. No frameworks, no build tools.

Live Demo

---

Features

🫀 3D Anatomy Explorer

• Loads a real Z-Anatomy GLTF/DRACO model with 200+ anatomical structures
• Toggle visibility of muscles, bones, and organs independently
• Click any structure to get detailed medical info with Wikipedia links
• X-ray mode for seeing through outer layers
• Built-in search to find specific anatomical parts
• Floating 3D labels that track structures in real time

📊 Student Analytics Dashboard

• 4 Chart.js visualizations: line, doughnut, stacked bar, and radar
• Tracks learning progress, module completion, time distribution, and skill profiles
• Session tracking with localStorage persistence
• Key metrics: Total Sessions, Time Invested, Avg Score, Completion Rate

---

Tech Stack

Layer	Technology	Purpose
3D Engine	Three.js r128	WebGL rendering, scene management
Charts	Chart.js 4.x	Dashboard visualizations
Styling	Vanilla CSS	Glassmorphism, dark mode, animations
Logic	ES6+ JavaScript	Modular OOP, event system
Structure	HTML5	Semantic markup, accessibility
3D Models	GLTF + DRACO compression	Z-Anatomy open dataset (CC BY-SA 4.0)

Zero build tools. Runs from any static HTTP server.

---

Project Structure

edusim/
├── index.html                 # Single-page application
├── favicon.png
├── css/
│   └── styles.css             # Full design system
├── js/
│   ├── app.js                 # Main controller and routing
│   ├── sceneManager.js        # Three.js lifecycle and preview renderer
│   ├── simulations/
│   │   └── anatomy.js         # GLTF body explorer (200+ structures)
│   ├── ui/
│   │   ├── dashboard.js       # Chart.js dashboard (4 charts)
│   │   ├── hud.js             # Contextual HUD panels
│   │   ├── notifications.js   # Toast notification system
│   │   └── objectives.js      # Learning objectives tracker
│   └── utils/
│       ├── analytics.js       # Session tracking and persistence
│       └── helpers.js         # Math, color, and utility functions
├── models/
│   ├── body.glb               # Full body GLTF model
│   └── organs/                # Individual organ models (heart, brain, lungs, etc.)
└── README.md

---

Quick Start

git clone https://github.com/deepgori/edusim.git
cd edusim

# Serve locally (pick one)
python3 -m http.server 8080
# or
npx serve .
# or use VS Code Live Server

open http://localhost:8080

Or just visit the live site.

---

Design Decisions

• No frameworks - Built with vanilla JS/HTML/CSS to demonstrate core web fundamentals
• Three.js via CDN - No npm/webpack setup needed, the project runs instantly from any static server
• GLTF + DRACO - Real anatomical models compressed down to ~35MB for fast loading
• Glassmorphism + Dark Mode - Clean, modern look that fits a science/education platform
• Progressive disclosure - Tutorial overlays for first-time users, HUD panels that show data in context

---

License

MIT License - Deep Gori © 2025