@johnmorrisdotca/uchusen-rockets

v0.29.0

Published

5 hours ago

Uchusen Rockets 宇宙船: line drawings and 3D views of rockets, as a web component. Every variant with its own sourced sizes, a typed way to assemble a rocket from parts, stack and separate. No logos. three.js is a peer dependency.

Open the demo: rockets drawn from sourced sizes that you turn, take apart, set side by side to scale and fly to another world, in English and Japanese. It runs in the browser of a phone, a tablet or a computer: nothing to install, no account, and it is free.

Every size on a rocket names its source, and a size no source gives is left blank, never estimated. The limits of that picture are in Limits, and every model and picture is credited in NOTICE.md and in the footer of each demo page.

Who it is for

Rocket geeks: every variant with its own sourced sizes (Starship Block 3, each size with its source), the engines from below, the parts taken apart, the block-by-block comparison and the fleet database.
Teachers and students: rockets to scale beside a person and a ten-storey building, and the journey to another world from the planets' real positions, with the numbers as it goes. Every size has its source on the page, so a class can ask where a figure comes from.
Model makers and writers: the drawings as SVG and the meshes as .glb files, with the source of each dimension (assets guide); the code builder copies the code, or saves an SVG or a PNG, for the rocket you chose. Credit what you show: a painted model's licence travels with it.
Researchers and outreach staff: every figure is a value, its source and its date, and where sources disagree the page lists them. Read Limits first, then NOTICE.md and the sources guide, and see How to cite.
Developers: one tag, no build step, and a drawing that is there before any 3D has loaded; and rockets as typed data, with a check that says whether a mix of parts goes together. The install and the API are below.

Try it now, nothing to install

Fly: A journey to Mars (a Falcon Heavy from the Earth to Mars; pick another world, craft or date) · The same page in Japanese

To scale: Every rocket beside a person and a building · Rockets of the World, the poster · Three ships of the SPX fleet side by side

Look closer: Starship Block 3 taken apart · Super Heavy from below · The fleet database · The yard

Put one on your page: The code builder · 日本語 · English

For teachers and families

Uchusen Rockets works on a phone or a tablet as well as on a computer, in the browser, and it is free: the code is MIT-licensed, and nothing is installed or signed up for. A class can fly a journey, set every rocket beside a person and a building to see how big they are, or open the poster, and then look at where a size comes from: each one links its source. The scale guide and the journey guide say what each page shows, and the embed guide shows how to put a rocket on your own page. The painted models are other people's work under Creative Commons licences, credited in NOTICE.md and at the foot of each demo page.

In 30 seconds

npm install @johnmorrisdotca/uchusen-rockets three

<script type="module">
  import "@johnmorrisdotca/uchusen-rockets/element";
</script>

<uchusen-rocket rocket="starship" variant="v3"></uchusen-rocket>
<uchusen-rocket rocket="starship" variant="v3" show="apart" look="painted" view="back"></uchusen-rocket>
<uchusen-rocket rocket="starship" variant="v2" show="booster" look="thick" view="below"></uchusen-rocket>

That is all a page needs with a bundler. The drawing shows at once; when the element comes on screen and the browser can draw WebGL, the 3D view takes over without a jump. Drag to turn it, use the arrow keys, or leave it to its slow spin. engines="on" lights each engine at full thrust, in the painted look and as a drawn flame in the line looks, and a reader who asked for reduced motion has them off. A flame's length and its shock diamonds are a picture, not a measurement. beside="on" stands Starship with Super Heavy next to the rocket at true scale, to see how big it is. A flight plays each phase with the engines that burn in it, from published timelines. With no WebGL, under Save-Data, or on any failure, the drawing stays.

Features

Twenty-five kinds of thing, from Starship to the Hubble Space Telescope, the two space stations and the Roadster with Starman, each in every variant a source documents, with its own sizes; the stations, the telescope and Jupiter-C are parts in slots, one file a part.
Three looks (line, thick, painted), five views, together, apart and each part alone, for every one of them.
A drawing made by code, and a 3D view that takes over without a jump. With no WebGL, under Save-Data or on any failure, the drawing stays.
Lit engines at full thrust in the colour of what they burn, and flights played phase by phase from published timelines, with grid fins, legs and flaps that turn.
check and build: a typed part record, a fit check, a .glb mesh and an SVG, in Node or a browser, with no three.js.
<uchusen-lineup>: rockets at one scale with a ruler, a person and a building.
Six ways to copy a rocket into your own page, with the credit written in.
A strict content security policy is enough. No network request but the painted model you ask for.

Use it in your project

npm install @johnmorrisdotca/uchusen-rockets three

import "@johnmorrisdotca/uchusen-rockets/element";

Import the element once, anywhere in your client code, and use the tag. three is an optional peer dependency, loaded only for a 3D view. Copy node_modules/@johnmorrisdotca/uchusen-rockets/dist/assets to a folder your site serves and call setAssetBase("/that/folder/") if you want painted models. Getting started and React and other frameworks go through it step by step.

