3D Gamepad Overlay w/ Three.js (for OBS)

I've been busy with some contract stuff that I'm excited to share next month, but for a quick break from it I decided to make a simple 3D visualizer for gamepad inputs that works in OBS after realizing the current offerings for that as a browser source were just 2D graphics. I wanted to go for something uniquely stylish & 3D, thus going for the line-mesh debug aesthetic I constantly gravitate towards, but later down the line I might try adding proper controller meshes if there's enough demand for the overlay in general.

It's still very much a work in progress with not all features implemented yet, but seeing as I have to get back to work focus, I figured it'd be cool to share the current version on my website.

https://ompu.co/experiments/gamepad/ 

The system currently works right away in OBS if the URL is added in a browser source, and it should render with alpha. All the meshes are generated in code since it was getting overly complicated to get authored line meshes from Blender to Three.js (maybe later I'll write tools for that, but this was quicker for me at the moment heh). There's also some (extremely crude) camera controls which I hope to flesh out soon (there's translation, but no rotation), and some controller wobble based on inputs to make it just a little flashier to look at.

Immediate features I'd still like to add:
- Full camera controls (including rotations, FOV, ortho/persp)
- C to copy existing parameters as a URL to paste elsewhere
- Alternate gamepad graphics (Xbox, Switch, etc)
- Options to shut off twisting & motion lerping
- Surface highlights on input via cards

I've also thought about trying to write more 3D overlays for OBS that don't require external software to use, since there's a lot of potential with the combination of OBS & ThreeJS, and it would be so cool to visualize more kinds of data in neat & interesting ways.

Hope y'all find this neat or handy~