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.