Use it anywhere

A page with no bundler loads the element from a CDN, with an import map for three.js:

<script type="importmap">
  { "imports": { "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js", "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/" } }
</script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@johnmorrisdotca/uchusen-rockets@0/dist/element.js"></script>
<uchusen-rocket rocket="falcon-heavy" look="thick" view="below"></uchusen-rocket>

A page that cannot run script uses an iframe of the embed page:

<iframe src="https://johnmorrisdotca.github.io/uchusen-rockets/embed.html?rocket=starship&variant=v3&look=line" title="Starship Block 3" style="width:100%;max-width:480px;aspect-ratio:3 / 4;border:0"></iframe>

Put one on your own site

The drawings are there to be used. The demo copies the code for the rocket on the screen, in six ways: a CDN script and the element, an iframe of the embed page (for a site that cannot run script), a module, the SVG, a data address, and a link to the picture in the package. It saves an SVG or a PNG too. docs/embed.md has each one.

A painted rocket's CC BY credit is written into every one of those, from the parts that are showing. A line drawing does not carry it, and neither does a variant this package paints itself.

import { attributesFromOptions, embedCode, optionsFromAttributes, rocketFromParams, rocketToParams } from "@johnmorrisdotca/uchusen-rockets";

const options = { rocket: "falcon-9", variant: "block-5", look: "thick", view: "below", show: "apart" };
const attributes = attributesFromOptions(options);
function read(name) {
  return Object.hasOwn(attributes, name) ? attributes[name] : null;
}
const back = optionsFromAttributes(read);
back.rocket; // "falcon-9"
rocketToParams(options).get("show"); // "apart"
rocketFromParams(rocketToParams(options)).view; // "below"
embedCode(options, "iframe").includes("embed.html"); // true
embedCode({ rocket: "starship", variant: "v3", look: "painted" }, "element").includes("Clarence365"); // true
embedCode({ rocket: "starship", variant: "v3", look: "line" }, "element").includes("Clarence365"); // false

| Attribute | Values | | --- | --- | | rocket | starship, falcon-9, falcon-heavy, dragon, grasshopper, falcon-1, saturn-v, space-shuttle, sls, new-glenn, electron, vulcan-centaur, ariane-6, atlas-v, delta-iv-heavy, h3, long-march-5, mercury-redstone, soyuz, droneship, landing-zone, launch-tower, starbase, lunar-module, apollo-soyuz, gemini, mercury, jupiter-c, iss, tiangong, hubble, roadster, voyager, juno, jwst, parker-solar-probe, cassini, galileo, pioneer, new-horizons, europa-clipper, starlink, lageos, sputnik-1 | | variant | Starship: v1-flight1, v1, v2, v3, v4, 2019. Falcon 9: v1.0, v1.0-dragon, v1.1, ft, block-5, block-5-dragon-2. Falcon Heavy: falcon-heavy, test-flight, test-flight-second-generation, test-flight-second-generation-2. Dragon: dragon-1, dragon-2, cargo-dragon-2, crew-dragon-inside. Falcon 1: falcon-1, falcon-1e. Saturn V: saturn-v. Space Shuttle: stack, discovery. Space Launch System: block-1. New Glenn: 7x2. Electron: electron. Vulcan Centaur: vc2s. Ariane 6: a62, a64. Atlas V: 401. Delta IV Heavy: heavy. H3: 22s, 24l. Long March 5: cz-5. Mercury-Redstone: redstone. Soyuz: soyuz-2. Drone ships: ocisly, jrti, asog. Landing zones: lz-1, lz-4. Launch tower: tower, stack, catch. Starbase: launch-site, build-site, city. Apollo lunar module: lunar-module. Apollo and Soyuz: apollo-soyuz. Gemini: gemini. Mercury: friendship-7. Jupiter-C: jupiter-c. International Space Station: iss. Tiangong: tiangong. Hubble Space Telescope: hubble. Roadster: first-generation, second-generation, second-generation-2. Voyager: voyager. Juno: juno. James Webb Space Telescope: jwst. Parker Solar Probe: parker-solar-probe. Cassini: cassini. Galileo: galileo. Pioneer: pioneer. New Horizons: new-horizons. Europa Clipper: europa-clipper. Starlink: v1-5, v2-mini. LAGEOS-1: lageos-1. Sputnik 1: sputnik-1 | | show | together, apart, or a part: booster, ship, first-stage, second-stage, fairing, trunk, capsule, centre, side-left, side-right, and each rocket's own: descent, ascent, csm, docking-module, soyuz, adapter, station, telescope and the rest | | look | line, thick, painted | | view | three-quarter, front, back, side, below | | sun | The direction towards the Sun in the craft's own frame, three numbers (sun="1, 0.2, -0.5"): one light from there, the far side dark, as in space. Left out, the showroom light |

