While I write documentation for LUME, a 3D HTML toolkit, I will be posting demos that I create for the docs. I am posting one demo per day all 2021.
This demo is a tiny mini galaxy!
It shows the basics of the <lume-node> element, which is a primitive element for making a hierarchy in 3D space.
A <lume-node> element can contain child LUME elements. Each child LUME element transforms relative to its parent. A <lume-node> element can also contain any regular HTML content that will not be decorated with WebGL rendering.
For WebGL rendering you can use <lume-dom-plane> for mixing HTML content with WebGL content such as <lume-mesh>, <lume-gltf-model>, etc. More info will be landing in the docs!
Made with LUME:
A toolkit that simplifies the creation of rich and interactive 2D or 3D experiences.
npm install lume
Features
LUME is composed of several packages that can be used individually, or together as a whole:
lume - HTML elements for rich graphics
HTML elements for easily defining rich and interactive 2D or 3D applications powered by CSS3D, WebGL, or a combination of both.
This package uses and re-exports features from the below packages.
@lume/element - System for defining HTML elements
This is a web component system that allows you to create new, fast, and performant HTML elements in a simple way. It provides the foundation for LUME's HTML elements, and a standard pattern for building new elements that extend the features of LUME.
element-behaviors - Mix functionalities onto HTML elements
This allows you to augment HTML elements with features called…
topics: #CSS3D #HTML #JavaScript
Top comments (0)