Simple 3D Devboard designer

Ship #1 Changes requested

@christiansamuelbakti on Simple 3D Devboard designer · about 1 hour ago

I built a 3D DevBoard Designer, a browser-based tool for visually laying out electronic components on a PCB using Three.js. The most challenging part was bridging the gap between 2D screen coordinates and 3D space; I had to implement a custom raycasting system to accurately detect mouse clicks on the board and write the math to snap those coordinates to a strict 5mm grid. I’m really proud of how the final product turned out visually; by adding procedural copper traces, metallic mounting holes, and soft dynamic shadows, it feels like a premium, native desktop application rather than just a basic web page, all built with zero external frameworks.

To test the project, you don’t need to install anything or set up a local server. Simply save the code as an .html file and open it directly in any modern web browser like Chrome or Firefox. Once it loads, pick a component (like an MCU or LED) from the left sidebar and click anywhere on the green board to place it. You can then use right-click drag to orbit the camera, scroll to zoom, and use the properties panel on the right to tweak the board’s dimensions or change component colors in real-time.

1 devlog
5h

Try project → See source code →

Open comments for this post

@christiansamuelbakti on Simple 3D Devboard designer · about 2 hours ago

5h 22m 30s logged

SIMPLE 3D DEVBOARD DESIGNER

I built the 3D DevBoard Designer because I was tired of waiting for heavy, clunky PCB CAD software to load just to visualize a simple component layout. I wanted a tool that was instant, visual, and fun to use, so I built it entirely in the browser using Three.js and vanilla JavaScript. The biggest technical hurdle was translating 2D mouse clicks into 3D space; I solved this using Three.js Raycasting to shoot invisible lasers from the camera, combined with some modulo math to snap components perfectly to a 5mm grid so everything aligns cleanly on the board.

Beyond just placing basic shapes, I wanted it to actually look like a manufactured PCB, so I added procedural copper traces, metallic mounting holes, and soft PCF shadows to give it a premium, realistic feel. The final tool features a full library of 12 components (like MCUs, LEDs, and pin headers), a dynamic properties panel that updates based on what you click, and a JSON export system to save your designs. It was a highly rewarding project that proved you can build a snappy, professional-grade 3D desktop app entirely in a single HTML file without relying on heavy frameworks.