DEV Community

Cover image for Tiny mini galaxy (live demo)
Joe Pea
Joe Pea

Posted on

Tiny mini galaxy (live demo)

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:

GitHub logo lume / lume

Create CSS3D/WebGL applications declaratively with HTML. Give regular DOM elements shadow and lighting.

LUME

A toolkit that simplifies the creation of rich and interactive 2D or 3D experiences for any device from mobile to desktop to AR/VR.

Home  ·  Documentation  ·  Examples  ·  Forum  ·  Chat  ·  Source

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 both CSS and WebGL.

This package uses and re-exports features from the below packages.

glas - WebGL engine written in AssemblyScript

This is a port of Three.js to AssemblyScript (TypeScript that compiles to WebAssembly) for running WebGL graphics with consistent performance.

@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…

topics: #CSS3D #HTML #JavaScript

Discussion (0)