Changing look keeps the angle. Changing show is an animated move, and a cut under reduced motion. Each part alone fills the frame and has its own listed size. Every look works for every variant and every choice of parts. Front is the windward, tiled side; back is the steel side.

The rockets

Starship; Falcon 9 in v1.0 (with a fairing, or with Dragon 1 as it flew), v1.1, Full Thrust and Block 5, with a fairing or with Dragon 2; Falcon Heavy; Dragon 1, Dragon 2 and Cargo Dragon 2, and Crew Dragon cut open to see inside; Grasshopper, the test vehicle; and Falcon 1, with the Falcon 1e that was announced and never flew. From other makers, to compare at one scale, each drawn by this package's code from its published sizes: Saturn V; the Space Shuttle, stacked with its tank and boosters, each part alone too, and Discovery, a real scan; the Space Launch System, Block 1 with Orion; New Glenn 7×2; Electron; Vulcan Centaur in its first form, the VC2S; Ariane 6 as the 62 and the 64; Atlas V 401; Delta IV Heavy; H3 as the 22S and the 24L; Long March 5; Mercury-Redstone, carrying the Mercury capsule; and Soyuz-2. And where a booster lands: drone ships and landing zones. The Starbase integration tower too, with its mount and arms, a Block 3 stacked on it, or catching its booster. And Starbase, as a scene from the map: launch-site, build-site and city. The Apollo lunar module, painted by NASA's model. Apollo docked to Soyuz, painted by NASA's model, stood on end. The Gemini spacecraft, painted by NASA's model. The Mercury spacecraft, as Friendship 7, painted by NASA's model. Jupiter-C, painted by NASA's model, as its four stages. The International Space Station, painted by NASA's model, of the station as it was when that was made, as its modules, truss segments, arrays, radiators and visiting craft, each a part in a slot. Tiangong 天宮, China's station, drawn from published dimensions and painted by w29572227's model: Tianhe with its docking node, Wentian and Mengtian, their solar wings, and Shenzhou and Tianzhou in visiting slots. And the Hubble Space Telescope, painted by Cybertron B-127's model, as its aft shroud, equipment section, forward shell, light shield, aperture door, arrays and antennas. And the Roadster that Falcon Heavy's test flight carried, with Starman at the wheel, as a craft of its own and in the payload slot of Falcon Heavy's test-flight; and two models of its second generation, which has not flown, to compare. Voyager, one model for both spacecraft, and Juno, each painted by NASA's model. New Horizons, painted by NASA's model.

<uchusen-rocket rocket="falcon-9" variant="block-5" show="apart" look="painted"></uchusen-rocket>
<uchusen-rocket rocket="falcon-9" variant="block-5-dragon-2"></uchusen-rocket>
<uchusen-rocket rocket="falcon-heavy" look="thick" view="below"></uchusen-rocket>
<uchusen-rocket rocket="dragon" variant="dragon-1" show="capsule"></uchusen-rocket>
<uchusen-rocket rocket="grasshopper" look="painted"></uchusen-rocket>

The SPX fleet ships are original designs.

ISV Hanabusa, SPX-013, is the fleet's wheel ship: a 589 m keel and a 22 m bow shield, 611 m overall, two rotating propellant booms and three glazed rings of 48, 62 and 76 m radius that step up from the bow (garden, research and living, at 3.43 rpm: 0.63, 0.82 and 1.00 g), with a closed industrial wheel of 112 m radius set apart. Its drive is nineteen magnetic-nozzle thrusters and no bell. It is three variants (the rings stepping up from the bow, the other order, and a flat section view of the living ring) and joins the picker under SPX. The bible is docs/fleet/ship-01.md.

One of them is a class of four, the Kyotori class: ISV 鏡鳥 Kyotori, SPX-045, with ships A, B, C and D (names to be chosen). They share one design and differ like this:

| | Ship A | Ship B | Ship C | Ship D | |---|---|---|---|---| | Role | survey and mapping | laboratory | astronomy | crew and medical | | Hull | the long hull with the payload bay and the glass lift | the short hull with the crew space | the long hull with the payload bay and the glass lift | the short hull with the crew space | | Its own compartments | two sensor booms with radar, lidar and camera heads | sample labs, a clean room and a cold store | a second telescope on its own mast | extra quarters and a sick bay | | Instruments | radar, lidar, cameras and star trackers on 34 m booms | two laboratory modules and a refrigerated sample store | a seven-segment mirror with a sun shield | a medical pod with a treatment bay and isolation room | | Crew | the standard crew | the standard crew and a laboratory staff | the standard crew and an observing staff | the standard crew and about a hundred more | | Shared | drive of twelve coil rings, tank bouquet, latch frames, bows and docking arms | same | same | same | | Name | to be chosen (A) | to be chosen (B) | to be chosen (C) | to be chosen (D) |

One of them is a class of two, the Romurusu class: ISV Miyamoto, SPX-452, and its sister ISV Ariake, SPX-186. They share one hull and differ like this:

| | ISV Miyamoto, SPX-452 | ISV Ariake, SPX-186 | |---|---|---| | Role | flagship and command | survey and command | | Accent | orange | dawn-gold band and pinstripes | | Signature | a long gold solar array along the starboard side, 10 bays over 120 m of her 380 m | near-black hexagonal panelling on the engine end | | Nose | more rounded, clad in solar cells | standard | | Side box modules | the staggered pair (starboard aft, port fore) | all four (port and starboard, fore and aft): double the capacity | | Default pod | relay (the relief pod on request) | survey | | Refits | none extra | an extra sensor mast, a second solarium | | Interior theme | its own: blue and white | warm wood and dawn-gold | | Shared | hull, drive with shadow-shield collar, decks, length 380 m | same | | Hangar bodies | two Starship bodies side by side in each box, on cradles | the same, in all four boxes | | Service | a collar L for a Starship and a collar M for a Dragon, on the ventral side | the service ship: an open berth for a full stack, drawn in two placements, and a methane and oxygen depot |

Variants, with their sources

Sizes changed over time, so each variant lists its own, as data with types. A variant goes in only if a source documents it. A size no source gives is blank, never estimated. Where sources disagree, the data keeps the one chosen and says what else was said.

import { SOURCES, variantOf } from "@johnmorrisdotca/uchusen-rockets";

const v3 = variantOf("starship", "v3");
v3.facts.height.value; // 124.4
v3.facts.parts.booster.value; // 72.3
SOURCES[v3.facts.parts.booster.source].publisher; // the name of whoever published that figure
v3.facts.parts.booster.others.some((other) => other.value === 81); // true

| Variant | Whole | Super Heavy | Ship | First flew | | --- | --- | --- | --- | --- | | v1-flight1 Block 1 as it first flew: Ship 24, Booster 7, no ring | 121 m as stated; its parts add to 119.3 m, and it is drawn to them | 69 m | 50.3 m | 2023-04-20, Starship's first flight | | v1 Block 1 with the vented ring | 121.3 m | 71 m | 50.3 m | 2023-11-18, the first with the ring | | v2 Block 2 | 123.1 m | 71 m | 52.1 m | 2025-01-16 | | v3 Block 3 | 124.4 m | 72.3 m | 52.1 m | 2026-05-22 | | v4 Block 4, announced, not built | 142 m, an estimate | 81 m, announced | 61 m, announced | Not flown | | 2019 2019 design (an artist's model, ship only) | 50 m | | 50 m | Never flew |

All are 9 m across, except the 2019 design, for which no source read here gives one. docs/variants.md has the sources and what they disagree on.

Build a rocket from parts

Every part from every source has the same record: its real size, its origin and the joints it mates at. Ask whether it fits, with no three.js at all. A mix that fits is built, and is labelled as what it is, never as a vehicle that flew.

import { check } from "@johnmorrisdotca/uchusen-rockets";

check({ rocket: "starship", variant: "v3" }).label; // "Block 3 (V3)"

const mix = check({ rocket: "starship", variant: "v3", parts: { ship: "starship-v2-ship" } });
mix.ok; // true
mix.custom; // true

const wrong = check({ rocket: "starship", variant: "v3", parts: { booster: "starship-v3-ship" } });
wrong.ok; // false
wrong.issues[0].message; // "Ship, Block 3 (V3) is a ship; this slot takes a booster."

import { build } from "@johnmorrisdotca/uchusen-rockets/build";

const rocket = build({ rocket: "starship", variant: "v3" });
rocket.report.credits[0].creator; // "Clarence365"
rocket.glb().bytes.length > 1000; // true
rocket.svg({ look: "thick", view: "below", show: "booster" }).startsWith("<svg"); // true

docs/parts.md has every part and which source each comes from.

What is in it

| Entry | What | Needs | | --- | --- | --- | | @johnmorrisdotca/uchusen-rockets | The rockets and variants (ROCKETS, variantOf, SOURCES, MAKERS), the parts (PART_ENTRIES), the fit check (check), the builder's rows (builderState), flights (flightOf, FLIGHTS) and which engines burn (pickBells), the camera rule, the looks, the credits (MODEL_CREDITS), and embedCode | Nothing | | .../build | build(description), buildPart(id), lineupSvg: one mesh and one drawing, in Node or a browser | Nothing | | .../element | <uchusen-rocket>, <uchusen-lineup> and <uchusen-flight>: load three only when a 3D view is wanted, and a painted model only when the painted look is | three for 3D | | .../react | A thin <UchusenRocket> wrapper | react | | .../assets/* | Ready files: starship-v3.glb, starship-v3.svg, starship-v3-booster.thick.svg, parts/raptor-vacuum.glb, models/starship-v3-ship.glb | Nothing | | .../physics | Flight physics: orbits from a position and a speed (elementsOf, stateOf), gravity from the bodies of a scene (gravityAt), a craft moved forward in time (propagate, path), the rocket equation (deltaV, burnSeconds, massFlow), burns flown or all at once (flyBurn, flyPlan, impulse) transfers (biElliptic, planeChange, nodes, crossings), attitude with thrusters and the autopilot's modes (stepCraft, fireFor, killRotation, holdDirection), and the air of the Earth, Mars and Venus with drag (atmosphereAt, standardAtmosphere, dragAcceleration). Ported in part from Orbiter (MIT), measured against JPL Horizons | Nothing | | .../launches | The launch log: 7,425 orbital launch attempts since 1957 (launches, launchByTag, findLaunches, countLaunches, launchTotals), each linked to this package's rocket where it is one (LAUNCH_VEHICLE_LINKS), in one data file of about 1.1 MB that only this entry loads. Credit GCAT, as NOTICE.md says | Nothing |

