Spencer Morris
← Project index
ENGINEERING NOTES / 13 2 MIN READ

DECK/01

A modular Three.js product mockup with named assembly poses, GLB export, and headless geometry-envelope checks.

Product visualization
Screenshot of the running Three.js design tool in its docked pose, including assembly-state controls and GLB exportView full size ↗
Screenshot of the running Three.js design tool in its docked pose, including assembly-state controls and GLB export. The product remains a digital mockup, not photographed hardware.
01 / THE PROBLEM

What needed solving.

The product combines a chassis, spine, controls, display, dock and serviceable modules; a static image makes it hard to evaluate their arrangement, stowage, clearances, and relationship to the shell. A manipulable 3D scene gives a shared design-review surface.

02 / SYSTEM OUTLINE
  1. 01Dimensions + modules
  2. 02Named poses + envelope checks
  3. 03Interactive assembly + GLB

Simplified from the implementation and project notes.

03 / TECHNICAL DECISIONS

How it fits together.

The source separates dimensions, materials, geometry helpers, labels, chassis, controls, tablet, dock, spine, dashboard and pose logic. Three.js meshes and groups represent components; a browser scene provides camera interaction. The exported GLB packages the model for reuse outside the app.

A headless model sanity script rebuilds the source model, walks each named pose, and checks bounding boxes against dimension-derived expected envelopes. It also checks that the lid has a small clearance over the deck, avoids the RF mast, and remains inside the front footprint. Limits derive from the same dimension module to reduce stale copied constants.

The repo retains preview images for docked, detached, exploded, closed and detail states, making the assembly states reviewable. The checks are geometric envelope checks, not a full collision, RF, thermal, structural, or manufacturing analysis.

The pose verifier reports mesh, triangle, material and texture counts alongside assembly bounds, then checks all named states against derived expected heights and shell limits. In the closed pose it separately checks stow-pad clearance, mast clearance, and front-edge overhang, helping catch changes that a single overall bounding box would miss.

Retained browser render of the exploded product mockup.View full size ↗
Retained browser render of the exploded product mockup.
Docked configuration of the same concept model.View full size ↗
Docked configuration of the same concept model.
04 / WORKING METHOD

Building and checking it.

Review the product in the browser, switch among poses, inspect component relationships, then export a GLB for a downstream viewer. During geometry changes, run the headless pose walk to catch envelope regressions before rendering updated previews.

05 / STATUS & LIMITS

This is explicitly a mockup. Bounding boxes and selected clearance rules do not establish complete surface interference, tolerance stack, manufacturability, antenna performance, or physical fit. No hardware prototype or user study is evidenced in the repository.

Source notes

Based on repository code and project records reviewed on October 30, 2026. Historical checks are described as recorded, not rerun for this article. Screenshots, renders, and mockups are labeled individually.

  • deck-01-mockup/README.md
  • deck-01-mockup/package.json
  • deck-01-mockup/src/model/deck.js
  • deck-01-mockup/src/model/dims.js
  • deck-01-mockup/scripts/verify-model.mjs
← All projectsNEXT PROJECTChrist Church Plaza →