@a2f0/skyline 0.0.0-stage → 0.1.1

package/lib/skyline-scene.js

@@ -0,0 +1,86 @@
+import { geographicBuildings } from "./models/skyline-geography-data.js";
+import { createGeographicBuilding, createGeographicGround } from "./models/skyline-geography.js";
+// The panorama's viewBox, models/skyline-panorama.svg, in the drawing's layer units. Its
+// centre is the skyline camera's sightline and its height the camera's vertical field of view.
+const panorama = { x: -1400, y: -154.834, width: 9378.476, height: 3535.05 };
+// The frame index.html shows the drawing in: skyline-animated.svg's viewBox, bottom-aligned
+// and centred, in the same layer units. The file's `skyline-position` group translates the
+// layer by (1105.5923, -87.26366) inside its viewBox.
+const drawingFrame = { x: -1105.5923, y: 87.26366, width: 8501.0986, height: 2782.0373 };
+// The direction the drawing's camera looks from, south-east of the skyline: its azimuth from
+// south toward east. A building's detail faces it the same way.
+export const skylineAzimuth = 36.1247 * Math.PI / 180;
+// The geographic skyline, registered with Crain's mapped centre at `anchor`: every mapped
+// building, their ground, the settings a study shows them with, and the drawing's camera.
+export function createGeographicSkyline(anchor = [0, 0, 0]) {
+    const offset = [anchor[0], anchor[2]];
+    const models = geographicBuildings.map((record) => createGeographicBuilding(record, offset));
+    const ground = createGeographicGround(offset);
+    // The comparison views share a frame set in ground plan, which holds both layouts: the
+    // original's platform, and every mapped footprint, from 330 North Wabash's west side to
+    // The Buckingham's east, with about 50 m east and west even where a portrait phone's
+    // width binds the frame. North and south it runs from about 100 m past River Plaza's north
+    // side, across the river, to 127 m past the Railway Exchange's mapped south side at
+    // Jackson. Height comparison sees it at an angle, and on a portrait phone can clip the
+    // platform's south-west corner.
+    const center = [anchor[0] + 128, 0, anchor[2] + 85];
+    const planFit = { width: 1050, height: 1520 };
+    const settings = {
+        target: [center[0], 155, center[2]],
+        fit: { width: 1100, height: 950 },
+        platform: { width: 1200, depth: 1600, x: center[0], z: center[2] },
+        clippingMargin: 1800,
+        lightPosition: [-700, 1100, 500],
+        // Wide enough for the platform's far corners, which the geography suite checks.
+        shadowCamera: { left: -1300, right: 1300, top: 1300, bottom: -1300, near: 1, far: 2600 },
+    };
+    // The drawing traces a lakefront photograph. Fitting the mapped buildings'
+    // roofs and tips to their drawn positions (scripts/fit-geographic-camera.ts)
+    // puts its eye on the shore by the Adler Planetarium, 2 m above the street
+    // datum, looking up at the skyline; it is held there while the angles and lens
+    // are refitted, since the drawing barely tells its distance from its lens. The
+    // buildings stay where they are mapped; only the camera is fitted. Eye positions
+    // are meters east, up, and south of Crain's mapped centre.
+    const photoEye = [1471.76, 2, 1948.8];
+    const photoAzimuth = skylineAzimuth, photoPolar = 94.0182 * Math.PI / 180;
+    // The panorama's vertical field of view. The panorama is the reference excerpt's frame
+    // widened about the same centre to every building the drawing shows, so the camera aims
+    // where it always has.
+    const frameFov = 10.5279 * Math.PI / 180;
+    const back = [Math.sin(photoPolar) * Math.sin(photoAzimuth), Math.cos(photoPolar), Math.sin(photoPolar) * Math.cos(photoAzimuth)];
+    // Orbit and zoom pivot on the sightline at Crain's depth.
+    const photoDistance = photoEye[0] * back[0] + photoEye[1] * back[1] + photoEye[2] * back[2];
+    const frameHeight = 2 * photoDistance * Math.tan(frameFov / 2);
+    const photoView = {
+        azimuth: photoAzimuth,
+        polar: photoPolar,
+        distance: photoDistance,
+        target: [anchor[0] + photoEye[0] - photoDistance * back[0], photoEye[1] - photoDistance * back[1], anchor[2] + photoEye[2] - photoDistance * back[2]],
+        fit: { width: frameHeight * panorama.width / panorama.height, height: frameHeight },
+    };
+    // The same camera framing what index.html frames: the drawing's viewBox, a lens shift off
+    // the panorama's centre, held to the viewport's bottom edge. The mapped buildings then
+    // stand where the drawing shows them in the skyline viewer.
+    const unit = frameHeight / panorama.height;
+    const drawingView = {
+        ...photoView,
+        label: "skyline view",
+        fit: { width: drawingFrame.width * unit, height: drawingFrame.height * unit },
+        offset: [
+            (drawingFrame.x + drawingFrame.width / 2 - panorama.x - panorama.width / 2) * unit,
+            (panorama.y + panorama.height / 2 - drawingFrame.y - drawingFrame.height / 2) * unit,
+        ],
+        align: "bottom",
+    };
+    const layout = { models, extras: [ground.group], defaultView: "skyline", ...settings, views: { skyline: photoView } };
+    const comparisonViews = {
+        top: { azimuth: 0, polar: 0, projection: "orthographic", label: "ground plan · north up", fit: planFit, target: center },
+        heights: { azimuth: 0.65, polar: 1.18, projection: "orthographic", label: "height comparison", fit: planFit, target: [center[0], 155, center[2]] },
+    };
+    // The names the comparison views show over each building.
+    const labels = geographicBuildings.map(({ id, shortName }) => ({
+        id, text: shortName,
+        placement: id === "layer3" ? "right" : id === "building-one-prudential-plaza" ? "below" : "above",
+    }));
+    return { models, ground, center, settings, layout, drawingView, comparisonViews, labels };
+}

package/lib/study-types.d.ts

@@ -0,0 +1,49 @@
+import type * as THREE from "./vendor/three-r186.js";
+import type { BuildingModel, Vec3 } from "./models/building-kit.js";
+export interface FitBox {
+    width: number;
+    height: number;
+}
+export interface PlatformOptions {
+    width: number;
+    depth: number;
+    x?: number;
+    z?: number;
+    color?: number;
+}
+export interface ShadowCameraOptions {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+    near: number;
+    far: number;
+}
+export interface StudyView {
+    azimuth: number;
+    polar: number;
+    label?: string;
+    projection?: "orthographic" | "perspective";
+    fit?: FitBox;
+    target?: Vec3;
+    distance?: number;
+    offset?: [number, number];
+    align?: "center" | "bottom";
+}
+export interface StudyLayout {
+    models?: BuildingModel[];
+    extras?: THREE.Object3D[];
+    defaultView?: string;
+    target?: Vec3;
+    fit?: FitBox;
+    platform?: PlatformOptions;
+    lightPosition?: Vec3;
+    shadowCamera?: ShadowCameraOptions;
+    clippingMargin?: number | null;
+    views?: Record<string, Partial<StudyView>>;
+}
+export interface StudyLabel {
+    id: string;
+    text: string;
+    placement?: string;
+}

package/lib/study-types.js

@@ -0,0 +1 @@
+export {};

package/lib/vendor/three-r186.d.ts

@@ -0,0 +1 @@
+export * from "three";

package/lib/vendor/three-r186.js

@@ -0,0 +1 @@
+export * from "three";

package/package.json

