---
title: Flight Simulator
emoji: ✈️
colorFrom: blue
colorTo: purple
sdk: docker
app_port: 7860
pinned: false
---

# Flight Simulator
A premium 3D flight simulator built with Three.js. Control a low-poly stealth fighter aircraft in a highly stylized, cinematic environment with realistic physics, dynamic lighting, and a modern glassmorphic HUD.

## Prerequisites

Before running this project locally, make sure you have Node.js installed on your system. You can download it from:
https://nodejs.org/

## Installation

1. Install Node.js from the link above
2. Open a terminal in this project directory
3. Run `npm install` to install dependencies
4. Run `npm run dev` to start the development server

## Hugging Face Spaces Deployment

This project is pre-configured to be deployed as a **Docker Space** on Hugging Face.
1. Create a new Space on Hugging Face.
2. Select **Docker** as the SDK.
3. Upload all project files.
4. The deployment will automatically build and serve the application on port `7860` using the provided `Dockerfile`.

## Controls

### Flight Controls
- **WSAD**: Pitch/Roll
- **QE**: Yaw
- **Shift**: Afterburn (cyan glowing thruster boost)
- **Arrow Up / Down**: Increase / Decrease base cruise throttle

### System Controls
- **Escape**: Toggle pause menu
- **Click**: Resume from pause menu

## Features

### Aircraft & Physics
- **Premium Stealth Fighter**: Custom delta-wing design with angled V-tail stabilizers, dark glass canopy, and glowing neon cyans panel accents.
- Simplified aerodynamics simulation with lift, drag, and thrust.
- Stall physics when speed drops below stall threshold (35 kn).
- Engine states: Afterburn (Speed 180+), High, Nominal, Low.
- Smooth follow camera that dynamically adjusts FOV and distance based on speed.

### Cinematic Environment
- **Dynamic Day/Night Cycle**: A slow 7-minute continuous loop transitioning the sky gradient through dawn, noon, vivid sunset, and deep starry night.
- **Lighting & Shadows**: PCF Soft Shadows enabled. Dynamic shifting hemisphere and directional orbital lighting.
- **Volumetric Fog**: Deep atmospheric fog that shifts colors based on the time of day.
- **Low-Poly Art Style**: Stylized terrain with jagged, procedurally generated fractal mountains, snow caps, and forests for a sharp, premium aesthetic.
- **Reflective Water**: Beautifully refractive lake surfaces mirroring the sun and sky colors.

### HUD (Heads-Up Display)
- **Glassmorphic Design**: Modern, premium dark semi-transparent UI with blur effects and cyan/green highlight accents.
- Vertical scrolling tapes for Airspeed (knots) and Altitude (meters).
- Sleek horizontal compass heading bar with wrap-around tracking.
- Artificial horizon ring with bank markers and moving pitch ladder.
- Clean telemetry strip and contextual "controls" guide that fades in on hover.
- Warnings for low altitude.

## Technical Details

- **Engine**: Three.js r160
- **Build Tool**: Vite
- **Rendering**: WebGL with antialiasing, `ACESFilmicToneMapping`, cast/receive shadows
- **Serving**: Includes a lightweight static server (`serve`) for Docker deployments

## License

Private - All rights reserved