Breakboard builds interactive Three.js teardowns from manufacturer drawings

• Breakboard combines three illustration skills with manufacturer drawings and CAD to make interactive Three.js teardowns, according to hckmstrrahul.
• The collection runs offline as standalone HTML in WebGL 2 browsers, as the launch post explains.
• The workflow is open source: hckmstrrahul shared the repository, then described it as reusable for other devices in a follow-up.

The live collection is a hardware nerd's toy cabinet, from a Nikon FM3A shutter to magnetic core memory. Even the NE555 timer's interior has provenance: the attribution notes credit a real die photograph to Mikhail Svarichevsky / ZeptoBars.

Breakboard's README lists 65 interactive devices, built with Three.js, vanilla JavaScript and Vite. The viewer offers:

• Assembly controls: Assembled and Exploded states, plus a Separation slider.
• Component inspection: Selecting a part reveals details and fades its surroundings; Isolate, Labels and X-ray expose more structure.
• Motion and camera controls: Device animations, a rotating turntable, and 3D, Top and Front views.
• Image export: PNG output from the device viewer.

The build combined three distinct skills with custom refinements for accuracy, according to hckmstrrahul's launch post:

1. Jakub Krehel's /teardown: Technical illustrations explaining physical objects and how their parts work together. Published in jakubkrehel/skills.
2. wheresryan22's /anatomy: Detailed, interactive isometric illustrations of machines and complex systems. Published in wheresryan22/anatomy.
3. Elvar's /teardown: Exploded views and component-level technical illustration guidance. Published in elvarofficial/teardown.

hckmstrrahul also describes the repository itself as a skill that can recreate other devices accurately.

The project's accuracy notes draw more specific boundaries:

• Sources: Models use documented hardware revisions, manufacturer drawings, CAD and photographs where available. Each device's Model notes records sources and reconstruction limits.
• Unpublished internals: Hidden chip layouts, MEMS structures and other undocumented interiors are identified as representative cutaways.
• Purpose: Exploded views explain construction; animations illustrate operating principles. Physical disassembly instructions and circuit or engineering simulation are outside their scope.

The standalone build packs all 65 devices into a 38.28 MB HTML file, according to the README. Models, fonts, controls and image export are bundled, so it opens directly in a WebGL 2 browser without a server or internet connection.

For the source project, npm run build produces a static dist/ folder and the shareable dist/breakboard.html file.

The compilation was rendered from the actual interactive models in native 4K, at 16:9 and 30 fps, according to its published description. Its soundtrack, “Objects in Motion,” is an original procedural score using synthesized instruments and no external recordings.

In a follow-up to the Breakboard post, hckmstrrahul shared a small drawing bot that makes a doodle for each visitor based on their location.