Skip to main content

3D Simulation Dashboard (ThreeJsForDemoPurpose)

📌 What is this for? (Quick Summary for New Interns)​

In Simple Words:
While the 2D dashboard shows charts and numbers, this project gives you an interactive 3D view of the hyperloop in action.

Imagine a video game camera flying alongside the pod:

  • You can see the 600-meter track, the container yard, and the pod moving along the rails in 3D.
  • The pod's position is driven by real live sensor numbers from the cloud.
  • Floating over the 3D scene is a semi-transparent HUD showing speed, battery voltage, and a draggable live camera window so you can watch what the pod's front camera sees while flying the 3D camera around.

1. How the 3D View is Structured​

graph TD
    App["App.jsx (User Login & Authentication)"]
    Login["LoginPage.jsx (Cognito Sign-in Screen)"]
    Dashboard["dashboard.jsx (Connects 3D Canvas + 2D Overlay)"]

    subgraph ThreeCanvas["3D Scene (Three.js & React Three Fiber)"]
        Scene["Environment (Sky, Sunlight matching Indian Standard Time)"]
        Track["600m Track Model (Rails & Distance signs every 25m)"]
        Yards["Container Logistics Yard (MAERSK, MSC, EVERGREEN stacks)"]
        Pod["Pod Vehicle Model (Bogies, Wheels, Container body)"]
        Spline["Math Smoothing (Makes the 3D pod move at 60 FPS without stutter)"]
    end

    subgraph HUDLayer["2D Heads-Up Display (Floating on Top)"]
        TopNav["Top Bar (Speed, Distance, Gateway status, Run time)"]
        VelocityPanel["Speed & Acceleration Card"]
        BatteryPanel["Battery % & Voltage Card"]
        ControlPanel["Enable Battery, Launch, and Stop buttons"]
        CamPiP["Draggable Front Camera Window (LiveCamPiP)"]
    end

    App -->|If logged out| Login
    App -->|If logged in| Dashboard
    Dashboard --> ThreeCanvas
    Dashboard --> HUDLayer
    Spline -->|Updates position smoothly| Pod

2. Standalone Application Features​

  • Independent Project: This is a clean, standalone Vite application with its own Amplify login, API client, and 3D rendering loop.
  • Draggable Camera Window (LiveCamPiP.jsx):
    • Shows the front camera (CAM 1) floating on top of the 3D scene.
    • You can click and drag it anywhere on your screen so it doesn't block your view of the pod.
    • Click the expand icon to make it larger or smaller.
  • Realistic Lighting matching the Real Clock:
    • The sun position and sky colors automatically calculate where the sun is in the sky based on real Indian Standard Time (IST). If you test at night, the 3D scene turns into night mode.

3. How to Run It on Your Laptop​

cd "Client Dashboard/ThreeJsForDemoPurpose"

# 1. Install dependencies
npm install

# 2. Run local development server
npm run dev

Open http://localhost:5173 in your browser, log in with your credentials, and you will see the 3D environment load up in seconds!