Skip to the content

Uchusen Rockets宇宙船

Rockets drawn from sourced sizes: line drawings and painted 3D views you drop into a page, take apart and turn round, and a typed model that checks whether a rocket really goes together.

Uchusen is the Japanese word 宇宙船 for spaceship. About the name

Contents

How-to

Ready files and 3D models

Use the shipped .glb and .svg files directly, make your own with build, and know what is inside them.

The package ships ready files under @johnmorrisdotca/uchusen-rockets/assets/: a .glb mesh and a set of .svg drawings for every rocket, variant and part. Use them when you do not want the element, or want to take a rocket into other software.

What is there

FileWhat
starship-v3.glbA rocket's code-made mesh, its parts as nodes named for their slots (booster, ship), with the line looks' lines as line primitives.
starship-v3-booster.glb, starship-v3-ship.glbEach part on its own.
starship-v3.svg, starship-v3.thick.svg, starship-v3.painted.svgTogether, in each look.
starship-v3-apart.svg, starship-v3-booster.svgApart, and one part.
parts/raptor-vacuum.glbA small part.
models/starship-v3-booster.glbA painted model, under CC BY 4.0.

Everything is in metres, Y up, the base of a part on its axis, the windward side towards +Z. Positions and normals are packed with KHR_mesh_quantization, which three.js and other viewers read with no decoder.

Use one directly

Picture: [Starship Block 3](https://cdn.jsdelivr.net/npm/@johnmorrisdotca/uchusen-rockets@0/dist/assets/starship-v3.svg)

assetPathOf(options) gives the path of a file for a set of options, or null when none is shipped for them.

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

console.log(assetPathOf({ rocket: "falcon-9", variant: "block-5", show: "apart", look: "thick" }));
console.log(assetPathOf({ rocket: "falcon-9", variant: "block-5", view: "side" }));
falcon-9-block-5-apart.thick.svg
falcon-9-block-5.svg

Make your own

build makes the same bytes, in Node or a browser, with no dependency. The same description always gives the same bytes: no clock, no random number.

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

const rocket = build({ rocket: "saturn-v" });
const glb = rocket.glb();
console.log(glb.bytes.length, "bytes,", glb.triangles, "triangles");
console.log(rocket.svg({ look: "painted", view: "side" }).length, "characters of SVG");
146584 bytes, 4658 triangles
25369 characters of SVG

Write the bytes to a file in Node with writeFileSync("saturn-v.glb", glb.bytes).

Size budgets

A code-made mesh stays under 600 KB and a drawing under 80 KB, in every look. A painted model stays under 8 MB and is loaded only when the painted look asks for it. A browser test measures what each scene costs.

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

const size = build({ rocket: "starship", variant: "v4" }).glb().bytes.length;
console.log(size < 600_000);
true

Painted models and their credit

The files in models/ come from other people's licensed work. A painted rocket must carry the credit of the parts showing, and check(description).credits says which belong to a rocket. Licences and credits has the rules.

View sourceEdit on GitHubMade from the source of @johnmorrisdotca/uchusen-rockets 0.14.0.