Create account

DEV Community

Joe Pea

Posted on Jan 6, 2021 • Edited on Jan 7, 2021

Updated <lume-gltf-model> 3D model element (live demo)

#lume #webdev #webgl #javascript

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

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

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.