Skip to content

modisapudikamogelo78-coder/apexlearninglab

Repository files navigation

🧬 3D Learning Lab

Interactive 3D exploration meets AI-powered learning
A revolutionary educational platform where you can explore the universe, perform virtual surgery, and turn your notes into personalized study tools.

License: MIT React Three.js TypeScript


✨ What Is This?

3D Learning Lab is a unified learning platform that transforms education through:

🎯 Interactive 3D Models – Explore 21+ detailed 3D scenes across 9 subjects
🤖 AI Study Tools – Upload your notes and generate quizzes, podcasts, and exam papers
🔬 Virtual Experiments – Perform surgery, conduct dangerous experiments, and manipulate molecules with hand-tracking technology
🎮 Gamified Learning – Runner-style quizzes with streak bonuses and real-time feedback


🚀 Features

📚 Subject Library (9 Subjects, 21+ Topics)

Subject Interactive 3D Models
🧬 Life Sciences Human Heart, Lungs, DNA Double Helix
🌌 Astronomy Solar System, Milky Way Galaxy, The Moon
⚗️ Chemistry Water Molecule, Carbon Dioxide, Methane
📊 Business Corporate Structure, Supply Chain
Physics Atomic Model, Pendulum, Wave Motion
💻 Computer Science Binary Tree, Neural Network
🌍 Geography Earth's Layers
📐 Mathematics Platonic Solids
🏛️ History Pyramids of Giza, Roman Colosseum, Medieval Castle

🔬 Experimental Mode (Coming Soon)

Hand-Tracking Virtual Labs – Use your webcam to:

  • 🫀 Perform guided heart surgery
  • ⚗️ Conduct dangerous chemistry experiments safely
  • 🧪 Build molecules atom-by-atom
  • 🌋 Simulate volcanic eruptions and tectonic shifts
  • ⚛️ Manipulate atomic structures with your hands

🤖 AI-Powered Study Tools

📝 Note Upload System

  • Drag-and-drop PDF or TXT files
  • Paste text directly
  • Server-side PDF parsing
  • Cloud storage with user authentication

🎮 AI Runner Quiz Game

  • 10 AI-generated multiple-choice questions from your notes
  • Runner-style gameplay with lane-switching mechanics
  • Streak system: 3+ correct = +50 bonus points
  • Dynamic speed adjustment based on performance
  • Detailed answer explanations

🎥 Interactive Video Podcast

  • AI host explains your notes via video
  • Real-time Q&A during the session
  • Powered by Beyond Presence API
  • Content processing up to 50,000 characters

📄 Question Paper Generator

  • Choose difficulty: Easy, Medium, Hard
  • Auto-generates structured exam papers:
    • MCQs with lettered options
    • Short answer questions
    • Long answer questions with mark allocations
  • Toggleable answer key
  • Professional formatting with instructions

🎨 Modern UI/UX

  • 🌑 Dark glass-morphism design
  • Space-themed backgrounds for astronomy topics
  • 🔄 Auto-rotating models when idle
  • 📱 Responsive design for all devices
  • 🎯 Clickable model parts with detailed info panels

🛠️ Tech Stack

Frontend

  • React 18+ – Component-based UI
  • TypeScript – Type-safe development
  • Three.js – 3D rendering and visualization
  • React Three Fiber – React renderer for Three.js
  • Tailwind CSS – Utility-first styling

Backend

  • Lovable Cloud – Serverless backend
  • Supabase – Authentication & database
  • Claude API – AI content generation

Upcoming Features

  • MediaPipe Hands – Webcam hand-tracking
  • Cannon.js / Rapier – Physics simulations
  • TensorFlow.js – ML-powered interactions

📦 Installation

Prerequisites

node >= 18.0.0
npm >= 9.0.0

Clone & Install

git clone https://github.com/modisapudikamogelo78coder/3d-learning-lab.git
cd 3d-learning-lab
npm install

Run Development Server

npm run dev

Open https://apexlearninglab.lovable.app in your browser.


🎯 Usage

1️⃣ Explore 3D Models

  1. Browse subjects on the home screen
  2. Click any topic to enter the 3D viewer
  3. Rotate: Left-click + drag
  4. Zoom: Scroll wheel
  5. Select parts: Click bottom buttons to highlight & read details

2️⃣ Upload Notes

  1. Sign in with email/password
  2. Navigate to any subject page
  3. Upload PDF/TXT or paste text in the "Upload Your Notes" section

3️⃣ Generate Study Materials

  • Quiz Tab: Play the runner game with AI-generated questions
  • Video Tab: Watch an AI tutor explain your notes
  • Paper Tab: Generate exam papers with customizable difficulty

4️⃣ Experimental Mode (Coming Soon)

  1. Enable webcam access
  2. Select a model (e.g., Human Heart)
  3. Follow on-screen AI guidance
  4. Use hand gestures to perform experiments

🗂️ Project Structure

About

3D Learning Lab is a next-generation educational platform that transforms passive learning into active exploration. It's where AI tutoring meets hands-on experimentation, where dangerous chemistry becomes safe play, and where complex anatomy becomes a game you can touch. With your proposed feature, it evolves from a study tool into a virtual lab.

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages