Lume: GPU-Powered 3D Scenes Written as Plain HTML Elements

What if 3D on the web was just... HTML? Not a canvas you throw JavaScript at and hope for the best, but real elements you can write by hand, inspect in devtools, and style right next to your buttons and forms. That's the premise behind Lume, and it's more convincing than it has any right to be. Drop a <lume-box> or <lume-sphere> into your markup and you get GPU-accelerated geometry with lighting and shadow. No build step. Load a glTF helmet that reflects its environment, wrap native <button> elements in <lume-mixed-plane> so they cast real shadows onto a bump-mapped cement wall, or wire up a lava lamp using marching cubes. It plays nice with React, Vue, Svelte, Solid, Angular, whatever you're reaching for this week. The browser's DOM isn't something to escape from here. It's something worth extending.

Lume is the long-running project of Joe Pea, a developer whose resume reads like a tour of places where 3D on the web actually matters: SpaceX, NASA, Meta Reality Labs, Velodyne Lidar. He's an early contributor to Solid.js, which isn't a coincidence. Lume's reactivity layer is built on Solid's signal system, so template updates are surgically fine-grained. The custom element architecture uses a behavior system that lets you stack unlimited capabilities onto a single element, something standard web components can't do on their own. Underneath, Three.js handles WebGL rendering, but the abstraction is thin enough to reach through when you need to. There's also a sibling project called GLAS that's porting Three.js to WebAssembly via AssemblyScript, which is either ambitious or slightly unhinged. Probably both.

The best way in is the docs site, where live editors let you change code and watch the output update immediately. The skateboard configurator and disco helmet demos are good starting points. Poke around the GitHub org to see how the packages compose. If you've ever wished the DOM had a z-axis and a light source, give this an afternoon.