Skip to content
entityPublic

About

An interactive, true-3D Airbus A380 in one web page: 795 parts, 555 seats, opening doors, retracting gear and every light in WebGL, from the gate to 10,000 ft.

Topics

Resources

Contributing

Stars

8 stars

Watchers

0 watching

Forks

Repository files navigation

pla.ne

An interactive, true-3D Airbus A380-800 you can turn, open up and fly from the gate to 10,000 ft, in one self-contained web page.

  • 795 parts: the double-deck fuselage, wings with slats, flaps, ailerons and spoilers, four Trent 970 engines with spinning fans, 22 wheels on gear that retracts in its true sequence, 19 doors that open, and a towbarless tug.
  • The cabin opens up: all 555 seats on a deck plan, the cabins in cutaway, and a flight deck with its displays.
  • Every exterior light in WebGL (nav, strobes, beacons, landing, taxi, logo, wing scan), plus cabin windows, heat haze and runway lights, drawn by a WebGL painter. A canvas fallback runs where WebGL can't.
  • Seven flight phases from the airport-planning numbers: gate, push and start, taxi, line-up, take-off, climb and 10,000 ft. Each phase drives the gear, flaps, thrust, doors and lights.
  • Light and dark themes, phones to wide desktops, touch, mouse and keyboard.

Try it

The live site is https://air.pla.ne. For use offline, download a380.html (dark) or a380-light.html (light) from the latest release, or build them with npm run build. Each page is a single file with no network requests. The hosted site (node a380/tools/build-site.mjs) is one page, index.html, with a System / Light / Dark switch that changes the theme in place without losing the flight, the view or the turntable.

Controls: drag to turn · 1–7 flight phases · C cutaway · D doors · I / Shift+I close-up views · Space pause · Esc back. The full list is in a380/README.md.

Build it

Requires Node.js 20.10 or later. The figure itself needs nothing installed; npm install adds only the development tools (TypeScript for the type check, Wrangler for the deploy).

npm run build       # a380/a380.html and a380/a380-light.html, the single-file pages
npm run check       # the figure's own checks and the flight-model test
npm run typecheck   # tsc over the files marked // @ts-check
npm run site        # a380/dist/: the one-page static site with the theme switch (a380/site/DEPLOY.md)
npm run serve       # serve a380/dist on http://127.0.0.1:8741/ the way a host would
npm run deploy      # build the site and upload it to Cloudflare (wrangler.jsonc)

Each script is a plain node command (see package.json), so they also run without npm.

The audits and browser checks (headless Chromium) are described in a380/README.md.

Layout

  • a380/: the figure, with its truth model (model.mjs, sources in truth.md), parts, WebGL shaders, page runtime, design notes and tools.
  • kit/: the drawing kit from the Anatomy skill, extended with the 3D turn runtime and the WebGL painter (MIT, see kit/LICENSE).
  • scripts/: headless-browser capture, drive and check scripts from the same skill.

Licence

MIT, see LICENSE. The drawing kit in kit/ keeps its own MIT licence (kit/LICENSE).

Not affiliated with or endorsed by Airbus. Dimensions and procedures come from public Airbus and EASA documents; values marked as estimates in a380/truth.md are estimates.

About

An interactive, true-3D Airbus A380 in one web page: 795 parts, 555 seats, opening doors, retracting gear and every light in WebGL, from the gate to 10,000 ft.

Topics

Resources

Contributing

Stars

8 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages