Forem

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

Posted on

1

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

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay