Lume: HTML for interactive animated 3D graphics

Hello! I’m hoping to make interactive designs (2D or 3D) easier to achieve in the web. The way that I’m doing that with Lume, HTML elements for 3D rendering (compatible with React, Vue, Svelte, Solid.js, and all the other web frameworks by virtue of being HTML elements).

In the future there will be a no-/low-code studio that outputs human-friendly (3D) HTML code, aiming to make it easy for designers to no only create 3D experiences (alternative to https://spline.design), but to output developer-friendly code that can be expanded upon easily (Spline’s code output is more of a magic black box, difficult to work with).

Here’s the “hello world” example (a small Earth scene):

The closest alternatives are A-Frame, and react-three-fiber. Lume is similar to A-Frame because it is custom elements, but closer to react-three-fiber because it has templating and reactivity for creating higher-level components out of other components (A-Frame has no reactivity or templating). A-Frame and react-three-fiber currently have a bigger ecosystem of libraries, but the foundation on which Lume is built will enable a rich ecosystem compatible with all web frameworks.

Lume is powered by Solid.js for reactivity and templating, and Three.js for rendering with additional features added.

Stay tuned!


Speaking of Open Source Design, there are lots of things that could use some design love, for example branding and identity for various of Lume’s libraries like element-behaviors, @lume/element, classy-solid, etc. Please reach out if interested!

2 Likes

Hello! Welcome to the community :wave:

Your project seems super cool! Since you mentioned you are looking for design help, you might also find posting in the job postings category on the forum helpful. It’s for paid jobs as well as volunteering opportunities! :slight_smile: