A #NewYear2021 resolution: one demo per day. Here's an #HTML tag in #3D space with shine from a light, featuring my #ShelbyGT350.
This demo defines a new HTML element that makes it possible to size the element (notably the underlying WebGL object) based on the natural size of the image. This way we don't need to explicitly know the image size.
Made with #LUME 👇
lume
/
lume
Create CSS3D/WebGL applications declaratively with HTML. Give regular DOM elements shadow and lighting.
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: #webgl #css #javascript #webdev #graphics #365DaysOfCode
Top comments (0)