STL Viewer — A1 Mini Edition

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_292":293,"_294":295},"routes/_app.x.$handle.$name",{"_95":94,"_31":43,"_104":85,"_26":105,"_13":14,"_106":-5,"_11":107,"_108":109,"_110":111,"_112":113,"_114":115,"_20":-5,"_116":-5,"_117":-5,"_118":24,"_119":120,"_121":57,"_122":-5,"_123":-5,"_124":125},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_41":42,"_31":43,"_36":44,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":51,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":24},"version",102,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":20,"_34":35,"_36":37,"_38":14,"_39":40,"_23":24},"previous","deleted",false,"deletedHere","path","examples/bottleSleeve.ts","latestPath","fileId","5483138e-04a8-11f1-b56c-42dde27851f2","name","bottleSleeve.ts","fileType","content","import type { Example } from \"./types.ts\";\n\nconst bottleSleeve: Example = {\n id: \"bottleSleeve\",\n icon: \"🧴\",\n name: \"Bottle Sleeve\",\n desc: \"Drop-over sleeve for a 500ml plastic water bottle — open top & bottom\",\n size: \"70 × 70 × 140 mm\",\n time: \"~2 hrs\",\n generatorBody: `\n // Water bottle sleeve — open bottom, tapers up, open mouth at top\n // Fits standard 500ml bottle (~65mm body, ~28mm cap)\n // Wall thickness ~2mm, profile traced as cross-section for LatheGeometry\n\n const wall = 2;\n const bodyR = 34; // outer radius at bottom (68mm dia)\n const mouthR = 17; // outer radius at top opening (34mm dia, fits over cap area)\n const straightH = 80; // straight body section height\n const taperH = 55; // taper section height\n const totalH = straightH + taperH; // 135mm total\n const lipH = 5; // small rolled lip at top\n\n const pts = [];\n\n // Trace outer wall bottom-to-top, then inner wall top-to-bottom\n // OUTER wall (bottom up)\n // Small foot flare at very bottom\n pts.push(new THREE.Vector2(bodyR + 1, 0));\n pts.push(new THREE.Vector2(bodyR, 3));\n\n // Straight body section\n pts.push(new THREE.Vector2(bodyR, straightH));\n\n // Taper section — gentle curve up to mouth\n const taperSteps = 20;\n for (let i = 1; i <= taperSteps; i++) {\n const t = i / taperSteps;\n // Ease-in curve for natural taper\n const ease = t * t * (3 - 2 * t);\n const r = bodyR - (bodyR - mouthR) * ease;\n const y = straightH + t * taperH;\n pts.push(new THREE.Vector2(r, y));\n }\n\n // Lip at top (small outward roll)\n pts.push(new THREE.Vector2(mouthR + 1.5, totalH + lipH * 0.5));\n pts.push(new THREE.Vector2(mouthR + 1, totalH + lipH));\n\n // INNER wall (top down)\n pts.push(new THREE.Vector2(mouthR + 1 - wall, totalH + lipH));\n pts.push(new THREE.Vector2(mouthR - wall + 1, totalH + lipH * 0.5));\n\n // Inner taper (reverse)\n for (let i = taperSteps; i >= 1; i--) {\n const t = i / taperSteps;\n const ease = t * t * (3 - 2 * t);\n const r = (bodyR - wall) - ((bodyR - wall) - (mouthR - wall)) * ease;\n const y = straightH + t * taperH;\n pts.push(new THREE.Vector2(r, y));\n }\n\n // Inner straight section\n pts.push(new THREE.Vector2(bodyR - wall, straightH));\n pts.push(new THREE.Vector2(bodyR - wall, 3));\n pts.push(new THREE.Vector2(bodyR + 1 - wall, 0));\n\n return new THREE.LatheGeometry(pts, 48);\n `,\n};\n\nexport default bottleSleeve;\n","createdAt",["D",1770525644378],"branchVersion","branchId","d0ee3366-0301-11f1-85c1-42dde27851f2","id","d0edb300-0301-11f1-85c1-42dde27851f2","stl-viewer",["D",1770344176025],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","3D STL viewer with A1 Mini build volume","imageUrl","9319c175-2593-4f88-ba21-04f2ef7b1c28","pinnedFileId","15883b8e-0302-11f1-a451-42dde27851f2","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","d663a026-6449-42f6-9156-1d4a2d64d38c","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_95":94,"_103":99},"org",{"_95":94,"_96":97,"_98":99,"_18":53,"_100":101,"_102":24},"branch",{"_13":84,"_31":85,"_41":40,"_86":42,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":43,"_93":94},"isOwned",113,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","dcm31","handle","displayName","Charlie","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3e904faa-3764-4629-c475-f561a49b0000/square512?exp=1789552799&sig=9e2f7c6ad81bfe0a417f4ee593a56f46019d3f18deb24441c667547de12b5000","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_41":42,"_31":43,"_36":288,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":51,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":289,"_79":290,"_81":291,"_83":24},"tree",[199,207,208,209,210,211,212],"files",[199,200,201,202,203,204,205,206,207,208,209,210,211,212],"counts",{"_189":61,"_190":140,"_191":140,"_192":193,"_194":195},"contents",[126,127,128,129,130,131,132],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_41":182,"_31":183,"_29":184,"_136":-5,"_39":40,"_38":185,"_138":57,"_36":186,"_13":61,"_33":187,"_34":-5,"_23":24,"_142":-5,"_26":188},{"_41":174,"_31":175,"_29":176,"_136":-5,"_39":40,"_38":177,"_138":57,"_36":178,"_13":179,"_33":20,"_34":180,"_23":24,"_142":-5,"_26":181},{"_41":166,"_31":167,"_29":168,"_136":-5,"_39":40,"_38":169,"_138":24,"_36":170,"_13":171,"_33":20,"_34":172,"_23":24,"_142":-5,"_26":173},{"_41":159,"_31":160,"_29":161,"_136":-5,"_39":40,"_38":162,"_138":57,"_36":163,"_13":140,"_33":20,"_34":164,"_23":24,"_142":-5,"_26":165},{"_41":151,"_31":152,"_29":55,"_136":-5,"_39":40,"_38":153,"_138":57,"_36":154,"_13":155,"_33":156,"_34":157,"_23":24,"_142":-5,"_26":158},{"_41":144,"_31":145,"_29":146,"_136":-5,"_39":40,"_38":147,"_138":57,"_36":148,"_13":61,"_33":20,"_34":149,"_23":24,"_142":-5,"_26":150},{"_41":133,"_31":134,"_29":135,"_136":-5,"_39":40,"_38":137,"_138":57,"_36":139,"_13":140,"_33":20,"_34":141,"_23":24,"_142":-5,"_26":143},"981a643e-030a-11f1-b582-42dde27851f2","viewer.ts","e24a147e-0309-11f1-8ef7-42dde27851f2","parentId",71,"latest",["D",1770347946153],1,"/** Client-side Three.js viewer script (inlined into HTML) */\nimport { getExampleGeneratorJS } from \"./examples.ts\";\n\nexport function getViewerScript(): string {\n return `\n \n `;\n}\n","label",[134],"a38ed102-0309-11f1-adbb-42dde27851f2","styles.ts","a38ed210-0309-11f1-adbb-42dde27851f2",65,["D",1770347535870],"/** All CSS styles for the STL Viewer */\nexport function getStyles(): string {\n return `\n :root {\n --bg: #0a0a0f;\n --surface: #13131a;\n --surface-2: #1a1a24;\n --border: #2a2a3a;\n --text: #e8e8f0;\n --text-dim: #8888a0;\n --accent: #00d4aa;\n --accent-dim: #00d4aa33;\n --accent-2: #7c5cff;\n --warn: #ff6b4a;\n }\n * { margin: 0; padding: 0; box-sizing: border-box; }\n body {\n background: var(--bg);\n color: var(--text);\n font-family: 'DM Sans', sans-serif;\n overflow: hidden;\n height: 100vh;\n width: 100vw;\n }\n .layout {\n display: grid;\n grid-template-columns: 300px 1fr;\n grid-template-rows: 52px 1fr;\n height: 100vh;\n }\n\n /* ── Topbar ────────────────────────── */\n .topbar {\n grid-column: 1 / -1;\n background: var(--surface);\n border-bottom: 1px solid var(--border);\n display: flex;\n align-items: center;\n padding: 0 20px;\n gap: 16px;\n z-index: 10;\n }\n .topbar h1 {\n font-family: 'JetBrains Mono', monospace;\n font-size: 13px;\n font-weight: 600;\n letter-spacing: 0.5px;\n color: var(--accent);\n }\n .topbar .sep { width: 1px; height: 20px; background: var(--border); }\n .topbar .badge {\n font-family: 'JetBrains Mono', monospace;\n font-size: 10px;\n font-weight: 500;\n padding: 3px 8px;\n border-radius: 4px;\n background: var(--accent-dim);\n color: var(--accent);\n letter-spacing: 0.5px;\n }\n .topbar .right {\n margin-left: auto;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n /* ── Sidebar ──────────────────────── */\n .sidebar {\n background: var(--surface);\n border-right: 1px solid var(--border);\n overflow-y: auto;\n }\n .sidebar::-webkit-scrollbar { width: 4px; }\n .sidebar::-webkit-scrollbar-track { background: transparent; }\n .sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }\n .section-header {\n font-family: 'JetBrains Mono', monospace;\n font-size: 9px;\n font-weight: 600;\n letter-spacing: 1.5px;\n text-transform: uppercase;\n color: var(--text-dim);\n padding: 16px 16px 8px;\n }\n\n /* ── Drop Zone ────────────────────── */\n .drop-zone {\n margin: 8px 12px;\n border: 2px dashed var(--border);\n border-radius: 8px;\n padding: 20px 14px;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n }\n .drop-zone:hover, .drop-zone.dragover {\n border-color: var(--accent);\n background: var(--accent-dim);\n }\n .drop-zone .icon { font-size: 24px; margin-bottom: 6px; opacity: 0.6; }\n .drop-zone p { font-size: 11px; color: var(--text-dim); line-height: 1.4; }\n .drop-zone .formats {\n font-family: 'JetBrains Mono', monospace;\n font-size: 9px;\n color: var(--accent);\n margin-top: 4px;\n }\n\n /* ── URL input ────────────────────── */\n .url-input-group {\n margin: 0 12px 12px;\n display: flex;\n gap: 6px;\n }\n .url-input-group input {\n flex: 1;\n background: var(--bg);\n border: 1px solid var(--border);\n border-radius: 6px;\n padding: 7px 10px;\n color: var(--text);\n font-size: 11px;\n font-family: 'JetBrains Mono', monospace;\n outline: none;\n transition: border-color 0.2s;\n }\n .url-input-group input:focus { border-color: var(--accent); }\n .url-input-group input::placeholder { color: var(--text-dim); }\n\n /* ── Buttons ──────────────────────── */\n .btn {\n font-family: 'JetBrains Mono', monospace;\n font-size: 10px;\n font-weight: 500;\n padding: 7px 12px;\n border-radius: 6px;\n border: 1px solid var(--border);\n background: var(--surface-2);\n color: var(--text);\n cursor: pointer;\n transition: all 0.15s;\n white-space: nowrap;\n }\n .btn:hover { background: var(--border); }\n .btn.primary {\n background: var(--accent);\n color: var(--bg);\n border-color: var(--accent);\n font-weight: 600;\n }\n .btn.primary:hover { filter: brightness(1.15); }\n\n /* ── Example cards ────────────────── */\n .example-card {\n margin: 5px 12px;\n padding: 12px 14px;\n background: var(--bg);\n border: 1px solid var(--border);\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s;\n }\n .example-card:hover {\n border-color: var(--accent);\n background: var(--surface-2);\n }\n .example-card .name { font-weight: 600; font-size: 12px; margin-bottom: 3px; }\n .example-card .desc { font-size: 10px; color: var(--text-dim); margin-bottom: 6px; }\n .example-card .meta {\n display: flex;\n gap: 10px;\n font-family: 'JetBrains Mono', monospace;\n font-size: 9px;\n color: var(--text-dim);\n }\n .example-card .meta span { display: flex; align-items: center; gap: 4px; }\n .example-card .meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }\n\n /* ── Model info panel ─────────────── */\n #modelInfo {\n margin: 12px;\n padding: 12px 14px;\n background: var(--bg);\n border: 1px solid var(--border);\n border-radius: 8px;\n display: none;\n }\n #modelInfo.visible { display: block; }\n #modelInfo h3 { font-size: 12px; font-weight: 600; margin-bottom: 8px; color: var(--accent); }\n .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }\n .stat { font-family: 'JetBrains Mono', monospace; font-size: 9px; }\n .stat .label { color: var(--text-dim); margin-bottom: 1px; }\n .stat .value { color: var(--text); font-weight: 500; }\n .stat .value.warn { color: var(--warn); }\n .stat .value.ok { color: var(--accent); }\n\n /* ── Display controls ─────────────── */\n .controls-section { margin: 12px; }\n .control-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 6px 0;\n border-bottom: 1px solid var(--border);\n }\n .control-row:last-child { border-bottom: none; }\n .control-row label { font-size: 11px; color: var(--text-dim); }\n .toggle {\n width: 34px; height: 18px; border-radius: 9px;\n background: var(--border); cursor: pointer;\n position: relative; transition: background 0.2s;\n }\n .toggle.on { background: var(--accent); }\n .toggle::after {\n content: ''; position: absolute; top: 2px; left: 2px;\n width: 14px; height: 14px; border-radius: 50%;\n background: white; transition: transform 0.2s;\n }\n .toggle.on::after { transform: translateX(16px); }\n\n /* ── 3D Viewport ──────────────────── */\n .viewport { position: relative; overflow: hidden; background: var(--bg); }\n #canvas3d { width: 100%; height: 100%; display: block; }\n .viewport-overlay {\n position: absolute; bottom: 12px; left: 12px;\n font-family: 'JetBrains Mono', monospace;\n font-size: 9px; color: var(--text-dim);\n pointer-events: none; opacity: 0.7;\n }\n .axis-hint { display: flex; gap: 10px; margin-top: 3px; }\n .axis-hint span { display: flex; align-items: center; gap: 3px; }\n .axis-hint .x { color: #ff4466; }\n .axis-hint .y { color: #44ff66; }\n .axis-hint .z { color: #4488ff; }\n\n /* ── Loading / Empty states ────────── */\n .loading-overlay {\n position: absolute; inset: 0; display: none;\n align-items: center; justify-content: center;\n background: var(--bg); z-index: 5;\n }\n .loading-overlay.visible { display: flex; }\n .spinner {\n width: 36px; height: 36px;\n border: 3px solid var(--border);\n border-top-color: var(--accent);\n border-radius: 50%;\n animation: spin 0.8s linear infinite;\n }\n @keyframes spin { to { transform: rotate(360deg); } }\n .empty-state {\n position: absolute; inset: 0; display: flex;\n flex-direction: column; align-items: center;\n justify-content: center; pointer-events: none;\n }\n .empty-state .cube { width: 70px; height: 70px; margin-bottom: 16px; opacity: 0.12; }\n .empty-state p { font-size: 13px; color: var(--text-dim); }\n .empty-state .sub { font-size: 11px; margin-top: 4px; color: #444; }\n\n /* ── Full-screen drop overlay ─────── */\n .fullscreen-drop {\n position: fixed; inset: 0; z-index: 100;\n background: rgba(0,212,170,0.06);\n border: 3px dashed var(--accent);\n display: none;\n align-items: center; justify-content: center;\n pointer-events: none;\n }\n .fullscreen-drop.visible { display: flex; }\n .fullscreen-drop .drop-msg {\n background: var(--surface);\n border: 1px solid var(--accent);\n border-radius: 12px;\n padding: 24px 36px;\n text-align: center;\n }\n .fullscreen-drop .drop-msg .icon { font-size: 36px; margin-bottom: 8px; }\n .fullscreen-drop .drop-msg p {\n font-family: 'JetBrains Mono', monospace;\n font-size: 13px; color: var(--accent);\n }\n\n /* ── Mobile FAB ────────────────────── */\n .mobile-fab {\n display: none;\n position: fixed;\n bottom: 24px; right: 24px;\n z-index: 50;\n width: 56px; height: 56px;\n border-radius: 50%;\n background: var(--accent);\n border: none;\n color: var(--bg);\n font-size: 24px;\n cursor: pointer;\n box-shadow: 0 4px 20px rgba(0,212,170,0.35);\n transition: transform 0.2s, box-shadow 0.2s;\n -webkit-tap-highlight-color: transparent;\n }\n .mobile-fab:active { transform: scale(0.92); }\n .mobile-fab.has-model { bottom: 80px; }\n\n /* ── Mobile bottom sheet ───────────── */\n .bottom-sheet-backdrop {\n display: none;\n position: fixed; inset: 0;\n background: rgba(0,0,0,0.5);\n z-index: 60;\n opacity: 0;\n transition: opacity 0.25s;\n }\n .bottom-sheet-backdrop.visible { display: block; opacity: 1; }\n .bottom-sheet {\n position: fixed;\n bottom: 0; left: 0; right: 0;\n z-index: 70;\n background: var(--surface);\n border-radius: 16px 16px 0 0;\n max-height: 75vh;\n overflow-y: auto;\n transform: translateY(100%);\n transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);\n -webkit-overflow-scrolling: touch;\n }\n .bottom-sheet.visible { transform: translateY(0); }\n .bottom-sheet .handle-bar {\n width: 36px; height: 4px;\n background: var(--border);\n border-radius: 2px;\n margin: 10px auto 4px;\n }\n .bottom-sheet .sheet-content { padding: 8px 0 env(safe-area-inset-bottom, 16px); }\n\n /* ── Mobile toolbar ────────────────── */\n .mobile-toolbar {\n display: none;\n position: fixed;\n bottom: 0; left: 0; right: 0;\n z-index: 40;\n background: var(--surface);\n border-top: 1px solid var(--border);\n padding: 8px 12px env(safe-area-inset-bottom, 8px);\n gap: 8px;\n }\n .mobile-toolbar .btn { flex: 1; text-align: center; padding: 10px 8px; font-size: 11px; }\n\n /* ── Mobile responsive ─────────────── */\n @media (max-width: 768px) {\n .layout {\n grid-template-columns: 1fr;\n grid-template-rows: 52px 1fr;\n }\n .sidebar { display: none; }\n .topbar .badge { display: none; }\n .topbar .right .btn { font-size: 9px; padding: 6px 8px; }\n .mobile-fab { display: flex; align-items: center; justify-content: center; }\n .mobile-toolbar { display: flex; }\n .viewport-overlay { bottom: 68px; }\n }\n `;\n}\n",[145],"e7838592-0309-11f1-a6ec-42dde27851f2","main.ts",68,["D",1770347649878],40,"http","import { getStyles } from \"./styles.ts\";\nimport { getLayout } from \"./layout.ts\";\nimport { getViewerScript } from \"./viewer.ts\";\n\nexport default async function(req: Request): Promise {\n return new Response(page(), {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n}\n\nfunction page(): string {\n return `\n\n\n \n \n STL Viewer — A1 Mini Edition\n \n \n\n\n ${getLayout()}\n ${getViewerScript()}\n\n`;\n}\n",[152],"751fc942-030a-11f1-8aca-42dde27851f2","layout.ts","b524d862-0309-11f1-855b-42dde27851f2",70,["D",1770347887454],"/** HTML markup for the STL Viewer layout */\nimport { EXAMPLES, type Example } from \"./examples.ts\";\n\nfunction exampleCard(ex: Example): string {\n return `\n