To scale

<uchusen-lineup> stands rockets on one baseline at one scale, with a ruler, a person and a building.

<uchusen-lineup items="starship:v1,starship:v2,starship:v3,starship:v4,building,person" unit="3" ruler labels></uchusen-lineup>

React

import { UchusenRocket } from "@johnmorrisdotca/uchusen-rockets/react";

<UchusenRocket rocket="starship" variant="v3" show="apart" look="thick" />;

Licences, credits and a word on trademarks

The code, the code-made meshes and the drawings are under the MIT licence. The painted models are not: they stay under Creative Commons Attribution 4.0, or public domain where the row says so, and using them means crediting them. check(description).credits says which belong to a rocket.

import { check } from "@johnmorrisdotca/uchusen-rockets";

check({ rocket: "starship", variant: "v3" }).credits[0].licence; // "CC BY 4.0"

Starbase's coordinates and outlines, its map heights and the tower's 13 m footprint are © OpenStreetMap contributors, under ODbL 1.0, not MIT (https://www.openstreetmap.org/copyright).

The launch log (.../launches) is data from GCAT, the General Catalog of Artificial Space Objects, by Jonathan C. McDowell, under CC BY 4.0, not MIT. Whatever shows it must credit it: Data from GCAT (J. McDowell, planet4589.org/space/gcat). NOTICE.md has the licence, the release and what was changed.

| Painted | Title | Creator | Source | Changed | | --- | --- | --- | --- | --- | | Block 3 | SpaceX Starship Block 3 | Clarence365 | Sketchfab | Reduced, logos and serial number removed, rescaled to sourced sizes, parts separated | | Block 1 as it first flew | Spacex Starship Ship 24 & Booster 7 V4 | clarence365 | Sketchfab | Reduced, logo, serial number and decals removed, rescaled to sourced sizes, parts separated | | 2019 design | SpaceX Starship | MartianDays | Sketchfab | Rescaled to the sourced height, turned to this package's axes |

All but Discovery and NASA's are under CC BY 4.0. NASA is named as the source of its models, as its guidelines ask, with no suggestion that it endorses this package, and no NASA logo, insignia, flag or lettering is shipped: NOTICE.md says what that rests on. Starship Blocks 1, 2 and 4 and the older Falcon 9s are painted by this package's own code: no model is stretched to stand in for another version.

No mesh or drawing carries a logo, a wordmark or a flag. Rocket names appear only as plain descriptive words. The element's flags attribute can show a rocket's country flag in the corner of the picture, beside the drawing and never on it, from the optional peer @johnmorrisdotca/hata (see Variants and sourced sizes). All trademarks belong to their owners, and this project is not affiliated with or endorsed by SpaceX, NASA or any other maker or agency named here. NOTICE.md names each source and what was taken from it.

Examples

Every ts block in this README and in the guides runs against the built package (pnpm test:readme).

import { check, variantOf } from "@johnmorrisdotca/uchusen-rockets";

const falcon = variantOf("falcon-9", "block-5");
falcon.facts.height.value; // 69.8
check({ rocket: "falcon-9", variant: "block-5" }).ok; // true
check({ rocket: "falcon-9", variant: "block-5" }).custom; // false

import { showsOf, variantOf } from "@johnmorrisdotca/uchusen-rockets";

showsOf(variantOf("falcon-9", "block-5").slots).includes("apart"); // true

import { lineupSvg } from "@johnmorrisdotca/uchusen-rockets/build";

const picture = lineupSvg({ items: ["starship:v3", "falcon-9:block-5", "person"], unit: 4, ruler: true, labels: true });
picture.items.length; // 3
picture.svg.startsWith("<svg"); // true

import { cleanLook, cleanView } from "@johnmorrisdotca/uchusen-rockets";

cleanLook("shiny"); // "line"
cleanView("below"); // "below"

Anything from outside is treated as text: an attribute that is not in its list falls back to the default and nothing else.

The code builder

The code builder is one screen: choose the maker, the rocket, the variant, the parts, the look, the view and the engines, see the rocket, and copy the code for any of the six ways, or for React, Vue, Angular and Svelte. The demo's "Put this rocket on your site" is the same panel (the family's <kazoku-embed-panel>): a size, the drawing beside the code, Save SVG and Save PNG, Open the embed page and Read the docs. A painted rocket's credit is under the code. It is built from ROCKETS, showsOf, embedCode and paintedCredit, so it offers every rocket the package has, as it gains them.

Lit engines and flights

<uchusen-rocket id="rocket" rocket="falcon-9" variant="block-5" look="painted" engines="on"></uchusen-rocket>
<uchusen-flight for="rocket"></uchusen-flight>

engines="on" lights each engine that shows, in the colour of what its engine burns (each from a page), and a flight lights only the engines that burn in each phase, from a published timeline, with the altitude and speed where its page gives them. Grid fins, legs and flaps turn in a flight where the pages say they do. How the picture moves between phases, how far a part turns, and a flame's length, is illustrative; the times, counts, altitudes and speeds are sourced. The guide has the details.

NASA's models

The Apollo lunar module, Apollo docked to Soyuz, Gemini, Mercury, Jupiter-C, the Space Shuttle, the International Space Station, Voyager and Juno are painted by NASA's own public-domain models, each with its marks removed and its sizes set from a source. The Hubble Space Telescope and Tiangong are painted by Sketchfab models under CC BY 4.0, credited above.

API

The reference is a site, made from the source's own doc comments: every export has a summary, its parameters, what it returns, and an example that runs when the site is built. Open the reference.

import { ROCKETS, PART_ENTRIES, SOURCES, MODEL_CREDITS } from "@johnmorrisdotca/uchusen-rockets";

Object.keys(ROCKETS).length > 20; // true
PART_ENTRIES.length > 100; // true
Object.keys(SOURCES).length > 20; // true
Object.keys(MODEL_CREDITS).length > 10; // true

Guides

Each guide has a Japanese twin in docs/guides/ja.

| Guide | What it is for | | --- | --- | | Getting started | A rocket on a page in ten minutes | | Looks, views and parts | The three choices that change what you see | | Build a rocket from parts | Part records, the fit check, build, the builder | | Lit engines and flights | Engines at full thrust, flights, what is sourced | | Rockets to scale | <uchusen-lineup> and lineupSvg | | Journey mode | Fly a rocket or a fleet ship to the Moon or a planet: windows, burns, the flip | | Flight physics | Orbits, gravity from the bodies of a scene, propagation, the rocket equation, burns, transfers, attitude and thrusters, the air, and how exact they are | | Put a rocket on your own site | Six ways, and the credit | | React and other frameworks | React, Vue, Svelte, Angular | | Bundlers and CDNs | unpkg, Vite, webpack | | TypeScript and Node | Types, and the core in Node | | Ready files and 3D models | The .glb and .svg files | | Variants and sourced sizes | Why a figure names its source | | Licences, credits and trademarks | What is MIT, CC BY, public domain, ODbL | | Architecture | How the layers fit | | Troubleshooting | Why the 3D view or the model is missing | | Upgrading | What to look for between versions | | The launch log | Every orbital launch since 1957: lookups, counts, links to the rockets, the GCAT credit |

Limits

Uchusen Rockets is made for learning, teaching, comparing and drawing. It is not made for engineering, for mission planning or for anything that needs more than its sources give, and it says where each number stops:

Sizes. A figure is as exact as its source, shown to the digits the source gives. Where sources disagree the page lists them side by side (Block 3's height has several), and a rocket announced but not built, such as Starship Block 4, shows its sizes as estimates.
The journey. The planets' positions are real, from NASA JPL's approximate orbit elements, good to about an arc minute (about 20,000 km at Mars). The trips are simple models (Hohmann transfers with patched conics, and flip-and-burn for the fleet ships), checked against the figures NASA prints (about 259 days to Mars), so they show what a trip costs, not what a mission would fly; a craft's burn length and turn times that no source gives are marked "est.".
The flight physics. Point masses and a body's J2 to J4, rigid-body turning with thrusters, and simple layered air (Orbiter's 2006 models, and the 1976 standard to 86 km), with no push of sunlight: measured against JPL Horizons, the Moon after 28 days is within a kilometre and the ISS after 100 minutes within 0.2 km. Good for showing how a craft flies, not for navigating one.
A rocket is only as good as its sources. A figure no source gives is blank, never estimated, and a blank is shown as one.
A flame's length and its shock diamonds, how parts move between flight phases, smoke and the ground falling away are pictures, not measurements.
A part with no licensed model is painted by this package's own code from photographs and sizes. It is a likeness, not a scan.
A flight exists only for the variants a published timeline covers. A custom build has none.
A painted model is up to 8 MB and is fetched only when asked for. Code-made meshes stay under 600 KB and drawings under 80 KB.
There is no logo, wordmark or flag on anything, so a rocket is never "the real livery".