@@ -1,6 +1,66 @@
 {
   "name": "@a2f0/skyline",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "description": "Interactive Chicago skyline viewer and reusable Three.js building models",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/a2f0/skyline.git"
+  },
+  "publishConfig": { "access": "public" },
+  "type": "module",
+  "sideEffects": ["./site/**/*.js"],
+  "files": ["lib/", "site/", "NOTICE.md", "docs/package.md", "docs/skyline-geography.md"],
+  "main": "./lib/skyline-package.js",
+  "types": "./lib/skyline-package.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/skyline-package.d.ts",
+      "import": "./lib/skyline-package.js"
+    },
+    "./scene": {
+      "types": "./lib/skyline-scene.d.ts",
+      "import": "./lib/skyline-scene.js"
+    },
+    "./models/*": {
+      "types": "./lib/models/*.d.ts",
+      "import": "./lib/models/*.js"
+    },
+    "./build": {
+      "types": "./lib/package-assets.d.ts",
+      "import": "./lib/package-assets.js"
+    },
+    "./assets/*": "./site/*",
+    "./package.json": "./package.json"
+  },
+  "engines": { "node": ">=22" },
+  "peerDependencies": { "three": "~0.186.0" },
+  "peerDependenciesMeta": { "three": { "optional": true } },
+  "dependencies": { "@types/three": "0.186.0" },
+  "scripts": {
+    "agent-tool": "agent-tool",
+    "agents:sync": "bun run agent-tool skills install --apply",
+    "agents:check": "bun run agent-tool skills check",
+    "check": "bun scripts/check.ts",
+    "test": "bun scripts/check.ts",
+    "typecheck": "bunx --bun tsc -p tsconfig.json",
+    "build:site": "bun scripts/build-site.ts",
+    "build:package": "bun scripts/build-package.ts",
+    "check:package": "bun test tests/package.test.ts",
+    "prepack": "bun run build:package",
+    "prepublishOnly": "bun run check",
+    "fidelity": "bun scripts/fidelity-report.ts",
+    "renders": "bun scripts/render-study.ts",
+    "deploy": "scripts/deploy.sh",
+    "verify:deploy": "bun scripts/verify-deploy.ts"
+  },
+  "devDependencies": {
+    "@a2f0/agent-tool": "0.1.4",
+    "@tsconfig/strictest": "^2.0.8",
+    "@types/bun": "^1.4.2",
+    "three": "0.186.0",
+    "playwright": "1.63.0",
+    "typescript": "^7.0.2",
+    "wrangler": "4.131.2"
+  }
+}

package/site/building-detail.html

@@ -0,0 +1,54 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="noindex" />
+    <meta name="theme-color" content="#080808" />
+    <link rel="icon" href="data:," />
+    <title>Building Detail — Chicago Skyline</title>
+    <link rel="stylesheet" href="study.css" />
+    <!-- Floated over the skyline viewer, the page leaves its links to the viewer's panel. -->
+    <script>if (window.frameElement) document.documentElement.classList.add("framed");</script>
+  </head>
+  <body class="building-detail">
+    <header>
+      <div>
+        <p class="eyebrow">Chicago skyline / building detail</p>
+        <h1 id="building-name">Building detail</h1>
+        <p class="address" id="building-heights"></p>
+      </div>
+      <nav class="study-links" aria-label="Studies"><a href="skyline-study.html">Skyline study →</a><a class="back" href="index.html">← back to skyline</a></nav>
+    </header>
+    <main>
+      <div class="detail-model">
+        <div class="viewport" id="viewport">
+          <canvas id="building" tabindex="0" role="img" aria-label="Interactive 3D model of the building" aria-describedby="camera-hint"></canvas>
+          <span class="view-label" id="view-label">three-quarter view</span>
+          <p class="loading" id="loading" role="status">Preparing the building…</p>
+          <p class="hint" id="camera-hint">Drag to orbit · scroll or pinch to zoom<br />Arrow keys rotate · + / − zoom · Home resets</p>
+        </div>
+        <div class="toolbar" aria-label="Building detail controls">
+          <div class="button-group" role="group" aria-label="Camera views">
+            <button type="button" data-view="front">front</button>
+            <button type="button" data-view="quarter" aria-pressed="true">three-quarter</button>
+            <button type="button" data-view="side">side</button>
+            <button type="button" id="reset">reset view</button>
+          </div>
+          <div class="button-group" role="group" aria-label="Model display">
+            <button type="button" id="wireframe" aria-pressed="false">wireframe</button>
+            <button type="button" id="turntable" aria-pressed="false" aria-describedby="motion-status">turntable</button>
+          </div>
+        </div>
+      </div>
+      <div class="notes">
+        <p id="building-note"></p>
+        <p id="building-facts"></p>
+        <p id="motion-status" role="status">Camera moves only when you interact or start the turntable.</p>
+      </div>
+      <noscript><p>Enable JavaScript to explore the 3D model.</p></noscript>
+    </main>
+    <div class="tooltip" id="tooltip" aria-hidden="true" hidden></div>
+    <script src="study-loader.js" data-study="./building-detail.js"></script>
+  </body>
+</html>

