DEV Community

Cover image for Shiny Shelby GT350 Photo (live demo)
Joe Pea
Joe Pea

Posted on

Shiny Shelby GT350 Photo (live demo)

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 👇

GitHub logo lume / lume

GPU-powered 3D HTML. ✨🧊 <lume-box size="1 2 3">

LUME

A toolkit that simplifies the creation of rich and interactive 2D or 3D experiences.

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 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: #webgl #css #javascript #webdev #graphics #365DaysOfCode

Top comments (0)