Virtual Chemistry Lab 3D

An interactive 3D chemistry lab simulation built with Three.js, where students can perform virtual experiments using realistic lab equipment (beakers, flasks, test tubes) and submit their work for professor review — all in the browser.

Features

• 🧪 Interactive 3D lab environment with draggable, physically modeled glassware (beaker, flask, test tube, Erlenmeyer & Florence flasks)
• 🎥 Screen recording of experiments, submitted directly for grading
• 👩‍🎓 Student accounts: run experiments, track submissions, view feedback
• 👨‍🏫 Professor accounts: review submitted experiment recordings and assign grades
• 🔑 Guest mode for exploring the lab without an account
• 📚 Guided tutorial video for first-time users

Tech Stack

• Frontend: Three.js (WebGL 3D rendering), vanilla JavaScript, HTML/CSS
• Backend: PHP
• Database: MySQL
• 3D Assets: GLTF/GLB models, HDR environment lighting

Project Structure

├── js/three/           # Three.js library + GLTFLoader, OrbitControls
├── models/              # 3D glassware models (.glb)
├── uploads/videos/      # Student experiment recordings (gitignored)
├── db.php               # Database connection (reads config from .env)
├── lab.js                # Core 3D lab scene logic
├── login.php / register.php / logout.php
├── student_index.php / professor_index.php / guest_index.php
├── submit_experiment.php
├── grade_submission.php
├── database.sql         # DB schema
└── studio.hdr / tutorial.mp4

Setup

1. Clone the repo

   git clone https://github.com/<your-username>/Virtual-Chemistry-Lab-3D.git
   cd Virtual-Chemistry-Lab-3D

2. Set up the database

   • Create a MySQL database and import the schema:

     mysql -u root -p < database.sql

3. Configure environment variables

   • Copy .env.example to .env and fill in your database credentials:

     cp .env.example .env

4. Run locally

   • Point a PHP-enabled web server (e.g. XAMPP, MAMP, or php -S localhost:8000) at the project root.
   • Open http://localhost:8000 in your browser.

Notes

• Student submission videos are not included in this repo for privacy reasons — the uploads/videos/ folder is gitignored.
• This project was built as a learning/portfolio project to explore combining WebGL-based 3D interaction with a traditional server-rendered PHP backend.

License

This project is licensed under the MIT License — see LICENSE for details.