package/site/building-detail.js

@@ -0,0 +1,84 @@
+import * as THREE from "./vendor/three-r186.js";
+import { createBuildingStudy } from "./study-viewer.js";
+import { skylineAzimuth } from "./skyline-comparison.js";
+import { geographicBuildings } from "./models/skyline-geography-data.js";
+import { createGeographicBuilding, footprintMetrics } from "./models/skyline-geography.js";
+// One mapped building of the 3D skyline, alone on its own platform, as the building study
+// shows Crain: building-detail.html?building=<id>. The skyline viewer floats it over the
+// skyline from a building's context menu.
+const id = new URLSearchParams(location.search).get("building");
+const record = geographicBuildings.find((entry) => entry.id === id);
+if (record)
+    showBuilding(record);
+else {
+    document.querySelector("#loading").textContent = "No mapped building by that name. Right-click a building on the 3D skyline to see its detail.";
+    document.querySelectorAll("button").forEach((button) => { button.disabled = true; });
+}
+function showBuilding(record) {
+    const footprint = footprintMetrics(record.footprint.coordinates);
+    // Centred on its mapped outline: ground coordinates are east and north, the scene's x and -z.
+    const model = createGeographicBuilding(record, [-footprint.center[0], footprint.center[1]]);
+    // The page names the building before the 3D view starts, so a failed start leaves it named.
+    document.title = `${record.name} — Building Detail`;
+    document.querySelector("#building-name").textContent = record.name;
+    document.querySelector("#building").setAttribute("aria-label", `Interactive 3D model of ${record.name}`);
+    const number = (n) => `${Number(n.toFixed(1))} m`;
+    const heights = document.querySelector("#building-heights");
+    // As the skyline study's table gives them.
+    const osm = record.heightSource.startsWith("https://www.openstreetmap.org/way/") ? " (OSM)" : "";
+    const source = link(record.heightSource, record.heightFromDrawing ? `${number(record.height)}, measured on the drawing` : `${number(record.height)} architectural${osm}`);
+    heights.replaceChildren(source, ...record.tipHeight !== record.height ? [` · tip ${number(record.tipHeight)}`] : []);
+    document.querySelector("#building-note").textContent = record.note;
+    const way = link(`https://www.openstreetmap.org/way/${record.footprint.way}`, `OpenStreetMap way ${record.footprint.way}`);
+    document.querySelector("#building-facts").replaceChildren(`Mapped outline ${footprint.size[0].toFixed(1)} × ${footprint.size[1].toFixed(1)} m, from `, way, `. Model: ${model.triangleCount.toLocaleString("en-US")} triangles.`);
+    const min = new THREE.Vector3(Infinity, Infinity, Infinity), max = new THREE.Vector3(-Infinity, -Infinity, -Infinity);
+    model.building.updateMatrixWorld(true);
+    model.building.traverse((child) => {
+        const mesh = child;
+        if (!mesh.isMesh)
+            return;
+        const positions = mesh.geometry.getAttribute("position"), point = new THREE.Vector3();
+        for (let i = 0; i < positions.count; i += 1) {
+            point.fromBufferAttribute(positions, i).applyMatrix4(mesh.matrixWorld);
+            min.min(point);
+            max.max(point);
+        }
+    });
+    // The platform reaches past the building on every side, and the frame holds the building
+    // and its platform from any side: its height, and its plan's diagonal.
+    const height = max.y;
+    const reach = Math.max(-min.x, max.x, -min.z, max.z);
+    const margin = Math.max(10, reach * 0.35);
+    const platform = { width: 2 * (Math.max(-min.x, max.x) + margin), depth: 2 * (Math.max(-min.z, max.z) + margin) };
+    const across = Math.hypot(platform.width, platform.depth);
+    const size = Math.max(height, across);
+    // The building study's views, turned so the front view faces the building as the skyline
+    // camera does.
+    const views = {
+        front: { azimuth: skylineAzimuth, polar: Math.PI / 2 - 0.035, label: "front view · as the skyline shows it" },
+        quarter: { azimuth: skylineAzimuth + 0.22, polar: Math.PI / 2 - 0.15, label: "three-quarter view" },
+        side: { azimuth: skylineAzimuth + Math.PI / 2, polar: Math.PI / 2 - 0.12, label: "side view" },
+    };
+    createBuildingStudy({
+        models: [model],
+        views,
+        target: [0, height * 0.48, 0],
+        fit: { height: height * 1.3 + across * 0.4, width: across * 1.2 },
+        platform,
+        lightPosition: [-0.62 * size, 1.36 * size, 0.96 * size],
+        shadowCamera: { left: -size, right: size, top: size, bottom: -size, near: 1, far: 4 * size },
+        far: 12 * size,
+        // The detail opens circling the building, which any view, drag, or the turntable
+        // button stops.
+        turntable: true,
+    });
+}
+// Sources open beside the page, so a detail floated over the skyline stays where it is.
+function link(href, text) {
+    const anchor = document.createElement("a");
+    anchor.href = href;
+    anchor.textContent = text;
+    anchor.target = "_blank";
+    anchor.rel = "noopener";
+    return anchor;
+}

