I'm posting one demo per day all 2021!
I improved the previous demo by adding new attributes to the <lume-scene> element that give the rendering an "environment map" that reflects off of shiny surfaces in the scene.
This what it looks like now:
And this is what it looked like before:
The gist of it is you can write HTML like the following and you'll have a 3D model on your web site:
<lume-scene id="scene" webgl disable-css background="https://assets.codepen.io/191583/airplane-hanger-env-map.jpg" equirectangular-background="true" environment="https://assets.codepen.io/191583/airplane-hanger-env-map.jpg" > <lume-point-light position="200 -200 200" intensity="1" color="white"></lume-point-light> <lume-ambient-light color="white" intensity="1.2"></lume-ambient-light> <lume-node id="cameraRig" rotation="0 200 0"> <lume-perspective-camera size="0 0 0" position="0 0 1000" rotation="0 0 0" active></lume-perspective-camera> </lume-node> <lume-gltf-model id="model" src="https://rawcdn.githack.com/KhronosGroup/glTF-Sample-Models/c99173c645f47fae603dcb2e7263e656e265cf06/2.0/DamagedHelmet/glTF-Binary/DamagedHelmet.glb" size="2 2 0" scale="400 400 400" > </lume-gltf-model> </lume-scene> The demo is built with LUME, a software developer toolkit for making interactive 2D or 3D experiences with HTML. We're working towards its initial release.
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 #threejs #html #css #webdev #javascript #365DaysOfCode2021
Top comments (0)