DEV Community

Cover image for Day 8 of 365: Beautiful rotatable cube (live demo)
Joe Pea
Joe Pea

Posted on

Day 8 of 365: Beautiful rotatable cube (live demo)

Day 8 of 365: A #beautiful rotatable #3D cube with #LUME.

Posting a new demo every day of 2021!

The demo makes a element. It applies rotation on mouse/finger move events.

The demo shows how to

  1. Make a custom <codepen-cube> HTML element with with @lume/element.
  2. How to use the element and assign the size of the cube via HTML attributes.
  3. Position 6 flat square surfaces in the shape of a cube using LUME's HTML elements.
  4. Observe mouse/finger movement in order to make it rotate.
  5. Apply beautiful coloring.

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: #codeart #creativecode #mediaart #graphics #webdev #creativecoding #CSS #webgl #webdevelopment

Discussion (0)