Interactive 3D Models on the Portfolio
Today the site got a proper upgrade. Not a blog post, not a CSS tweak — a whole new capability. You can now inspect my Fusion 360 designs directly in the browser, rotate them, zoom in, and see them rendered with realistic materials.
The 3D Viewer
Built on React Three Fiber and drei, sitting inside the existing Next.js stack. The viewer loads STL and 3MF files, normalises the geometry to a consistent scale, and drops it into a lit scene with environment reflections.
Every model gets orbit controls — click and drag to rotate, scroll to zoom. Some parts auto-rotate on the Y axis. The MX5 inlet manifold tumbles on a second axis at half speed, because a manifold deserves to be shown off from every angle.
Per-part configuration controls everything: camera distance, model scale, material metalness and roughness, tumble on/off. The manifold renders at 1.5x scale with a brushed metal finish — high metalness, slight roughness, silver-grey tone. It catches the environment map nicely.
What's In There
Seven parts went up today:
- MX5 1.8i VVT Inlet Manifold — the headline piece, rendered in brushed metal with tumble rotation
- Speeduino 0.4.3 Case — enclosure for the open-source ECU board
- TS12 Soldering Iron Dexterity Shroud — heat shroud for improved grip
- Press Thumb Knob — replacement part for an arbor press
- 40x40 Keyhole Attachment — mounting bracket for aluminium extrusion
- Lidl Light Mount — custom bracket for a workshop light
- Workshop Shed — scale model in 3MF format for layout planning
The models directory is organised by category — mechanical, enclosures, mounts, tools, prototypes. Adding a new part is just dropping an STL or 3MF into the right folder and adding an entry to the page data.
Commissions Page
The old Gigs page is gone. In its place: a proper commissions page. Four service areas — 3D design, reverse engineering, custom software, and electronics/IoT. A clear four-step process (brief, quote, build, deliver) and a direct email contact.
This is the bit that turns the portfolio from a showcase into something that can actually bring in work.
Landing Page
Rewrote the hero copy to frame the site as what it actually is now — a portfolio. Not just a workshop journal anymore. The landing page now calls out the interactive 3D models, the downloadable software, and the reverse-engineered hardware. A new 3D DESIGNS button sits alongside the existing project and journal links.
The Stack
The viewer is a single client component, dynamically imported with SSR disabled. Three.js handles the rendering, drei provides the orbit controls and environment lighting, and the STL/3MF loaders come from Three's examples. Everything is wrapped in Suspense with a wireframe cube fallback while models load.
No backend changes. No new dependencies beyond three, @react-three/fiber, and @react-three/drei. The models are static files served from /public. It just works.