@johnmorrisdotca/uchusen-rockets 0.9.0 → 0.11.0

package/dist/element/scene.js

@@ -1,7 +1,7 @@
 // The 3D view (three.js, MIT), loaded only when the element comes on screen. One canvas with one rocket, drawn three ways: the line drawing, the thick lines, and painted with true materials. Switching look
 // changes materials and never the camera, so the angle stays. Moving between together, apart and one part alone is an animated move of each part, and under reduced motion it is a cut. It draws only while
 // something moves, never while out of view or the tab is hidden, and settles after a while with no one touching it.
-import { ACESFilmicToneMapping, BackSide, CanvasTexture, Color, DirectionalLight, DoubleSide, Group, HemisphereLight, LineSegments, LinearMipmapLinearFilter, MathUtils, Mesh, MeshBasicMaterial, MeshStandardMaterial, PerspectiveCamera, PlaneGeometry, PMREMGenerator, RepeatWrapping, Scene, ShaderMaterial, SphereGeometry, Spherical, SRGBColorSpace, Timer, Vector2, Vector3, WebGLRenderer, } from "three";
+import { ACESFilmicToneMapping, BackSide, CanvasTexture, Color, DirectionalLight, DoubleSide, Group, HemisphereLight, LineSegments, LinearMipmapLinearFilter, MathUtils, Mesh, MeshBasicMaterial, MeshStandardMaterial, PerspectiveCamera, PlaneGeometry, PCFSoftShadowMap, PMREMGenerator, RepeatWrapping, Scene, ShaderMaterial, SphereGeometry, Spherical, SRGBColorSpace, Timer, Vector2, Vector3, WebGLRenderer, } from "three";
 import { OrbitControls } from "three/addons/controls/OrbitControls.js";
 import { LineMaterial } from "three/addons/lines/LineMaterial.js";
 import { LineSegments2 } from "three/addons/lines/LineSegments2.js";
@@ -14,6 +14,7 @@ import { pixelRatioFor } from "../pixels.js";
 import { MATERIALS } from "../model/materials.js";
 import { paintGlow, paintSky, paintSteel, paintTiles } from "./paint.js";
 import { flightBounds, frameAt } from "../flight.js";
+import { besideLabel } from "../beside.js";
 import { GroundKit } from "./ground.js";
 import { PartPlumes, PlumeKit } from "./plumes.js";
 const IDLE_STOP_MS = 90_000;
