@johnmorrisdotca/uchusen-rockets 0.1.0 → 0.2.0

package/dist/element/scene.js

@@ -7,7 +7,7 @@ import { LineMaterial } from "three/addons/lines/LineMaterial.js";
 import { LineSegments2 } from "three/addons/lines/LineSegments2.js";
 import { LineSegmentsGeometry } from "three/addons/lines/LineSegmentsGeometry.js";
 import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
-import { FOV_DEG, frameFor, PICTURE_H } from "../framing.js";
+import { directionOf, FOV_DEG, frameFor, PICTURE_H, turnedBy } from "../framing.js";
 import { LOOKS } from "../looks.js";
 import { MATERIALS } from "../model/materials.js";
 import { paintGlow, paintSky, paintSteel, paintTiles } from "./paint.js";
@@ -69,6 +69,8 @@ void main() {
   gl_FragColor = vec4(color, 1.0);
   #include <colorspace_fragment>
 }`;
+/** The materials of an engine's bell, in this package's own meshes. */
+const NOZZLE_MATERIALS = new Set(["bell", "bell-inside", "engine-metal"]);
 const asVec = (v) => [v.x, v.y, v.z];
 export class RocketViewer {
     canvas;
@@ -99,6 +101,9 @@ export class RocketViewer {
     needsDraw = true;
     pose = null;
     tilt = { azimuth: 0, polar: 0, applied: { azimuth: 0, polar: 0 } };
+    driven = null;
+    drivenDirty = false;
+    lastDistance = 0;
     resize;
     disposed = false;
     constructor(holder, options) {
@@ -162,7 +167,10 @@ export class RocketViewer {
         this.canvas.addEventListener("focus", () => (this.controls.enableZoom = true));
         this.canvas.addEventListener("blur", () => (this.controls.enableZoom = false));
         this.canvas.addEventListener("pointerdown", () => this.canvas.focus({ preventScroll: true }));
-        this.canvas.addEventListener("dblclick", () => this.setAngle(this.homeAngle, true));
+        this.canvas.addEventListener("dblclick", () => {
+            if (!this.driven)
+                this.setAngle(this.homeAngle, true);
+        });
         this.canvas.addEventListener("keydown", (event) => this.key(event));
         document.addEventListener("visibilitychange", this.onVisibility);
         this.resize = new ResizeObserver(() => this.fit());
@@ -202,7 +210,9 @@ export class RocketViewer {
                 code,
                 model: null,
                 modelFile: part.record.painted?.file ?? null,
+                ownNozzle: Boolean(part.record.painted?.ownNozzle),
                 modelState: "none",
+                nozzleShown: false,
                 faces: [],
                 outlines: [],
                 feature: [],
@@ -223,6 +233,7 @@ export class RocketViewer {
         this.frameTo(angle ?? this.currentAngle(), false);
         this.canvas.dataset.ready = "true";
         this.canvas.dataset.parts = this.parts.map((part) => part.slot).join(" ");
+        this.drivenDirty = this.driven !== null;
         this.wake();
     }
     /** Moves the parts from the packed nodes into `into`, keeping each mesh's own placement. */
@@ -394,7 +405,7 @@ export class RocketViewer {
             return;
         if (part.model) {
             part.model.visible = painted;
-            part.code.visible = !painted;
+            this.showCode(part, painted);
             return;
         }
         part.code.visible = true;
@@ -430,11 +441,26 @@ export class RocketViewer {
             this.reportPainted();
         });
     }
+    /** Behind a licensed model this package's code shows nothing, except the nozzle the model lacks, and not while the stage is nested in the one below. */
+    showCode(part, painted) {
+        const nozzleOnly = painted && part.ownNozzle;
+        part.code.visible = !painted || nozzleOnly;
+        const nozzle = nozzleOnly && this.show !== "together";
+        for (const { mesh, name } of part.faces)
+            mesh.visible = !nozzleOnly || (nozzle && NOZZLE_MATERIALS.has(name));
+        for (const lines of [...part.feature, ...part.weld])
+            lines.visible = !nozzleOnly;
+        part.nozzleShown = nozzle;
+        this.canvas.dataset.nozzle = this.parts.some((one) => one.nozzleShown) ? "own" : "";
+    }
     /** Together, apart, or one part alone: an animated move, or a cut under reduced motion. */
     setShow(show) {
         if (!this.built || show === this.show)
             return;
         this.show = show;
+        for (const part of this.parts)
+            if (part.model)
+                this.showCode(part, this.look === "painted");
         const places = this.built.placesOf(show);
         const fromAngle = this.currentAngle();
         const framing = this.framingFor(fromAngle);
@@ -541,6 +567,11 @@ export class RocketViewer {
     setAngle(angle, animate) {
         if (!this.built)
             return;
+        if (this.driven) {
+            this.homeAngle = angle;
+            this.syncDriven();
+            return;
+        }
         this.controls.autoRotate = false;
         const framing = this.framingFor(angle);
         if (animate && !this.options.reducedMotion)
@@ -572,10 +603,62 @@ export class RocketViewer {
     }
     setSpin(spin) {
         this.controls.autoRotateSpeed = autoRotateOf(spin);
-        this.controls.autoRotate = !this.options.reducedMotion && spin.seconds > 0;
+        this.controls.autoRotate = !this.driven && !this.options.reducedMotion && spin.seconds > 0;
         this.canvas.dataset.spin = `${spin.seconds}${spin.way}`;
         this.wake();
     }
+    /** Hands the turn, tip, zoom and pan to the page, as the family's view controls report them: this view's own hands (drag, wheel, keys, spin) stand down, and the camera is the chosen view's angle turned and tipped by them. `null` takes them back. */
+    drive(choice) {
+        this.driven = choice;
+        this.controls.enabled = choice === null;
+        if (choice)
+            this.controls.autoRotate = false;
+        this.canvas.style.touchAction = choice ? "auto" : "pan-y";
+        this.syncDriven();
+    }
+    /** The camera is put where the choice says at once, seen or not, so a page that asks where it looks from is told the truth; a move between parts moves it by itself. */
+    syncDriven() {
+        this.drivenDirty = false;
+        this.lens();
+        if (!this.pose)
+            this.applyDriven();
+        this.needsDraw = true;
+        this.wake();
+    }
+    drivenAngle() {
+        if (!this.driven)
+            return null;
+        const turned = turnedBy(this.homeAngle, this.driven.yaw, this.driven.tilt);
+        const lean = this.tilt.applied;
+        return { az: turned.az + MathUtils.radToDeg(lean.azimuth), el: MathUtils.clamp(turned.el - MathUtils.radToDeg(lean.polar), -87, 87) };
+    }
+    /** The camera stands where the view's angle, turned and tipped, puts it, as far off as the whole rocket needs from the view's own angle, so turning never makes it breathe. */
+    applyDriven() {
+        const angle = this.drivenAngle();
+        if (!angle || !this.built)
+            return;
+        const framing = this.framingFor(this.homeAngle);
+        const direction = directionOf(angle);
+        this.camera.position.set(framing.target[0] + direction[0] * framing.distance, framing.target[1] + direction[1] * framing.distance, framing.target[2] + direction[2] * framing.distance);
+        this.controls.target.set(...framing.target);
+        if (Math.abs(framing.distance - this.lastDistance) > 1e-6) {
+            this.lastDistance = framing.distance;
+            this.limits(framing.distance);
+        }
+        this.controls.update();
+    }
+    /** Zoom is the camera's, and the pan moves the picture by pixels, so the view stays sharp at any zoom. */
+    lens() {
+        const { zoom = 1, panX = 0, panY = 0 } = this.driven ?? {};
+        const w = Math.max(1, this.holder.clientWidth);
+        const h = Math.max(1, this.holder.clientHeight);
+        this.camera.zoom = zoom;
+        if (panX !== 0 || panY !== 0)
+            this.camera.setViewOffset(w, h, -panX, -panY, w, h);
+        else
+            this.camera.clearViewOffset();
+        this.camera.updateProjectionMatrix();
+    }
     setTilt(azimuthDeg, polarDeg) {
         this.tilt.azimuth = MathUtils.degToRad(MathUtils.clamp(azimuthDeg, -25, 25));
         this.tilt.polar = MathUtils.degToRad(MathUtils.clamp(polarDeg, -12, 12));
@@ -654,11 +737,21 @@ export class RocketViewer {
         const dA = (t.azimuth - t.applied.azimuth) * 0.12;
         const dP = (t.polar - t.applied.polar) * 0.12;
         if (Math.abs(dA) > 1e-5 || Math.abs(dP) > 1e-5) {
-            this.orbit(dA, dP);
+            if (this.driven)
+                this.drivenDirty = true;
+            else
+                this.orbit(dA, dP);
             t.applied.azimuth += dA;
             t.applied.polar += dP;
             this.needsDraw = true;
         }
+        if (this.drivenDirty) {
+            this.drivenDirty = false;
+            this.lens();
+            if (!this.pose)
+                this.applyDriven();
+            this.needsDraw = true;
+        }
         if (this.pose) {
             const { from, to, start, ms, moveParts } = this.pose;
             const k = Math.min(1, (performance.now() - start) / ms);
@@ -673,6 +766,9 @@ export class RocketViewer {
             while (dTheta < -Math.PI)
                 dTheta += 2 * Math.PI;
             const s = new Spherical(MathUtils.lerp(a.radius, b.radius, e), MathUtils.lerp(a.phi, b.phi, e), a.theta + dTheta * e);
+            const aim = this.drivenAngle();
+            if (aim)
+                s.setFromVector3(new Vector3(...directionOf(aim)).setLength(s.radius));
             this.camera.position.copy(this.controls.target).add(new Vector3().setFromSpherical(s));
             if (moveParts)
                 for (const part of this.parts) {
@@ -686,6 +782,7 @@ export class RocketViewer {
                 this.pose = null;
                 if (done)
                     this.finishParts();
+                this.drivenDirty = this.driven !== null;
             }
         }
         if (!ambient)
@@ -701,6 +798,10 @@ export class RocketViewer {
             this.canvas.dataset.azimuth = angle.az.toFixed(2);
             this.canvas.dataset.elevation = angle.el.toFixed(2);
             this.canvas.dataset.moving = this.pose ? "true" : "false";
+            if (this.driven) {
+                this.canvas.dataset.zoom = this.driven.zoom.toFixed(2);
+                this.canvas.dataset.pan = `${Math.round(this.driven.panX)},${Math.round(this.driven.panY)}`;
+            }
             if (this.glow)
                 this.glow.visible = this.look !== "painted" && this.camera.position.y > 0;
         }
@@ -716,7 +817,7 @@ export class RocketViewer {
         const h = Math.max(1, this.holder.clientHeight);
         this.renderer.setSize(w, h, false);
         this.camera.aspect = w / h;
-        this.camera.updateProjectionMatrix();
+        this.lens();
         this.syncSizes();
         if (this.built && !this.pose)
             this.applyFraming(this.framingFor(this.currentAngle()));
@@ -730,6 +831,8 @@ export class RocketViewer {
         this.camera.position.copy(this.controls.target).add(new Vector3().setFromSpherical(s));
     }
     key(event) {
+        if (this.driven)
+            return;
         const step = MathUtils.degToRad(15);
         const moves = {
             ArrowLeft: () => this.orbit(-step, 0),

package/dist/element.d.ts

@@ -1,5 +1,5 @@
 import type { Description, FitReport } from "./fit.ts";
-import { type Angle } from "./framing.ts";
+import { type Angle, type ViewChoice } from "./framing.ts";
 import { ROCKETS } from "./rockets.ts";
 export type RocketState = "picture" | "loading" | "3d" | "fallback" | "error";
 declare const HTMLBase: typeof HTMLElement;
@@ -23,6 +23,8 @@ export declare class UchusenRocket extends HTMLBase {
     private shownAt;
     private starting;
     private key;
+    private driven;
+    private placeFrame;
     /** What is showing now. */
     get state(): RocketState;
     /** What the fit check said about what is showing: its label, parts and credits. */
@@ -32,6 +34,10 @@ export declare class UchusenRocket extends HTMLBase {
     set description(value: Description | null);
     /** Where the camera is looking from, while there is a 3D view. */
     get angle(): Angle | null;
+    /** Lets a page choose the turn, tip, zoom and pan, as the family's `<kazoku-view-controls>` reports them in `kazoku-viewchange` (`element.drive(event.detail)`): the element's own drag, wheel, keys and spin stand down, and the 3D view and the drawing both follow. `null` takes them back. */
+    drive(choice: Partial<ViewChoice> | null): void;
+    /** The drawing, turned and moved to the chosen view. The 3D view moves itself, so only the drawing needs it, and only until the 3D view shows. */
+    private place;
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, before: string | null, after: string | null): void;

package/dist/element.js

@@ -4,7 +4,7 @@
 import { build, FitError } from "./build/index.js";
 import { lineupSvg } from "./build/lineup.js";
 import { CROSSFADE_MS, REDUCED_FADE_MS, revealDelay } from "./crossfade.js";
-import { cleanView, VIEWS } from "./framing.js";
+import { cleanView, turnedBy, VIEWS } from "./framing.js";
 import { cleanShow } from "./layout.js";
 import { cleanLook } from "./looks.js";
 import { ROCKETS } from "./rockets.js";
@@ -27,6 +27,7 @@ const CSS = `
 .drawing, .drawing svg { display: block; width: 100%; height: 100%; }
 .drawing, .canvas { transition: opacity var(--uchusen-fade, 1500ms) ease-in-out, filter var(--uchusen-fade, 1500ms) ease-in-out; }
 .stage { position: absolute; inset: 0; }
