DEV Community

loading...
Cover image for Introducing Lume.io

Introducing Lume.io

zoedreams profile image ☮️✝️☪️🕉☸️✡️☯️ ・2 min read

Lume.io is a new GTK (graphic toolkit) that empowers web developers to create semantic 3d graphics using simple html, javascript, and assembly script. Based on the THREE.js 3d library, Lume gives you general-purpose HTML Elements for defining 2D or 3D scenes rendered with CSS3D, WebGL, or both mixed together.

Alt Text

Lume’s “mixed mode” let’s us combine traditional HTML elements styled with CSS with new elements that render with WebGL, which means we can render both traditional HTML content and 3D models together in the same 3D space, with lighting and shadow effects on both.

Alt Text

Lume is built on the Web Component standards, making it possible to write 3D scenes declaratively using custom HTML elements, regardless of which view layer you prefer. This makes it possible for you write 3D scenes using popular HTML frameworks like (but not limited to) React, Vue.js, Meteor, Angular, Ember.js, or even the great jQuery.

One huge feature of Lume Elements is the ability to develop reactive fluid layouts that are interactive using standard javascript events. Without additional code or prior 3d programming knowledge.

Alt Text

Our project is of course open source, and we invite anyone whom is interested in helping to create a more immersive web experience to check out our project source. We are always looking for help. Porting THREE.js into assembly script is not an easy task. We feel this endeavor is a worth while one, not only for huge performance increases, but the ability to use strong typed language that is based off from TypeScript.

Huge shoutout to the team putting AssemblyScript together. Absolutely some of the most amazing work happening in the open source community. And if your new to AS make sure to stop over at their website AssemblyScript.org

Thank you for reading, and be sure follow me if you would like continued updates on our on going effort to update the internets ability to share and create 3d web graphics. Have a good one, and happy coding.

~k

Discussion (3)

pic
Editor guide
Collapse
wrldwzrd89 profile image
Eric Ahnell

Wow! As someone who is very new to web 3D, this strikes me as quite powerful. I clearly stand to gain by knowing about it!

Collapse
barakplasma profile image
Michael Salaverry

This is a very cool way to use web components. Way to go!

Collapse
zoedreams profile image
☮️✝️☪️🕉☸️✡️☯️ Author

Thank you! I thought so to. appreciate the kudos,, happy thanksgiving.