${ex.icon} ${ex.name}

${ex.desc}

${ex.size}${ex.time}

`;\n}\n\nfunction sidebarContent(): string {\n return `\n

Load Model

📦

Drop STL file here or click to browse

.stl

\n \n

\n \n \n

Examples (A1 Mini Ready)

\n ${EXAMPLES.map(exampleCard).join(\"\")}\n

Model Analysis

DIMENSIONS

—

FITS A1 MINI

—

TRIANGLES

—

EST. VOLUME

—

Display

Build volume

Grid floor

Wireframe

Auto-rotate

`;\n}\n\nexport function getLayout(): string {\n return `\n

\n \n \n\n \n \n\n \n

\n \n

Load an STL to preview

Drag & drop, paste URL, or try an example

Scroll to zoom · Drag to rotate · Shift+drag to pan

\n — X\n — Y\n — Z\n

\n\n \n

📦

Drop STL file to load

\n\n \n \n\n \n

\n ${sidebarContent()}\n

\n\n \n `;\n}\n",[160],"4389e1a6-0364-11f1-8811-42dde27851f2","examples.ts","65af5608-030a-11f1-9c29-42dde27851f2",100,["D",1770386458944],7,"/**\n * Barrel file — re-exports all examples from individual files.\n *\n * To add a new example: create examples/yourModel.ts, then add one import + array entry here.\n * To edit one: change only its file in examples/.\n * Nothing else in the codebase needs to change.\n */\n\nexport type { Example } from \"./examples/types.ts\";\nimport type { Example } from \"./examples/types.ts\";\n\nimport vase from \"./examples/vase.ts\";\nimport gear from \"./examples/gear.ts\";\nimport castle from \"./examples/castle.ts\";\nimport kratky from \"./examples/kratky.ts\";\nimport duck from \"./examples/duck.ts\";\n\nexport const EXAMPLES: Example[] = [vase, gear, castle, kratky, duck];\n\n/**\n * Returns the client-side JS for the genExample(name) function,\n * built dynamically from the EXAMPLES array.\n */\nexport function getExampleGeneratorJS(): string {\n const cases = EXAMPLES.map(\n (ex) => `case '${ex.id}': {\\n${ex.generatorBody}\\n}`,\n ).join(\"\\n \");\n\n return `\n function genExample(name) {\n switch (name) {\n ${cases}\n default: return new THREE.BoxGeometry(50, 50, 50);\n }\n }`;\n}\n",[167],"46397d3a-0364-11f1-8811-42dde27851f2","README.md","ed7e7d54-0362-11f1-976a-42dde27851f2",101,["D",1770386463485],3,"# STL Viewer\n\nA web-based 3D model viewer and generator for creating printable STL files directly in your browser.\n\n## Demo Video\n\nhttps://www.val.town/x/dcm31/stl-viewer/code/README.md\n\n[Watch the demo on Loom](https://www.loom.com/share/ac0933b3cb8f4c56b32b065d75fd36af)\n\n## Features\n\n- 🎨 Generate 3D models procedurally using Three.js\n- 👁️ Interactive 3D viewer with orbit controls\n- 💾 Export models as STL files for 3D printing\n- 📦 Pre-built examples: Vase, Gear, Castle, Kratky, and Duck\n\n## Usage\n\nVisit the live viewer and select from the example gallery to view and download pre-built models.\n\n### Want to Create Your Own Models?\n\n**You'll need to remix this val first!** Click the \"Remix\" button at the top of the Val Town editor to create your own copy that you can edit.\n\n## Adding New Examples\n\nOnce you've remixed this val:\n\n1. Create a new file in `examples/yourModel.ts`\n2. Define your model following the `Example` interface\n3. Add the import and array entry in `examples.ts`\n\nThat's it! The viewer will automatically pick up your new model.",[175],"3cadb064-030b-11f1-b561-42dde27851f2","examples","3cadb12c-030b-11f1-b561-42dde27851f2",73,["D",1770348222247],"directory",[183],"pulls","branches","forks","envVars",{"_196":61,"_198":61},"connections",{"_196":61,"_197":61},"count","unfilledCount","emptyCount",{"_41":182,"_31":183,"_29":184,"_136":-5,"_39":40,"_38":185,"_138":57,"_36":285,"_13":61,"_33":187,"_34":-5,"_23":24,"_142":-5,"_214":286,"_26":287},{"_41":281,"_31":32,"_29":30,"_136":184,"_39":40,"_38":14,"_138":57,"_36":282,"_13":61,"_33":20,"_34":35,"_23":24,"_142":-5,"_214":283,"_26":284},{"_41":273,"_31":274,"_29":275,"_136":184,"_39":40,"_38":276,"_138":57,"_36":277,"_13":61,"_33":20,"_34":278,"_23":24,"_142":-5,"_214":279,"_26":280},{"_41":265,"_31":266,"_29":267,"_136":184,"_39":40,"_38":268,"_138":57,"_36":269,"_13":61,"_33":20,"_34":270,"_23":24,"_142":-5,"_214":271,"_26":272},{"_41":257,"_31":258,"_29":259,"_136":184,"_39":40,"_38":260,"_138":57,"_36":261,"_13":61,"_33":20,"_34":262,"_23":24,"_142":-5,"_214":263,"_26":264},{"_41":248,"_31":249,"_29":250,"_136":184,"_39":40,"_38":251,"_138":57,"_36":252,"_13":253,"_33":20,"_34":254,"_23":24,"_142":-5,"_214":255,"_26":256},{"_41":240,"_31":241,"_29":242,"_136":184,"_39":40,"_38":243,"_138":57,"_36":244,"_13":61,"_33":20,"_34":245,"_23":24,"_142":-5,"_214":246,"_26":247},{"_41":232,"_31":233,"_29":234,"_136":184,"_39":40,"_38":235,"_138":57,"_36":236,"_13":61,"_33":20,"_34":237,"_23":24,"_142":-5,"_214":238,"_26":239},{"_41":174,"_31":175,"_29":176,"_136":-5,"_39":40,"_38":177,"_138":57,"_36":229,"_13":179,"_33":20,"_34":180,"_23":24,"_142":-5,"_214":230,"_26":231},{"_41":166,"_31":167,"_29":168,"_136":-5,"_39":40,"_38":169,"_138":24,"_36":226,"_13":171,"_33":20,"_34":172,"_23":24,"_142":-5,"_214":227,"_26":228},{"_41":159,"_31":160,"_29":161,"_136":-5,"_39":40,"_38":162,"_138":57,"_36":223,"_13":140,"_33":20,"_34":164,"_23":24,"_142":-5,"_214":224,"_26":225},{"_41":151,"_31":152,"_29":55,"_136":-5,"_39":40,"_38":153,"_138":57,"_36":220,"_13":155,"_33":156,"_34":157,"_23":24,"_142":-5,"_214":221,"_26":222},{"_41":144,"_31":145,"_29":146,"_136":-5,"_39":40,"_38":147,"_138":57,"_36":217,"_13":61,"_33":20,"_34":149,"_23":24,"_142":-5,"_214":218,"_26":219},{"_41":133,"_31":134,"_29":135,"_136":-5,"_39":40,"_38":137,"_138":57,"_36":213,"_13":140,"_33":20,"_34":141,"_23":24,"_142":-5,"_214":215,"_26":216},["D",1770347946153],"children",[],[134],["D",1770347535870],[],[145],["D",1770347649878],[],[152],["D",1770347887454],[],[160],["D",1770386458944],[],[167],["D",1770386463485],[],[175],"4c157744-030b-11f1-8601-42dde27851f2","vase.ts","4c15780c-030b-11f1-8601-42dde27851f2",76,["D",1770348248113],"import type { Example } from \"./types.ts\";\n\nconst vase: Example = {\n id: \"vase\",\n icon: \"🏺\",\n name: \"Spiral Vase\",\n desc: \"Low-poly spiral vase — vase mode ready\",\n size: \"80 × 80 × 120 mm\",\n time: \"~1.5 hrs\",\n generatorBody: `\n const pts = [];\n for (let i = 0; i <= 50; i++) {\n const t = i / 50;\n pts.push(new THREE.Vector2(\n 25 + Math.sin(t * Math.PI * 5) * 6 + t * 15,\n t * 120\n ));\n }\n pts.push(new THREE.Vector2(42, 120));\n pts.push(new THREE.Vector2(44, 118));\n return new THREE.LatheGeometry(pts, 48);\n `,\n};\n\nexport default vase;\n",[],[183,233],"419092ea-030b-11f1-aa59-42dde27851f2","types.ts","4190939e-030b-11f1-aa59-42dde27851f2",74,["D",1770348230464],"/** Shared interface for all example models */\nexport interface Example {\n /** Unique ID used for onclick routing */\n id: string;\n /** HTML entity icon for the card */\n icon: string;\n /** Display name */\n name: string;\n /** Short HTML description */\n desc: string;\n /** Dimension string shown on card */\n size: string;\n /** Estimated print time */\n time: string;\n /** JS function body — must return a THREE.BufferGeometry.\n * Runs client-side with THREE in scope plus helpers:\n * mergeGeos(geos[]), makeBox(w,h,d,x,y,z),\n * makeCyl(r,h,segs,x,y,z), makeCone(r,h,segs,x,y,z) */\n generatorBody: string;\n}\n",[],[183,241],"a8e07990-030d-11f1-834b-42dde27851f2","kratky.ts","95a8019c-030b-11f1-a80a-42dde27851f2",90,["D",1770349262786],6,"import type { Example } from \"./types.ts\";\n\n/**\n * Kratky Hydroponic Planter — v4 (LatheGeometry approach)\n *\n * Each rotationally-symmetric part uses LatheGeometry with a clean\n * cross-section profile. This gives correct normals, no z-fighting,\n * and no ExtrudeGeometry winding issues.\n *\n * Components:\n * 1. Reservoir bucket (single LatheGeometry)\n * 2. Lid ring (single LatheGeometry)\n * 3. Net pot basket (single LatheGeometry)\n * 4. Fill port, water level indicator, handles (simple primitives)\n */\nconst kratky: Example = {\n id: \"planter\",\n icon: \"🌿\",\n name: \"Kratky Hydroponic Planter\",\n desc: \"Functional deep water culture setup — max build volume\",\n size: \"160 × 160 × 170 mm\",\n time: \"~8 hrs\",\n generatorBody: `\n const S = 64;\n const V2 = (x, y) => new THREE.Vector2(x, y);\n const parts = [];\n\n // ═══════════════════════════════════════════\n // 1. RESERVOIR — tapered bucket\n // ═══════════════════════════════════════════\n // Cross-section profile (right half, revolved around Y axis)\n //\n // rTopO rTopI\n // rim ─┐ ┌─ rim inner\n // │ │\n // outer │ │ inner wall\n // wall │ │\n // │ │\n // bot ─┘──────┘─ bot inner\n // rBotO rBotI\n //\n const wall = 3;\n const rBotO = 65, rTopO = 78;\n const rBotI = rBotO - wall, rTopI = rTopO - wall;\n const resH = 112;\n const rimW = 3, rimH = 4;\n\n const resProfile = [\n // Start at inner bottom center, trace clockwise\n V2(2, wall), // near-center inner bottom (avoid axis)\n V2(rBotI, wall), // inner wall base\n V2(rTopI, resH), // inner wall top\n V2(rTopI, resH + rimH), // inner rim top\n V2(rTopO + rimW, resH + rimH), // outer rim top (overhang)\n V2(rTopO + rimW, resH), // outer rim bottom\n V2(rTopO, resH), // outer wall top\n V2(rBotO, 0), // outer wall base\n V2(2, 0), // near-center outer bottom\n ];\n parts.push(new THREE.LatheGeometry(resProfile, S));\n\n // Foot ring for stability\n const footProfile = [\n V2(rBotO - 5, 0),\n V2(rBotO - 5, -3),\n V2(rBotO + 3, -3),\n V2(rBotO + 3, 0),\n ];\n parts.push(new THREE.LatheGeometry(footProfile, S));\n\n // Decorative ridges (3 torus rings on outer wall)\n for (let i = 0; i < 3; i++) {\n const ry = 22 + i * 28;\n const t = ry / resH;\n const rAtY = rBotO + (rTopO - rBotO) * t;\n const ridge = new THREE.TorusGeometry(rAtY + 1.5, 1.5, 8, S);\n ridge.rotateX(Math.PI / 2);\n ridge.translate(0, ry, 0);\n parts.push(ridge);\n }\n\n // ═══════════════════════════════════════════\n // 2. LID — flat ring with center hole + inner lip\n // ═══════════════════════════════════════════\n const lidGap = 2;\n const lidY = resH + rimH + lidGap;\n const lidH = 6;\n const netHoleR = 35;\n const lipDrop = 8;\n\n // Profile: ring from net-pot hole to outer edge, with lip\n //\n // lip drops inside reservoir:\n // ┌──────────────────┐ lid top surface\n // hole │ │ outer edge\n // edge └──┐ ┌──┘\n // │ inner │\n // │ lip │ (nothing here, just outer drops)\n // └───────────┘\n //\n const lidProfile = [\n V2(netHoleR, lidY + lidH), // top surface, hole edge\n V2(rTopO + 2, lidY + lidH), // top surface, outer edge\n V2(rTopO + 2, lidY), // outer edge bottom\n V2(rTopI + 1, lidY), // inner lip outer\n V2(rTopI + 1, lidY - lipDrop), // lip drops down\n V2(rTopI - 2, lidY - lipDrop), // lip inner wall\n V2(rTopI - 2, lidY), // lip inner wall top\n V2(netHoleR, lidY), // bottom surface, hole edge\n ];\n parts.push(new THREE.LatheGeometry(lidProfile, S));\n\n // ═══════════════════════════════════════════\n // 3. NET POT COLLAR — raised ring around the hole\n // ═══════════════════════════════════════════\n const collarH = 10;\n const collarW = 4;\n const collarY = lidY + lidH;\n\n const collarProfile = [\n V2(netHoleR, collarY),\n V2(netHoleR, collarY + collarH),\n V2(netHoleR + collarW, collarY + collarH + 2), // lip overhang\n V2(netHoleR + collarW, collarY + collarH),\n V2(netHoleR + collarW, collarY),\n ];\n parts.push(new THREE.LatheGeometry(collarProfile, S));\n\n // ═══════════════════════════════════════════\n // 4. NET POT — basket that hangs into reservoir\n // ═══════════════════════════════════════════\n const npTopR = netHoleR - 1;\n const npBotR = npTopR - 8;\n const npH = 52;\n const npWall = 2.5;\n const npY = lidY - npH + 8; // hangs below lid\n const drainR = 7;\n\n // Profile: basket cross-section with flange at top\n const npProfile = [\n // Drain hole edge at bottom, then trace walls up\n V2(drainR, npY + npWall), // inner bottom, drain edge\n V2(npBotR - npWall, npY + npWall), // inner bottom meets inner wall\n V2(npTopR - npWall, npY + npH), // inner wall top\n // Flange (rests on collar)\n V2(netHoleR + collarW - 1, npY + npH),\n V2(netHoleR + collarW - 1, npY + npH + 3),\n V2(npTopR - npWall - 1, npY + npH + 3),\n V2(npTopR - npWall - 1, npY + npH),\n // Back down outer wall\n V2(npTopR, npY + npH), // outer wall top\n V2(npBotR, npY), // outer wall bottom\n V2(drainR, npY), // outer bottom, drain edge\n ];\n parts.push(new THREE.LatheGeometry(npProfile, S));\n\n // Drainage slot indicators — small torus rings around pot\n for (let row = 0; row < 4; row++) {\n const sy = npY + 8 + row * 11;\n const t = (sy - npY) / npH;\n const sr = npBotR + (npTopR - npBotR) * t;\n const slot = new THREE.TorusGeometry(sr + 0.5, 0.7, 6, S);\n slot.rotateX(Math.PI / 2);\n slot.translate(0, sy, 0);\n parts.push(slot);\n }\n\n // ═══════════════════════════════════════════\n // 5. FILL PORT — offset tube on lid\n // ═══════════════════════════════════════════\n const fpR = 10, fpH = 18;\n const fpAngle = Math.PI * 0.3;\n const fpDist = (rTopO + netHoleR + collarW) / 2;\n const fpX = Math.cos(fpAngle) * fpDist;\n const fpZ = Math.sin(fpAngle) * fpDist;\n const fpBaseY = lidY + lidH;\n\n // Tube (solid cylinder, represents port)\n const fpOuter = new THREE.CylinderGeometry(fpR, fpR, fpH, 24);\n fpOuter.translate(fpX, fpBaseY + fpH / 2, fpZ);\n parts.push(fpOuter);\n\n // Port rim bead\n const fpRim = new THREE.TorusGeometry(fpR, 1.5, 8, 24);\n fpRim.rotateX(Math.PI / 2);\n fpRim.translate(fpX, fpBaseY + fpH, fpZ);\n parts.push(fpRim);\n\n // ═══════════════════════════════════════════\n // 6. WATER LEVEL INDICATOR\n // ═══════════════════════════════════════════\n const wlY = 15, wlH = 55;\n const wlMidH = wlY + wlH / 2;\n const wlR = rBotO + (rTopO - rBotO) * (wlMidH / resH);\n\n // Raised channel strip\n parts.push(makeBox(7, wlH, 3, wlR + 2, wlMidH, 0));\n\n // MIN/MAX marks + ticks\n for (let i = 0; i <= 4; i++) {\n const ty = wlY + 3 + i * ((wlH - 6) / 4);\n const tr = rBotO + (rTopO - rBotO) * (ty / resH);\n const w = (i === 0 || i === 4) ? 14 : 10;\n const th = (i === 0 || i === 4) ? 1.5 : 0.8;\n parts.push(makeBox(w, th, 3.5, tr + 2, ty, 0));\n }\n\n // ═══════════════════════════════════════════\n // 7. HANDLES — ear nubs on sides\n // ═══════════════════════════════════════════\n const hY = resH * 0.6;\n for (const side of [1, -1]) {\n const hR = rBotO + (rTopO - rBotO) * (hY / resH);\n const handle = new THREE.TorusGeometry(9, 3.5, 8, 16, Math.PI);\n handle.rotateY(Math.PI / 2);\n handle.rotateZ(Math.PI / 2);\n handle.translate(0, hY, side * (hR + 6));\n parts.push(handle);\n }\n\n return mergeGeos(parts);\n `,\n};\n\nexport default kratky;\n",[],[183,249],"522e778e-030b-11f1-8dfb-42dde27851f2","gear.ts","522e7842-030b-11f1-8dfb-42dde27851f2",78,["D",1770348258342],"import type { Example } from \"./types.ts\";\n\nconst gear: Example = {\n id: \"gear\",\n icon: \"⚙️\",\n name: \"Herringbone Gear\",\n desc: \"Mechanical test piece with fine teeth\",\n size: \"60 × 60 × 20 mm\",\n time: \"~25 min\",\n generatorBody: `\n const R = 28, r = 22, T = 20, H = 20;\n const s = new THREE.Shape();\n for (let i = 0; i < T; i++) {\n const a1 = (i / T) * Math.PI * 2;\n const a2 = ((i + 0.25) / T) * Math.PI * 2;\n const a3 = ((i + 0.5) / T) * Math.PI * 2;\n const a4 = ((i + 0.75) / T) * Math.PI * 2;\n if (!i) s.moveTo(Math.cos(a1) * r, Math.sin(a1) * r);\n else s.lineTo(Math.cos(a1) * r, Math.sin(a1) * r);\n s.lineTo(Math.cos(a2) * R, Math.sin(a2) * R);\n s.lineTo(Math.cos(a3) * R, Math.sin(a3) * R);\n s.lineTo(Math.cos(a4) * r, Math.sin(a4) * r);\n }\n s.closePath();\n const hole = new THREE.Path();\n for (let i = 0; i <= 32; i++) {\n const a = (i / 32) * Math.PI * 2;\n if (!i) hole.moveTo(Math.cos(a) * 8, Math.sin(a) * 8);\n else hole.lineTo(Math.cos(a) * 8, Math.sin(a) * 8);\n }\n s.holes.push(hole);\n const g = new THREE.ExtrudeGeometry(s, { depth: H, bevelEnabled: false });\n g.rotateX(-Math.PI / 2);\n return g;\n `,\n};\n\nexport default gear;\n",[],[183,258],"3af773da-035c-11f1-bb73-42dde27851f2","duck.ts","3af774ac-035c-11f1-bb73-42dde27851f2",93,["D",1770383008628],"import type { Example } from \"./types.ts\";\n\nconst duck: Example = {\n id: \"duck\",\n icon: \"🦆\",\n name: \"Rubber Duck\",\n desc: \"A cute little rubber duck — quack!\",\n size: \"50 × 40 × 45 mm\",\n time: \"~40 min\",\n generatorBody: `\n const geos = [];\n\n // --- Body (squished sphere) ---\n const body = new THREE.SphereGeometry(20, 32, 24);\n body.scale(1.1, 0.85, 1.0);\n body.translate(0, 14, 0);\n geos.push(body);\n\n // --- Head (smaller sphere, tilted forward) ---\n const head = new THREE.SphereGeometry(12, 32, 24);\n head.translate(0, 34, 10);\n geos.push(head);\n\n // --- Beak (cone pointing forward) ---\n const beak = new THREE.ConeGeometry(4, 10, 16);\n beak.rotateX(Math.PI / 2);\n beak.translate(0, 32, 24);\n geos.push(beak);\n\n // --- Eyes (little bumps) ---\n for (let side = -1; side <= 1; side += 2) {\n const eye = new THREE.SphereGeometry(2.2, 12, 12);\n eye.translate(side * 7, 38, 15);\n geos.push(eye);\n }\n\n // --- Flat bottom so it sits nicely ---\n const base = makeCyl(14, 3, 32, 0, 1.5, 0);\n geos.push(base);\n\n // --- Tail (little upward nub) ---\n const tail = new THREE.SphereGeometry(5, 12, 12);\n tail.scale(0.6, 1.2, 0.8);\n tail.translate(0, 22, -20);\n geos.push(tail);\n\n // --- Wings (flattened spheres on each side) ---\n for (let side = -1; side <= 1; side += 2) {\n const wing = new THREE.SphereGeometry(8, 16, 12);\n wing.scale(0.35, 0.7, 1.0);\n wing.rotateZ(side * 0.3);\n wing.translate(side * 18, 16, -2);\n geos.push(wing);\n }\n\n return mergeGeos(geos);\n `,\n};\n\nexport default duck;\n",[],[183,266],"57b6b356-030b-11f1-ba69-42dde27851f2","castle.ts","57b6b43c-030b-11f1-ba69-42dde27851f2",79,["D",1770348267623],"import type { Example } from \"./types.ts\";\n\nconst castle: Example = {\n id: \"castle\",\n icon: \"🏰\",\n name: \"Mini Castle\",\n desc: \"Tabletop terrain with turrets & walls\",\n size: \"100 × 100 × 80 mm\",\n time: \"~3 hrs\",\n generatorBody: `\n const p = [makeBox(100, 40, 100, 0, 20, 0)];\n for (const [tx, tz] of [[-42,-42],[42,-42],[-42,42],[42,42]]) {\n p.push(makeCyl(10, 60, 12, tx, 30, tz));\n p.push(makeCone(14, 20, 12, tx, 70, tz));\n }\n p.push(makeBox(20, 30, 8, 0, 15, 54));\n p.push(makeBox(30, 60, 30, 0, 30, 0));\n p.push(makeCone(22, 25, 8, 0, 72, 0));\n for (let i = -40; i <= 40; i += 12) {\n p.push(makeBox(6, 8, 6, i, 44, -47));\n p.push(makeBox(6, 8, 6, i, 44, 47));\n p.push(makeBox(6, 8, 6, -47, 44, i));\n p.push(makeBox(6, 8, 6, 47, 44, i));\n }\n return mergeGeos(p);\n `,\n};\n\nexport default castle;\n",[],[183,274],"548312f8-04a8-11f1-b56c-42dde27851f2",["D",1770525644378],[],[183,32],["D",1770348222247],[200,201,202,203,204,205,206],[183],["D",1770344176025],{"_95":94,"_103":99},{"_95":94,"_96":97,"_98":99,"_18":53,"_100":101,"_102":24},{"_13":84,"_31":85,"_41":40,"_86":42,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":43,"_93":94},"ctx",{"_77":-5,"_123":325,"_326":327,"_328":329,"_330":24,"_331":24,"_332":24,"_333":57,"_334":-5,"_335":-7,"_336":-7,"_337":61,"_338":24,"_339":24,"_340":-5,"_341":24,"_342":24,"_343":24,"_344":-5},"ENV",{"_296":297,"_298":299,"_300":85,"_301":302,"_303":304,"_305":306,"_307":308,"_309":310,"_311":312,"_313":314,"_315":316,"_317":318,"_319":320,"_321":322,"_323":324},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Model Analysis

◆ STL VIEWER

Diff · v102