+:host([data-driven]) .picture { overflow: hidden; }
 .canvas { display: block; width: 100%; height: 100%; opacity: 0; filter: blur(3px); cursor: grab; border-radius: inherit; }
 .canvas:active { cursor: grabbing; }
 .canvas:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
@@ -97,6 +98,8 @@ export class UchusenRocket extends HTMLBase {
     shownAt = 0;
     starting = false;
     key = "";
+    driven = null;
+    placeFrame = 0;
     /** What is showing now. */
     get state() {
         return this.stateNow;
@@ -117,6 +120,33 @@ export class UchusenRocket extends HTMLBase {
     get angle() {
         return this.viewer?.currentAngle() ?? null;
     }
+    /** Lets a page choose the turn, tip, zoom and pan, as the family's `<kazoku-view-controls>` reports them in `kazoku-viewchange` (`element.drive(event.detail)`): the element's own drag, wheel, keys and spin stand down, and the 3D view and the drawing both follow. `null` takes them back. */
+    drive(choice) {
+        if (choice === null) {
+            this.driven = null;
+            delete this.dataset.driven;
+        }
+        else {
+            const number = (value, fallback, lo, hi) => (typeof value === "number" && Number.isFinite(value) ? Math.min(hi, Math.max(lo, value)) : fallback);
+            this.driven = {
+                yaw: number(choice.yaw, this.driven?.yaw ?? 0, -3600, 3600),
+                tilt: number(choice.tilt, this.driven?.tilt ?? 0, -90, 90),
+                zoom: number(choice.zoom, this.driven?.zoom ?? 1, 0.25, 8),
+                panX: number(choice.panX, this.driven?.panX ?? 0, -5000, 5000),
+                panY: number(choice.panY, this.driven?.panY ?? 0, -5000, 5000),
+            };
+            this.dataset.driven = "true";
+        }
+        this.viewer?.drive(this.driven);
+        this.place();
+    }
+    /** The drawing, turned and moved to the chosen view. The 3D view moves itself, so only the drawing needs it, and only until the 3D view shows. */
+    place() {
+        if (this.stateNow === "3d" && this.viewer)
+            return;
+        window.cancelAnimationFrame(this.placeFrame);
+        this.placeFrame = window.requestAnimationFrame(() => this.redraw());
+    }
     connectedCallback() {
         if (!this.shadowRoot)
             adopt(this.attachShadow({ mode: "open" }), CSS, rocketSheet);
@@ -173,6 +203,7 @@ export class UchusenRocket extends HTMLBase {
         this.watch = null;
         window.clearTimeout(this.releaseTimer);
         window.clearTimeout(this.revealTimer);
+        window.cancelAnimationFrame(this.placeFrame);
         for (const clean of this.cleanups.splice(0))
             clean();
         this.viewer?.dispose();
@@ -249,7 +280,7 @@ export class UchusenRocket extends HTMLBase {
             return;
         const { look, show, angle } = this.settings(this.builtNow);
         // when a 3D view is showing, a drawing of the same angle is ready behind it
-        const from = this.viewer?.currentAngle() ?? angle;
+        const from = this.driven ? turnedBy(angle, this.driven.yaw, this.driven.tilt) : (this.viewer?.currentAngle() ?? angle);
         const svg = this.builtNow.svg({ look, show, view: from });
         const template = document.createElement("template");
         template.innerHTML = svg;
@@ -258,6 +289,8 @@ export class UchusenRocket extends HTMLBase {
             return;
         node.setAttribute("aria-label", this.getAttribute("label") ?? this.builtNow.report.label);
         this.drawing.replaceChildren(node);
+        const { zoom = 1, panX = 0, panY = 0 } = this.driven ?? {};
+        this.drawing.style.transform = zoom !== 1 || panX !== 0 || panY !== 0 ? `translate(${panX}px, ${panY}px) scale(${zoom})` : "";
     }
     mark() {
         if (!this.builtNow)
@@ -278,7 +311,7 @@ export class UchusenRocket extends HTMLBase {
             const { look, show, viewName, angle } = this.settings(this.builtNow);
             this.viewer.setLabel(this.getAttribute("label") ?? this.builtNow.report.label);
             // a new rocket keeps the angle, unless the same change named another view
-            const from = viewName !== this.lastView ? angle : this.viewer.currentAngle();
+            const from = viewName !== this.lastView || this.driven ? angle : this.viewer.currentAngle();
             this.lastView = viewName;
             await this.viewer.load(this.builtNow, show, look, from);
             this.emit("uchusen-change", { report: this.builtNow.report });
@@ -325,8 +358,11 @@ export class UchusenRocket extends HTMLBase {
                 this.releaseTimer = window.setTimeout(() => {
                     this.viewer?.dispose();
                     this.viewer = null;
-                    if (generation === this.generation)
+                    if (generation === this.generation) {
                         this.setState("picture");
+                        if (this.driven)
+                            this.place();
+                    }
                 }, RELEASE_MS);
             }
         }, { rootMargin: "200px 0px" });
@@ -363,6 +399,8 @@ export class UchusenRocket extends HTMLBase {
                 },
             });
             this.viewer = made;
+            if (this.driven)
+                made.drive(this.driven);
             made.setVisible(true);
             const { look, show, viewName, angle } = this.settings(this.builtNow ?? built);
             this.lastView = viewName;

package/dist/framing.d.ts

@@ -15,6 +15,16 @@ export interface Angle {
 export declare const VIEWS: Readonly<Record<ViewName, Angle>>;
 export declare const cleanView: (value: unknown) => ViewName;
 export declare const deg: (d: number) => number;
+/** What the family's view controls report: the turn and tip in degrees, the zoom (1 is the whole rocket in the picture) and the pan in pixels. */
+export interface ViewChoice {
+    yaw: number;
+    tilt: number;
+    zoom: number;
+    panX: number;
+    panY: number;
+}
+/** What the family's view controls choose: the turn and tip, in degrees, from a base angle. Dragging right makes `yaw` larger, which carries the camera the other way round; `tilt` larger tips the top away, which lowers the camera. */
+export declare function turnedBy(base: Angle, yaw: number, tilt: number): Angle;
 /** The unit vector from what is looked at towards the camera. */
 export declare function directionOf({ az, el }: Angle): Vec3;
 export interface Framing {

package/dist/framing.js

@@ -15,6 +15,10 @@ export const VIEWS = {
 };
 export const cleanView = (value) => (VIEW_NAMES.includes(value) ? value : DEFAULT_VIEW);
 export const deg = (d) => (d * Math.PI) / 180;
+/** What the family's view controls choose: the turn and tip, in degrees, from a base angle. Dragging right makes `yaw` larger, which carries the camera the other way round; `tilt` larger tips the top away, which lowers the camera. */
+export function turnedBy(base, yaw, tilt) {
+    return { az: base.az - yaw, el: Math.min(87, Math.max(-87, base.el - tilt)) };
+}
 /** The unit vector from what is looked at towards the camera. */
 export function directionOf({ az, el }) {
     const c = Math.cos(deg(el));

package/dist/index.d.ts

@@ -10,8 +10,8 @@ export type { Joint, PartKind, PartRecord } from "./parts.ts";
 export { PART_ENTRIES, partEntry } from "./model/registry.ts";
 export { check } from "./fit.ts";
 export type { Description, FitCode, FitIssue, FitReport, SlotPart } from "./fit.ts";
-export { axesOf, cleanView, DEFAULT_VIEW, directionOf, FOV_DEG, frameFor, PICTURE_H, PICTURE_W, VIEW_NAMES, VIEWS } from "./framing.ts";
-export type { Angle, Framing, Vec3, ViewName } from "./framing.ts";
+export { axesOf, cleanView, DEFAULT_VIEW, directionOf, FOV_DEG, frameFor, PICTURE_H, PICTURE_W, turnedBy, VIEW_NAMES, VIEWS } from "./framing.ts";
+export type { Angle, Framing, Vec3, ViewChoice, ViewName } from "./framing.ts";
 export { cleanLook, DEFAULT_LOOK, LOOK_NAMES, LOOKS } from "./looks.ts";
 export type { Look, LookName } from "./looks.ts";
 export { cleanShow, placesFor, showsOf } from "./layout.ts";

package/dist/index.js

@@ -5,7 +5,7 @@ export { SOURCES } from "./data/sources.js";
 export { creditLine, MODEL_CREDITS } from "./data/credits.js";
 export { PART_ENTRIES, partEntry } from "./model/registry.js";
 export { check } from "./fit.js";
-export { axesOf, cleanView, DEFAULT_VIEW, directionOf, FOV_DEG, frameFor, PICTURE_H, PICTURE_W, VIEW_NAMES, VIEWS } from "./framing.js";
+export { axesOf, cleanView, DEFAULT_VIEW, directionOf, FOV_DEG, frameFor, PICTURE_H, PICTURE_W, turnedBy, VIEW_NAMES, VIEWS } from "./framing.js";
 export { cleanLook, DEFAULT_LOOK, LOOK_NAMES, LOOKS } from "./looks.js";
 export { cleanShow, placesFor, showsOf } from "./layout.js";
 export { CROSSFADE_MS, DRAWING_HOLD_MS, REDUCED_FADE_MS, revealDelay } from "./crossfade.js";

package/dist/model/falcon.d.ts

@@ -18,6 +18,7 @@ export interface FalconDraw {
         joint: number;
         radius: number;
         nozzle: number;
+        exit: number;
     };
     fairing: {
         height: number;

package/dist/model/falcon.js

@@ -1,5 +1,6 @@
 // Falcon 9, Falcon Heavy, Dragon and Grasshopper from tables of numbers. Heights and diameters are the sourced figures where there are any. How a part is drawn is not a published figure: Block 5, Dragon 2, Dragon 1, Falcon Heavy
 // and Grasshopper take their proportions from their licensed models at the sourced sizes (see NOTICE.md), and the older Falcons from the sourced totals and the documented differences.
+import { MVAC_EXIT_DIAMETER } from "../data/falcon.js";
 import { deg } from "../framing.js";
 import { pointOf, radial, strut } from "./pieces.js";
 import { gridFin } from "./starship.js";
@@ -16,7 +17,8 @@ const R = 1.85;
 /** Each part's height is the sourced figure where there is one; the others share out what the sourced whole leaves, so the parts add up to it. */
 const falconOf = (first, interstage, secondHeight, joint, fairing, fairingRadius, engines, legs, fins) => ({
     first: { height: first, interstage, radius: R, engines, legs, fins },
-    second: { height: secondHeight, joint, radius: R, nozzle: joint * 0.9 },
+    // the v1.0's Merlin 1C Vacuum has no sourced width, so its nozzle keeps its drawn proportion
+    second: { height: secondHeight, joint, radius: R, nozzle: joint * 0.9, exit: engines === "grid" ? R * 0.62 : (MVAC_EXIT_DIAMETER.value ?? 0) / 2 },
     fairing: { height: fairing, radius: fairingRadius },
 });
 export const FALCON_DRAWS = {
@@ -62,11 +64,11 @@ function firstStage(d, withTop) {
     return pieces;
 }
 function secondStage(d) {
-    const { height, joint, radius: r, nozzle } = d;
+    const { height, joint, radius: r, nozzle, exit } = d;
     const pieces = [];
     pieces.push({ kind: "lathe", material: "white", segs: 48, body: true, outline: true, profile: [[r * 0.6, joint - 0.5], [r, joint], [r, height]], rings: [joint + 0.5, height - 0.05], welds: [(joint + height) / 2] });
     pieces.push({ kind: "lathe", material: "soot", segs: 36, under: true, only: "mesh", profile: [[0, joint - 0.5], [r * 0.6, joint - 0.5]] });
-    pieces.push(...merlin([0, 0], 0, r * 0.62, nozzle * 1.06));
+    pieces.push(...merlin([0, 0], 0, exit, nozzle * 1.06));
     return pieces;
 }
 function fairing(d, jointRadius) {

package/dist/model/registry.js

@@ -14,7 +14,7 @@ const PAINTED = {
     "starship-v1-flight1-ship": { file: "starship-v1-flight1-ship.glb", credit: "clarence365-s24b7" },
     "starship-2019-ship": { file: "starship-2019-ship.glb", credit: "martiandays-2019" },
     "falcon-9-block-5-first-stage": { file: "falcon-9-block-5-first-stage.glb", credit: "stanley-falcon-9" },
-    "falcon-9-block-5-second-stage": { file: "falcon-9-block-5-second-stage.glb", credit: "stanley-falcon-9" },
+    "falcon-9-block-5-second-stage": { file: "falcon-9-block-5-second-stage.glb", credit: "stanley-falcon-9", ownNozzle: true },
     "falcon-9-block-5-fairing": { file: "falcon-9-block-5-fairing.glb", credit: "stanley-falcon-9" },
     "dragon-dragon-2-capsule": { file: "dragon-dragon-2-capsule.glb", credit: "kubaha-dragon-2" },
     "dragon-dragon-2-trunk": { file: "dragon-dragon-2-trunk.glb", credit: "kubaha-dragon-2" },

package/dist/parts.d.ts

@@ -34,10 +34,11 @@ export interface PartRecord {
         x: number;
         z: number;
     };
-    /** The painted look's mesh, when a licensed model gives one: its file under assets/models/ and whose it is. Otherwise this package's own code paints it. */
+    /** The painted look's mesh, when a licensed model gives one: its file under assets/models/ and whose it is. Otherwise this package's own code paints it. `ownNozzle`: the model has none, so this package's own shows with it unless the part is nested in the stage below. */
     painted: {
         file: string;
         credit: CreditId;
+        ownNozzle?: true;
     } | null;
     /** What a reader should be told about where its shape came from. */
     drawnFrom: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/uchusen-rockets",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "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.",
   "keywords": ["rocket", "rockets", "spaceship", "starship", "super-heavy", "falcon-9", "dragon", "spaceflight", "line-drawing", "svg", "3d", "3d-models", "glb", "gltf", "three", "threejs", "webgl", "web-component", "custom-element", "react", "typescript", "data"],
   "homepage": "https://johnmorrisdotca.github.io/uchusen-rockets/",
@@ -47,6 +47,7 @@
     "@gltf-transform/core": "4.5.1",
     "@gltf-transform/extensions": "4.5.1",
     "@gltf-transform/functions": "4.5.1",
+    "@johnmorrisdotca/kazoku-ui": "0.2.1",
     "@playwright/test": "1.64.0",
     "@types/node": "24.10.1",
     "@types/react": "19.2.7",