(Demo from Jan 5)
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.
It looks a lot better now:
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
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.
topics: #webgl #threejs #html #css #webdev #javascript #365DaysOfCode2021