English · 简体中文
Your A320 flight deck, in the browser.
Explore the aircraft. Operate the cockpit. Bring its systems to life.
Overview · Showcase · Quick start · Controls · Deployment · Development
Actual application capture · Original cockpit layout · Direct 3D interaction
| A320neo Full cockpit & airframe |
18 steps Guided cold-and-dark startup |
72 keys / MCDU Both units, in their original positions |
FLIGHT SIMULATOR is an interactive 3D cockpit project for aviation enthusiasts, built with React, TypeScript and Three.js. Start with an Airbus A320neo, move freely around its flight deck, and operate supported switches, knobs and keys directly on the model. Mechanical movement, annunciators, instrument displays and audio respond to the same aircraft state.
Follow a guided session from cold and dark through electrical power, APU startup, MCDU initialization and engine start, or choose free exploration to inspect the systems at your own pace. The cockpit uses detailed FlightGear A320-family assets with their original panel positions. The application runs as a static website and saves session progress in your browser.
| Experience | What's included |
|---|---|
| Explore the aircraft | Complete cockpit and airframe; captain, overhead, instrument, MCDU, pedestal and exterior views; orbit, zoom and pan. |
| Operate the panels | Supported switches and pushbuttons with movement, visible legends, annunciators and live instrument feedback. |
| Follow the startup | An 18-step checklist covering electrical power, fire tests, oxygen, signs, ADIRS, fuel, APU, bleed air, MCDU and engine start. |
| Observe the systems | Power transfer, APU startup and cooldown, staged engine starts, N2 / EGT / fuel flow, PACK, hydraulics, flaps, ECAM and selected FCU functions. |
| Hear the feedback | 18 local WAV samples for controls, relays, ventilation, APU, engines, flaps, PTU and alerts, with interior / exterior mixing. |
| Set the scene | A training airport with a terminal, jet bridges, ground equipment, taxiways and runway; day, dusk and night settings. |
| Practice and review | Guided / free modes, 1× / 5× / 10× time scaling, pause, browser autosave and JSON event-log export. |
Note
The current scope is ground preparation and cockpit interaction. Full flight dynamics, pushback / taxi, global scenery, a navigation database, complete FMGS / autopilot and all failure modes are not implemented. System behavior is simplified for exploration and learning, not real-world aircraft operation or certified training.
The recordings below come from the running application. GIFs have no audio; the APU demonstration uses accelerated simulation time.
| APU startup & annunciators | MCDU input |
|---|---|
 |
 |
| Use the original overhead buttons and watch the system state change. | Type on the model, then insert an entry with a line-select key. |
Inspect the complete airframe from the apron, nose, engine and tail views.
More screenshots — hangar, exterior, overhead and MCDU
| Hangar & session setup | Aircraft & airport |
|---|---|
 |
 |
| Overhead panel | MCDU close-up |
|---|---|
 |
 |
Requirements: Node.js ^20.19.0 || >=22.12.0, npm and a browser with WebGL support.
git clone https://github.com/radebit/flight-simulator.git
cd flight-simulator
npm ci
npm run devOpen http://127.0.0.1:5173/.
For a first session, select 冷舱启动 (Cold & Dark) and 引导练习 (Guided). Follow the checklist and click a step to locate its panel. To explore a powered cockpit, select 地面电源已接通 (Ground Power Connected) and 自由探索 (Free Exploration). The current application interface is in Simplified Chinese, with English aircraft labels.
Models and audio are bundled with the project. The exterior model is approximately 10 MB and the cockpit approximately 51 MB, so allow time for the initial download.
| Action | Input |
|---|---|
| Switch panels | Top navigation or number keys 1–6 |
| Move the view | Drag to orbit, scroll to zoom, right-drag to pan |
| Operate controls | Click the original model position; enable 操作提示 (Control Hints) to find supported controls |
| Adjust a knob | Scroll / arrow keys where supported; Shift + click to reverse |
| Fire / lamp test | Hold TEST; release to stop |
| MCDU entry | Click physical keys, or type with the computer keyboard after focusing the MCDU |
| MCDU delete | CLR deletes a character; Delete clears the scratchpad |
| Pause / resume | Top timer button, or Space when not focused on an input control |
| Audio | Enabled after the first interaction; use the top mute button or volume in settings |
Try it: MCDU INIT A entries
Enter a value into the scratchpad, then press the corresponding line-select key.
| Entry | Key | Field |
|---|---|---|
ZSPD/ZBAA |
1R |
Origin / destination |
AD320 |
3L |
Flight number |
30 |
5L |
Cost index |
350 |
6L |
Cruise flight level |
Build a static site for OpenResty, Nginx or another static file server. No production Node.js process is required.
Site root — default
npm run buildUpload the contents of dist/ directly to the site's document root.
Subdirectory — optional
npm run build -- --base=/flight-simulator/Replace the example with your own subdirectory and upload the contents of dist/ to that matching directory. The flag applies only to this build; the default remains /. Keep the leading and trailing /, and upload assets/, models/, audio/ and favicon.svg together with index.html.
See the OpenResty configuration and the deployment & troubleshooting guide (中文).
Exact dependency versions are recorded in package-lock.json.
npm test # Run the test suite
npm run build # Type-check and build into dist/
npm run preview # Preview the production build locallyProject structure
src/
App.tsx # Hangar, simulation session and checklist
assetUrl.ts # Public asset paths follow the build base
sim/ # Aircraft systems, procedures and MCDU logic
scene/ # Cockpit, airframe, controls and airport
audio/ # Audio loading and mixing
public/
models/a320/ # GLB models, manifests, license and source archive
audio/a320/ # WAV files and source mapping
vendor/flightgear-a320/ # Pinned upstream geometry, textures and sounds
scripts/ # Model conversion and source packaging
tests/ # System, audio and model regression tests
docs/ # Screenshots, recordings and deployment guide
Aircraft geometry, textures and sound samples come from FlightGear A320-family and are distributed under GPL-2.0. Original source assets, license text and modification notices are retained in the repository.
See third-party notices, asset modifications and the asset license. The assets badge above describes these bundled resources. This project is not affiliated with or endorsed by Airbus, FlightGear or Scandinavian Airlines.