@@ -97,6 +98,9 @@ export class RocketViewer {
     built = null;
     look = "line";
     show = "together";
+    sun;
+    /** The fleet is lit with a shadow: its ships are big enough for one part to fall on another. A rocket is not, so it keeps the one light it has. */
+    shadows = false;
     plumes;
     lit = null;
     /** What was lit before a flight took over the engines. */
@@ -113,6 +117,9 @@ export class RocketViewer {
     burnSlots = null;
     generation = 0;
     materialCache = new Map();
+    /** The materials that glow when the engines are lit, and whether they do now. */
+    glowing = new Map();
+    glowOn = false;
     outlineMaterial;
     textures = [];
     steelMap = null;
@@ -134,6 +141,13 @@ export class RocketViewer {
     compiling = 0;
     compiled = new Set();
     settled = Promise.resolve();
+    marks = [];
+    markHost = null;
+    /** The words that say what stands beside the craft: its name and length, under its foot. */
+    besideEl = null;
+    focusing = false;
+    nearSaid = false;
+    nearAt = 0;
     constructor(holder, options) {
         this.holder = holder;
         this.options = options;
@@ -141,6 +155,7 @@ export class RocketViewer {
         this.renderer.outputColorSpace = SRGBColorSpace;
         this.renderer.toneMapping = ACESFilmicToneMapping;
         this.renderer.toneMappingExposure = 1;
+        this.renderer.shadowMap.type = PCFSoftShadowMap;
         this.canvas = this.renderer.domElement;
         this.canvas.className = "canvas";
         this.canvas.setAttribute("part", "canvas");
@@ -169,12 +184,13 @@ export class RocketViewer {
         this.scene.environmentIntensity = 0.95;
         const key = new DirectionalLight("#fff6e6", 1.6);
         key.position.set(3, 5, 4);
+        this.sun = key;
         const rim = new DirectionalLight("#cfe2ff", 1.1);
         rim.position.set(-4, 1, -5);
         const low = new DirectionalLight("#ffffff", 0.35);
         low.position.set(1, -4, 2);
         this.plumes = new PlumeKit();
-        this.scene.add(key, rim, low, new HemisphereLight("#d7e6ff", "#22252b", 0.35), this.plumes.light, this.root);
+        this.scene.add(key, key.target, rim, low, new HemisphereLight("#d7e6ff", "#22252b", 0.35), this.plumes.light, this.root);
         this.outlineMaterial = new ShaderMaterial({
             vertexShader: OUTLINE_VERTEX,
             fragmentShader: OUTLINE_FRAGMENT,
@@ -220,8 +236,11 @@ export class RocketViewer {
         this.parts = [];
         this.built = built;
         this.show = show;
+        this.shadows = built.parts.some((part) => part.record.rocket.startsWith("fleet-"));
+        this.renderer.shadowMap.enabled = this.shadows;
+        this.sun.castShadow = this.shadows;
         const places = built.placesOf(show);
-        for (const part of built.parts) {
+        for (const part of [...built.parts, ...built.beside]) {
             const source = gltf.scene.getObjectByName(part.slot);
             if (!source)
                 continue;
@@ -231,11 +250,13 @@ export class RocketViewer {
             holder.add(code);
             const view = {
                 slot: part.slot,
+                beside: built.beside.includes(part),
                 holder,
                 code,
                 model: null,
-                modelFile: part.record.painted?.file ?? null,
-                ownNozzle: Boolean(part.record.painted?.ownNozzle),
+                // the stack beside it is this package's own paint in every look: a licensed model shows only with its credit, which is the craft's
+                modelFile: built.beside.includes(part) ? null : (part.record.painted?.file ?? null),
+                ownNozzle: !built.beside.includes(part) && Boolean(part.record.painted?.ownNozzle),
                 modelState: "none",
                 nozzleShown: false,
                 faces: [],
@@ -267,6 +288,7 @@ export class RocketViewer {
             this.parts.push(view);
         }
         this.addGlow();
+        this.fitShadow();
         this.setLook(look);
         this.frameTo(angle ?? this.currentAngle(), false);
         if (this.clockNow) {
@@ -275,7 +297,8 @@ export class RocketViewer {
             this.setFlight(this.clockNow);
         }
         this.canvas.dataset.ready = "true";
-        this.canvas.dataset.parts = this.parts.map((part) => part.slot).join(" ");
+        this.canvas.dataset.parts = this.parts.filter((part) => !part.beside).map((part) => part.slot).join(" ");
+        this.canvas.dataset.beside = built.beside.length ? "on" : "off";
         this.drivenDirty = this.driven !== null;
         this.wake();
         await this.settled;
@@ -305,6 +328,8 @@ export class RocketViewer {
                 const mesh = new Mesh(node.geometry);
                 const name = node.material.name;
                 mesh.name = name;
+                mesh.castShadow = this.shadows && !(name in MATERIALS && "opacity" in MATERIALS[name]);
+                mesh.receiveShadow = this.shadows;
                 carrier.add(mesh);
                 view.faces.push({ mesh, name, hasUv: Boolean(node.geometry.getAttribute("uv")) });
                 const outline = new Mesh(node.geometry, this.outlineMaterial);
@@ -378,6 +403,16 @@ export class RocketViewer {
             made.color.set("#ffffff");
         }
         this.dullTile(made, name);
+        if (spec.opacity !== undefined) {
+            made.transparent = true;
+            made.opacity = spec.opacity;
+            made.depthWrite = false;
+        }
+        if (spec.glow) {
+            made.emissive.set(spec.glowColor ?? spec.color);
+            made.emissiveIntensity = this.glowOn ? spec.glow : 0;
+            this.glowing.set(made, spec.glow);
+        }
         this.materialCache.set(key, made);
         return made;
     }
@@ -516,6 +551,9 @@ export class RocketViewer {
                 lowest = { view, y: fired[0].y - 1 };
         }
         this.burningNow = burning;
+        this.glowOn = this.lit === "full" || burning > 0;
+        for (const [material, strength] of this.glowing)
+            material.emissiveIntensity = this.glowOn ? strength : 0;
         this.burnSlots = lowest;
         this.plumes.setBurning(burning);
         this.plumes.light.intensity = burning === 0 || this.look !== "painted" ? 0 : Math.min(900, 120 + burning * 40);
@@ -574,6 +612,9 @@ export class RocketViewer {
                 this.ground = new GroundKit();
                 this.scene.add(this.ground.group);
             }
+            for (const part of this.parts)
+                if (part.beside)
+                    part.holder.visible = false;
             const { min, max } = this.boundsNow();
             this.ground.fit(this.built.boundsOf("together").max[0] * 2.4 + 4, Math.max(Math.abs(min[0]), Math.abs(max[0])));
             this.ground.group.visible = true;
@@ -675,7 +716,7 @@ export class RocketViewer {
             this.options.onPainted("");
             return;
         }
-        const states = this.parts.map((part) => (part.modelFile ? part.modelState : "code"));
+        const states = this.parts.filter((part) => !part.beside).map((part) => (part.modelFile ? part.modelState : "code"));
         const state = states.some((s) => s === "loading" || s === "none") ? "loading" : states.every((s) => s === "ready") ? "model" : states.includes("ready") ? "mixed" : "code";
         this.canvas.dataset.painted = state;
         this.options.onPainted(state);
@@ -735,11 +776,35 @@ export class RocketViewer {
         part.nozzleShown = nozzle;
         this.canvas.dataset.nozzle = this.parts.some((one) => one.nozzleShown) ? "own" : "";
     }
+    /** The key light looks at the middle of what shows, from far enough to take in all of it, and its shadow map covers just that. */
+    fitShadow() {
+        if (!this.shadows || !this.built)
+            return;
+        const { min, max } = this.built.boundsOf(this.show);
+        const centre = new Vector3((min[0] + max[0]) / 2, (min[1] + max[1]) / 2, (min[2] + max[2]) / 2);
+        const radius = Math.max(1, Math.hypot(max[0] - min[0], max[1] - min[1], max[2] - min[2]) / 2);
+        const direction = new Vector3(3, 5, 4).normalize();
+        this.sun.position.copy(centre).addScaledVector(direction, radius * 2);
+        this.sun.target.position.copy(centre);
+        const shadow = this.sun.shadow;
+        shadow.mapSize.set(2048, 2048);
+        shadow.camera.left = -radius;
+        shadow.camera.right = radius;
+        shadow.camera.top = radius;
+        shadow.camera.bottom = -radius;
+        shadow.camera.near = radius * 0.5;
+        shadow.camera.far = radius * 4;
+        shadow.bias = -0.0004;
+        shadow.normalBias = radius * 0.0006;
+        shadow.camera.updateProjectionMatrix();
+        this.sun.target.updateMatrixWorld();
+    }
     /** Together, apart, or one part alone: an animated move, or a cut under reduced motion. */
     setShow(show) {
         if (!this.built || show === this.show || this.clockNow)
             return;
         this.show = show;
+        this.fitShadow();
         for (const part of this.parts)
             if (part.model)
                 this.showCode(part, this.look === "painted");
@@ -798,6 +863,8 @@ export class RocketViewer {
         this.controls.update();
     }
     limits(distance) {
+        if (!this.focusing)
+            this.nearAt = Math.max(this.nearAt, distance * 0.3);
         this.fitGlow();
         this.camera.near = Math.max(0.2, distance / 40);
         this.camera.far = distance * 8;
@@ -840,6 +907,13 @@ export class RocketViewer {
             this.limits(this.framingFor(this.currentAngle()).distance);
     }
     /** Where the camera is looking from. */
+    /** Where a point of what shows, in metres, falls on the canvas in CSS pixels, and whether it is in front of the camera and inside the picture. A label that follows a part asks for it each time the view is drawn. */
+    screenPoint(point) {
+        this.camera.updateMatrixWorld();
+        const p = new Vector3(point[0], point[1], point[2]).project(this.camera);
+        const box = this.canvas.getBoundingClientRect();
+        return { x: (p.x * 0.5 + 0.5) * box.width, y: (-p.y * 0.5 + 0.5) * box.height, visible: p.z < 1 && Math.abs(p.x) <= 1 && Math.abs(p.y) <= 1 };
+    }
     currentAngle() {
         const offset = this.camera.position.clone().sub(this.controls.target);
         if (offset.lengthSq() === 0)
@@ -1035,6 +1109,142 @@ export class RocketViewer {
         if (!this.frame && this.visible && !document.hidden && !this.disposed)
             this.frame = requestAnimationFrame(this.tick);
     }
+    /** Labels on the parts: each follows its part as the model turns, hides with its part, and gives way to a label drawn before it that it would cover. Null takes them away. */
+    setMarks(marks) {
+        for (const { el } of this.marks)
+            el.remove();
+        this.marks = [];
+        if (!marks || marks.length === 0) {
+            if (!this.besideEl) {
+                this.markHost?.remove();
+                this.markHost = null;
+            }
+            return;
+        }
+        this.hostOfMarks();
+        for (const mark of marks) {
+            const el = document.createElement("span");
+            el.dataset.mark = mark.id;
+            el.textContent = mark.text;
+            el.style.cssText = mark.numbered
+                ? "position:absolute;left:0;top:0;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:#f2c14e;color:#0b111b;font-weight:700;text-align:center;line-height:22px;will-change:transform;display:none"
+                : "position:absolute;left:0;top:0;padding:1px 5px;border-left:2px solid #f2c14e;color:#e6edf6;background:rgba(11,17,27,0.72);white-space:nowrap;will-change:transform;display:none";
+            this.hostOfMarks().appendChild(el);
+            this.marks.push({ mark, el });
+        }
+        this.wake();
+    }
+    hostOfMarks() {
+        if (!this.markHost) {
+            const host = document.createElement("div");
+            host.className = "marks";
+            host.setAttribute("aria-hidden", "true");
+            host.style.cssText = "position:absolute;inset:0;overflow:hidden;pointer-events:none;font:11px/1.2 system-ui,sans-serif";
+            this.holder.appendChild(host);
+            this.markHost = host;
+        }
+        return this.markHost;
+    }
+    /** What stands beside the craft is named: a caption under its foot, kept inside the picture. */
+    placeBeside() {
+        const view = this.parts.find((part) => part.beside);
+        if (!view) {
+            this.besideEl?.remove();
+            this.besideEl = null;
+            return;
+        }
+        if (!this.besideEl) {
+            const el = document.createElement("span");
+            el.dataset.besideLabel = "";
+            el.textContent = besideLabel();
+            el.style.cssText = "position:absolute;left:0;top:0;padding:1px 5px;color:#e6edf6;background:rgba(11,17,27,0.72);white-space:nowrap;will-change:transform;display:none";
+            this.hostOfMarks().appendChild(el);
+            this.besideEl = el;
+        }
+        const el = this.besideEl;
+        if (!view.holder.visible || this.clockNow) {
+            el.style.display = "none";
+            return;
+        }
+        const width = this.canvas.clientWidth;
+        const height = this.canvas.clientHeight;
+        const point = new Vector3(view.holder.position.x, view.holder.position.y, view.holder.position.z).project(this.camera);
+        const w = besideLabel().length * 6.2 + 12;
+        const x = Math.min(Math.max(((point.x + 1) / 2) * width - w / 2, 4), Math.max(4, width - w - 4));
+        const y = Math.min(((1 - point.y) / 2) * height + 6, height - 20);
+        el.style.display = point.z < 1 ? "block" : "none";
+        el.style.transform = `translate(${Math.round(x)}px,${Math.round(y)}px)`;
+    }
+    /** Put the labels where their parts are now. */
+    placeMarks() {
+        if (this.marks.length === 0)
+            return;
+        const width = this.canvas.clientWidth;
+        const height = this.canvas.clientHeight;
+        const taken = [];
+        const world = new Vector3();
+        for (const { mark, el } of this.marks) {
+            const part = this.parts.find((p) => p.slot === mark.slot);
+            if (part && !part.holder.visible) {
+                el.style.display = "none";
+                continue;
+            }
+            world.set(...mark.at);
+            if (part && mark.rest)
+                world.add(new Vector3(part.holder.position.x - mark.rest[0], part.holder.position.y - mark.rest[1], part.holder.position.z - mark.rest[2]));
+            world.project(this.camera);
+            const x = ((world.x + 1) / 2) * width;
+            const y = ((1 - world.y) / 2) * height;
+            const w = mark.numbered ? 22 : mark.text.length * 6.2 + 12;
+            const h = mark.numbered ? 22 : 16;
+            const ok = world.z < 1 && x > -w && x < width + w && y > -h && y < height + h && !taken.some((r) => Math.abs(r.x - x) < (r.w + w) / 2 && Math.abs(r.y - y) < (r.h + h) / 2);
+            if (!ok) {
+                el.style.display = "none";
+                continue;
+            }
+            taken.push({ x, y, w, h });
+            el.style.display = "block";
+            el.style.transform = `translate(${Math.round(x + (mark.numbered ? 0 : 6))}px,${Math.round(y - (mark.numbered ? 0 : 8))}px)`;
+        }
+    }
+    /** Show only some slots and fly to look at them: an inset. Null puts the ship back as it was. */
+    focusOn(focus) {
+        if (!this.built || this.clockNow)
+            return;
+        if (!focus) {
+            if (!this.focusing)
+                return;
+            this.focusing = false;
+            const places = this.built.placesOf(this.show);
+            for (const part of this.parts) {
+                const place = places.find((p) => p.slot === part.slot);
+                if (place) {
+                    part.holder.position.set(...place.at);
+                    part.holder.visible = place.shown;
+                }
+            }
+            this.startPose(this.framingFor(this.currentAngle()), MOVE_MS, false);
+            this.relight();
+            return;
+        }
+        this.focusing = true;
+        const places = this.built.placesOf("together");
+        for (const part of this.parts) {
+            const place = places.find((p) => p.slot === part.slot);
+            if (place)
+                part.holder.position.set(...place.at);
+            part.holder.visible = focus.slots.includes(part.slot);
+        }
+        const dir = new Vector3(...focus.direction).normalize().multiplyScalar(focus.distance);
+        this.startPose({ target: focus.target, position: [focus.target[0] + dir.x, focus.target[1] + dir.y, focus.target[2] + dir.z], distance: focus.distance }, MOVE_MS, false);
+        this.controls.minDistance = focus.distance * 0.04;
+        this.controls.maxDistance = Math.max(focus.distance * 3, this.camera.position.distanceTo(this.controls.target));
+        this.camera.near = Math.max(0.2, focus.distance / 80);
+        this.camera.far = Math.max(focus.distance * 10, this.camera.position.distanceTo(this.controls.target) * 4);
+        this.camera.updateProjectionMatrix();
+        this.relight();
+        this.wake();
+    }
     tick = (now) => {
         this.frame = 0;
         if (!this.visible || document.hidden || this.disposed)
@@ -1116,9 +1326,16 @@ export class RocketViewer {
         if (this.needsDraw || changed || this.pose) {
             this.syncSizes();
             this.renderer.render(this.scene, this.camera);
+            this.placeMarks();
+            this.placeBeside();
+            if (this.options.onNear && !this.nearSaid && this.nearAt > 0 && this.camera.position.distanceTo(this.controls.target) < this.nearAt) {
+                this.nearSaid = true;
+                this.options.onNear();
+            }
             this.needsDraw = false;
             this.frames++;
             this.canvas.dataset.frames = String(this.frames);
+            this.options.onDraw?.();
             const angle = this.currentAngle();
             this.canvas.dataset.azimuth = angle.az.toFixed(2);
             this.canvas.dataset.elevation = angle.el.toFixed(2);

package/dist/element.d.ts

@@ -82,6 +82,18 @@ 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;
+    /**
+     * Where a point of the model, in metres, is on the picture now: in CSS pixels from the element's top left, and whether it is in front and inside. A page's label that follows a part calls it each time the element
+     * says `uchusen-draw`, so the label moves as the model turns and stands still when it does not. Without a 3D view it gives null.
+     *
+     * @param point A point of the model in metres, as `labelsOf` gives them.
+     * @returns The place on the picture, or null.
+     */
+    screenPoint(point: readonly [number, number, number]): {
+        x: number;
+        y: number;
+        visible: boolean;
+    } | 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. It is drawn at most about 20 times a second and never while out of sight: it is made again when it comes back. */
@@ -132,6 +144,8 @@ export declare class UchusenRocket extends HTMLBase {
     private flightStep;
     /** Tells the page where the timeline is: at once for a new phase or a stop, otherwise at most 8 times a second. */
     private noteFlight;
+    /** Whether Starship stands beside it: `beside="on"`, and never beside Starship itself. */
+    private besideOn;
     /** Whether the engines are lit: `engines="on"`, and never for a reader who asked for reduced motion. */
     private engineLights;
     /** Hands the 3D view what the attributes say about the engines, and its reader's motion setting. */
@@ -144,6 +158,16 @@ export declare class UchusenRocket extends HTMLBase {
     private redraw;
     private mark;
     private applyRocket;
+    /** A fleet ship is built coarse first (the first picture and the far view) and fine when the camera comes near, an inset opens or one part is shown alone: once per visit, never on a turn or a look change. */
+    private fine;
+    private detailFor;
+    private upgrade;
+    private panel;
+    private panelFor;
+    /** The panel of a ship that has one: tabs, a Labels toggle and insets that open on a click. `inspector="off"` leaves it out; `labels="on"` starts with the labels showing. */
+    private syncPanel;
+    /** Saves the model on screen as a .glb: the whole ship, or the one part shown alone. It is made here, in the browser, from the same parts, because a fleet ship's file is far too big to ship. */
+    private downloadModel;
     private lastView;
     private applySettings;
     private startWatching;