import { variantOf } from "@johnmorrisdotca/uchusen-rockets";

variantOf("starship", "2019").facts.diameter.value; // null

How to cite

Morris, J. (2026). Uchusen Rockets (version 0.29.0) [Computer software]. https://github.com/johnmorrisdotca/uchusen-rockets

GitHub's "Cite this repository" button reads CITATION.cff and gives BibTeX and APA. Cite the version you used (npm ls @johnmorrisdotca/uchusen-rockets), and credit the people behind the models and the numbers: NOTICE.md says who made each one and under what terms.

Accessibility

The element has an accessible name from its label attribute, or from the fit report's label (such as "Block 3 (V3)") when there is none. The 3D view's canvas says how to turn it.
A reader who asked for reduced motion gets no spin, no flames, no played flight and a cut instead of an animated move. The slider and charts still work.
Turning works by drag, touch and the keyboard: the arrow keys turn it, the wheel over the view, a pinch, + and - zoom, Home puts it back. With the pointer anywhere else the wheel scrolls the page, and so it does when the zoom is already at its end.
The demo's controls are at least 44 pixels tall and work with a keyboard. The view bar shows the zoom (1×, 2.4×) and says it once it settles. The Wide button or the T key (?wide=on) gives the view the page's width and moves the panel below it.

<uchusen-rocket rocket="starship" variant="v3" label="Starship Block 3, taken apart" show="apart"></uchusen-rocket>

Browser and runtime support

Using the package needs Node 22 or later. Working on it needs 22.18 or later.
In a browser, any current one. The 3D view needs WebGL; without it the drawing stays.
The test suite runs the demo in Chromium and WebKit at a phone's width and a desk's, and the packed package on Linux, macOS and Windows, on Node 22 and 24.
three >=0.170.0 and react >=18 are optional peer dependencies.

Languages

The documentation is in English and Japanese: each guide in docs/guides has a twin in docs/guides/ja, and the documentation site switches between them. The rockets' own names are plain descriptive words and are the same in both.

Architecture

The data is typed once. A part is a table of numbers: its real size in metres and the joints it mates at. A mesh and a drawing come from the same pieces, so they cannot disagree with each other or with the data. The root and build entries import neither three.js nor the DOM; the element loads three.js only for a 3D view.

import { build } from "@johnmorrisdotca/uchusen-rockets/build";

const a = build({ rocket: "falcon-9", variant: "block-5" }).glb().bytes;
const b = build({ rocket: "falcon-9", variant: "block-5" }).glb().bytes;
a.length === b.length; // true

A mesh is a pure function of its description: the same description gives the same bytes. Architecture has the layers.

A new control uses one that already exists, or extends it. The page shell is scripts/page.ts (the family header and the page bar). The view bar is demo/viewBinder.ts. The painted Earth is demo/earth.ts (mountStillEarth). A hand-off names the shared parts it used. Those parts replaced 301 lines of page copies: 133 in the one bar, 85 in the chip and the look row, 39 in the view listeners, 26 in the yard's globe, 11 in the view, parts and engines words, and 7 in the builder's theme.

Development

pnpm install
pnpm check          # lint, copies, types, tests, the build and the packed package
pnpm test:readme    # run every example of the README, the docs and the guides
pnpm test:usage     # every way to use it (CDN, Vite, webpack, React, Vue, Svelte, Angular, iframe, TypeScript, Node), built and opened from the package as npm packs it
pnpm test:usage     # every way to use it (CDN, Vite, webpack, React, Vue, Svelte, Angular, iframe, TypeScript, Node), built and opened from the package as npm packs it
pnpm docs:check     # the reference site's checks: every export documented, every example run
pnpm test:demo      # the demo in a real browser
pnpm dev            # the demo on http://127.0.0.1:8275/uchusen-rockets/
pnpm screenshots    # the pictures in docs/images

Contributing

Bug reports, ideas and pull requests are welcome: see CONTRIBUTING.md. The rules that matter most: a figure names its source or is blank, no logos or marks, a mesh is a pure function of its description, and anything from outside is text.

Changes

CHANGELOG.md lists every release with its date.

Roadmap

PLANNED_ROCKETS lists rockets with sourced facts and no shape yet. It is empty: Ariane 6 now has a shape.

import { PLANNED_ROCKETS } from "@johnmorrisdotca/uchusen-rockets";

PLANNED_ROCKETS.map((rocket) => rocket.id).length === 0; // true

A rocket goes in only when a source documents it.

The family

Uchusen Rockets is one of forty-one packages, each made for the same site, each at github.com/johnmorrisdotca or github.com/spxis. The code of every one is MIT.

Games — board

Domino (ドミノ): dominoes and Mexican Train. Demo.
Gunjin (軍人): five hidden-rank strategy games with pass-the-device play. Demo.
Narabe (並べ): one rules engine for abstract board games, from gomoku and Reversi to Go and checkers. Demo.
Sugoroku (双六): backgammon and its variants, with the doubling cube and match play. Demo.
Tenka (天下): world conquest for two to six, on a map of the real world. Demo.

