Forem

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

Posted on

1

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

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay