Alp DemirelHardware & Manufacturing Engineer

Lab

Interactive assemblies

A drawing shows you what a thing looks like. An exploded view shows you how it goes together — which is the part that actually matters when someone else has to build it. This is the viewer the project pages use, running on a placeholder assembly until the real CAD is exported.

Loading 3D view…
Placeholder controller stack — drag to orbit, slide to explode

How it works

The viewer loads glTF/GLB models and separates them along each part's own centroid axis, so an assembly modelled in SOLIDWORKS and exported with one top-level object per part explodes correctly without any per-model configuration.

three.js is code-split into its own bundle and only fetched once a viewer scrolls into range, and the render loop pauses whenever the canvas is off screen. Pages without a model ship no 3D code at all — which is why the rest of this site stays fast despite carrying a WebGL renderer.

Adding a model

Drop a .glb into public/models/ and add it to a project's frontmatter:

model:
  src: /models/smart-coffee.glb
  caption: Controller stack, exploded
  explode: 1.6

Export each part you want to separate as its own top-level object. Nested children move with their parent, so a sub-assembly that should stay together can simply be grouped.

Next

The plan is to bring the mechanical work onto the site properly — enclosure assemblies, the curtain rail brackets, the Pi rack, and the coffee machine's touch panel, each as a model you can take apart rather than a photograph of a finished object. Interactive schematics and dimensioned drawings are the other half of that.