package/site/building-study.html

@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="noindex" />
+    <meta name="theme-color" content="#080808" />
+    <link rel="icon" href="data:," />
+    <title>Crain Communications Building — 3D Study</title>
+    <link rel="stylesheet" href="study.css" />
+  </head>
+  <body>
+    <header>
+      <div>
+        <p class="eyebrow">Chicago skyline / building study 01</p>
+        <h1>Crain Communications Building</h1>
+        <p class="address">150 North Michigan Avenue · the diamond roof</p>
+      </div>
+      <nav class="study-links" aria-label="Studies"><a href="skyline-study.html">Skyline study →</a><a class="back" href="index.html">← back to skyline</a></nav>
+    </header>
+    <main>
+      <div class="comparison">
+        <figure class="reference">
+          <figcaption class="caption">01 / existing SVG</figcaption>
+          <img src="models/crain-reference.svg" alt="Existing grayscale illustration of the Crain Communications Building, with its diamond roof and horizontal window bands" />
+        </figure>
+        <figure>
+          <figcaption class="caption">02 / 3D study</figcaption>
+          <div class="viewport" id="viewport">
+            <canvas id="building" tabindex="0" role="img" aria-label="Interactive 3D model of the Crain Communications Building" aria-describedby="camera-hint"></canvas>
+            <span class="view-label" id="view-label">three-quarter view</span>
+            <p class="loading" id="loading" role="status">Preparing the building…</p>
+            <p class="hint" id="camera-hint">Drag to orbit · scroll or pinch to zoom<br />Arrow keys rotate · + / − zoom · Home resets</p>
+          </div>
+        </figure>
+      </div>
+      <div class="toolbar" aria-label="Building study controls">
+        <div class="button-group" role="group" aria-label="Camera views">
+          <button type="button" data-view="front">front</button>
+          <button type="button" data-view="quarter" aria-pressed="true">three-quarter</button>
+          <button type="button" data-view="side">side</button>
+          <button type="button" id="reset">reset view</button>
+        </div>
+        <div class="button-group" role="group" aria-label="Model display">
+          <button type="button" id="wireframe" aria-pressed="false">wireframe</button>
+          <button type="button" id="turntable" aria-pressed="false" aria-describedby="motion-status">turntable</button>
+        </div>
+      </div>
+      <div class="notes">
+        <p>The tower as built, from its mapped plan and the photograph the drawing was traced from: two halves split along the diagonal under one glazed diamond, the slot between its peaks, a notch at each end of the split, and white spandrels between ribbon windows. The lobby, window module, and roof grid are estimates.</p>
+        <p id="motion-status" role="status">Camera moves only when you interact or start the turntable.</p>
+      </div>
+      <noscript><p>Enable JavaScript to explore the 3D model. The existing SVG reference is shown above.</p></noscript>
+    </main>
+    <div class="tooltip" id="tooltip" aria-hidden="true" hidden></div>
+    <script src="study-loader.js" data-study="./building-study.js"></script>
+  </body>
+</html>

package/site/building-study.js

@@ -0,0 +1,3 @@
+import { createBuildingStudy } from "./study-viewer.js";
+import { createCrainBuilding } from "./models/crain-communications.js";
+createBuildingStudy({ models: [createCrainBuilding()] });