Interactive 3D visualization and real-time operations dashboard for modern campus infrastructure management.
This repository contains the interactive frontend implementation for the Group I3 Smart Campus Digital Twin project. It leverages WebGL to deliver high-performance 3D visualization right inside the browser, rendering building architectures and syncing their real-time telemetry datasets.
The system allows continuous monitoring of critical facility components like energy loads, environmental temperatures, and spatial occupancies to empower preemptive management and resource optimizations.
- 🌐 3D Campus Visualization: Rendered interactively utilizing WebGL, React Three Fiber, and Three.js.
- 📊 Real-time Telemetry Dashboard: Floating panels displaying actively synced statuses of individual campus zones.
- 🎨 Custom Interactive Theme: UI and UX built around a sleek dark-teal theme (
#071952,#0B666A,#35A29F, and#97FEED). - ⚡ Dynamic Status Adapting: Automatically tags environments as
Normal,Busy, orCriticaldepending on energy, temperature, and occupancy thresholds. - 🖱️ Spatial Interaction: Orbit tools allowing 360-degree views, pan & zoom functionality, and direct mesh clicks to fetch data.
- Framework: Next.js 15 (App Router)
- UI / Styling: Tailwind CSS v4, Lucide React (Icons)
- 3D Engine: Three.js
- React 3D Integrations:
@react-three/fiber,@react-three/drei
Make sure you have Node.js installed on your machine.
- Clone this repository directly to your machine.
git clone https://github.com/lakaThabrew/Smart_Campus_Digital_Twin.git- Navigate into the frontend ecosystem:
cd "Smart_Campus_Digital_Twin/frontend"- Install the NPM dependencies:
npm install- Spin up the Next.js development server:
npm run dev- Access the Digital Twin Dashboard by launching your browser and navigating to:
http://localhost:3000
Group I3 (Sys Eng & Interaction)
Developed as a course requirement to simulate next-generation Cyber-Physical Systems.