Games — cards & tiles

Fuda Cards (札): collectible card frames with a true thickness, foil, stacks, wear and a binder, as two web components. Demo.
Hitotsu (一つ): a colour-card shedding game for two to eight, with the house rules people play. Demo.
Jarajara (ジャラジャラ): mahjong tiles drawn as SVG, stacked layouts, and the matching solitaire Awase. Demo.
Kumimoji (組み文字): a crossword tile race, in English and Japanese kana. Demo.
Toranpu (トランプ): a deck of playing cards, card games with computer players, and solitaires. Demo.

Games — puzzles

Houseki (宝石): gem and stone matching puzzles: falling triplets, stone collapse, colour chains and gem swap. Demo.
Jirai (地雷): minesweeper on shaped grids with verified no-guess boards. Demo.
Karakuri (からくり): eight hyper-casual puzzle games, some of them physics: draw a shield, pull pins, cut ropes, slide blocks, pour tubes. Demo.
Kazu (数): grid number puzzles: Sudoku and its variants, Futoshiki and Skyscrapers. Demo.
Kyuubu (キューブ): a turning cube for the browser, 2×2 to 7×7, with record solves to replay. Demo.
Meikyuu (迷宮): mazes on squares, hexagons, triangles and circles, made from a seed and drawn through with a finger or the mouse. Demo.
Suido (水道): a pipe puzzle: turn the pieces until the water reaches every drain. Demo.
Tobiishi (飛び石): peg solitaire with nine boards and seeded solvable challenges. Demo.
Tsunagi (繋ぎ): a line-joining logic puzzle whose every level has exactly one answer. Demo.

Games — dice & random

Korokoro (コロコロ): dice, with notation, exact odds, real sounds and the dice of many games. Demo.
Tane (種): seeded random numbers and daily seeds, the same in every browser and on every server. Demo.

Language

Bushu (部首): find a kanji by the parts it is made of. Demo.
Hikidashi (引き出し): a drawer of small Japanese text tools: era dates, kanji numerals, readings and sentence difficulty. Demo.
Jisho (辞書): words of Japanese looked up by reading or written form, and the grades, JLPT levels, readings and look-alike pairs of 2,999 kanji. Demo.
Kotoba (言葉): word lists and word-game rules in English, French, German and Japanese. Demo.

Space Program X

Chikyu Earth (地球): a line-drawn globe that turns at the Earth's own rate, with an optional realistic Earth from space and markers for any place. Demo.
Hoshi Stars (星): the stars you can see without a telescope, with names, colours and distances, the constellations with their lines and boundaries, and the Messier objects, drawn on any of seven sky maps. Demo.
Uchusen Rockets (宇宙船): rockets drawn from sourced sizes, as line drawings and 3D views you can take apart and turn, with a check that a rocket really goes together. Demo.
Wakusei Planets (惑星): the Sun, the planets and their moons, as line drawings, shaded drawings and painted surface maps, with their real sizes, tilt and rotation. Demo.

Geography & data

address-plus (アドレスプラス): parse and format addresses in the United States, Canada, Japan, Australia, France, Germany and the United Kingdom. Demo.
Chizu (地図): maps of the world and of countries' regions, in English and Japanese, with a quiz and callouts. Demo.
Hako Devices (箱): line drawings and 3D views of computers, phones, consoles and NAS boxes, from published sizes. Demo.
Hata (旗): country and regional flags as SVG, at their true proportions and keyed by ISO code. Demo.
Koyomi Calendars (暦): calendar-page icons and whole months as SVG, in light and dark, with page-turning from one day to the next. Demo.
Kuni (国): countries and their regions, with ISO codes and names in English and Japanese. Demo.

Sports

Dougu Sports (道具): sports emblems as SVG: trophies, medals, crests, and the ball and gear of every sport, with optional 3D turning. Demo.
Kyogijo Stadiums (競技場): sports fields, rinks, courts and ballparks drawn to scale as SVG, with each team and the score on them. Demo.
Meigen Sports (名言): sports quotations and on-this-day history. Demo.
Senshu Jerseys (選手): sports jerseys, sweaters, kits, caps, helmets and retired-number banners as SVG, front and back, with optional 2.5D turning. Demo.
Taisen Brackets (対戦): a sport-agnostic tournament bracket, drawn as SVG, from a list of ties. Demo.

Developer tools

REST in Pieces (レスト・イン・ピーシーズ): seeded test data and REST APIs for frontend development, with latency and error drills. Demo.

This package is Uchusen Rockets. The demos of all forty-one share one header and footer, so each links the rest.

The rest

CONTRIBUTING.md · SECURITY.md · CHANGELOG.md · NOTICE.md · MIT licence, CC BY 4.0 for the painted models, and ODbL 1.0 for the map data