Skip to content

Instantly share code, notes, and snippets.

@kungfooman

kungfooman/lume_test.html

Created November 21, 2023 11:43
Show Gist options
  • Save kungfooman/d2e04863587a500de14f092952581535 to your computer and use it in GitHub Desktop.
Save kungfooman/d2e04863587a500de14f092952581535 to your computer and use it in GitHub Desktop.
Download ZIP
Testing LUME in one file
Raw
lume_test.html
<script>
const imports = {
lume: 'https://raw.githack.com/lume/lume/develop/dist/index.js',
'lume/': 'https://raw.githack.com/lume/lume/develop/',
'@lume/element': 'https://raw.githack.com/lume/element/main/dist/index.js',
'classy-solid': 'https://raw.githack.com/lume/classy-solid/main/dist/index.js',
'@lume/eventful': 'https://raw.githack.com/lume/eventful/main/dist/index.js',
'@lume/kiwi': 'https://raw.githack.com/lume/kiwi/main/dist/kiwi.js',
'@lume/three-projected-material/': 'https://raw.githack.com/lume/three-projected-material/main/',
'@lume/autolayout': 'https://raw.githack.com/lume/autolayout/main/dist/AutoLayout.js',
lowclass: 'https://raw.githack.com/trusktr/lowclass/main/dist/index.js',
'james-bond': 'https://raw.githack.com/trusktr/james-bond/main/dist/index.js',
regexr: 'https://raw.githack.com/trusktr/regexr/main/dist/index.js',
'element-behaviors': 'https://raw.githack.com/lume/element-behaviors/main/dist/index.js',
'@lume/custom-attributes/': 'https://raw.githack.com/lume/custom-attributes/main/',
'solid-js': 'https://unpkg.com/solid-js@1.4.8/dist/solid.js',
'solid-js/web': 'https://unpkg.com/solid-js@1.4.8/web/dist/web.js',
'solid-js/html': 'https://unpkg.com/solid-js@1.4.8/html/dist/html.js',
'solid-js/store': 'https://unpkg.com/solid-js@1.4.8/store/dist/store.js',
three: 'https://raw.githack.com/mrdoob/three.js/r158/build/three.module.js',
'three/': 'https://raw.githack.com/mrdoob/three.js/r158/',
};
const str = JSON.stringify({imports}, null, 2);
document.write('<scr' + 'ipt type="importmap">', str, "</scr" + "ipt>");
</script>
<!-- Do you see the Moon's shadow on Earth's surface when it passes in front of the sun? -->
<!-- By default a <lume-scene> fills the space of it's parent, in this case the <body>. -->
<lume-scene id="scene" webgl>
<lume-camera-rig initial-polar-angle="0" min-distance="90" max-distance="1000" initial-distance="200"></lume-camera-rig>
<!-- Stars -->
<lume-sphere
id="stars"
texture="https://docs.lume.io/examples/hello-world/galaxy_starfield.png"
receive-shadow="false"
has="basic-material"
sidedness="back"
size="4000 4000 4000"
mount-point="0.5 0.5 0.5"
color="white"
></lume-sphere>
<!-- Sun light -->
<lume-element3d size="0 0" rotation="0 -50 0">
<lume-element3d size="0 0" rotation="10 0 0">
<lume-point-light
id="light"
size="0 0"
position="0 0 1800"
color="white"
intensity="2"
distance="10000"
shadow-map-width="2048"
shadow-map-height="2048"
shadow-camera-far="20000"
></lume-point-light>
</lume-element3d>
</lume-element3d>
<!-- Earth -->
<lume-element3d size="0 0 0">
<lume-element3d rotation="0 180 0">
<lume-sphere
id="earth"
texture="https://docs.lume.io/examples/hello-world/earthmap1k.jpg"
bump-map="https://docs.lume.io/examples/hello-world/earthbump1k.jpg"
specular-map="https://docs.lume.io/examples/hello-world/earthspec1k.jpg"
size="120 120 120"
mount-point="0.5 0.5 0.5"
color="white"
>
<lume-sphere
id="clouds"
texture="https://docs.lume.io/examples/hello-world/earthclouds.png"
opacity="0.7"
size="125 125 125"
mount-point="0.5 0.5 0.5"
align-point="0.5 0.5 0.5"
color="white"
></lume-sphere>
</lume-sphere>
</lume-element3d>
<lume-element3d rotation="90 10 0">
<lume-element3d id="moonRotator" rotation="0 0 110">
<lume-sphere
id="moon"
texture="https://docs.lume.io/examples/hello-world/moon.jpg"
position="250"
size="5 5 5"
mount-point="0.5 0.5 0.5"
color="white"
></lume-sphere>
</lume-element3d>
</lume-element3d>
</lume-element3d>
</lume-scene>
<style>
html,
body {
background: #222;
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}
lume-scene {
/* Prevent touch scrolling from interfering with out pointermove handler. */
touch-action: none;
}
lume-scene * {
pointer-events: none;
}
</style>
<script type="module">
import 'lume';
// We wrote the rotation function this way so that it would always start
// at the angle defined in the HTML.
let lastTime = performance.now();
let dt = 0;
moonRotator.rotation = (x, y, z, time) => {
dt = time - lastTime;
lastTime = time;
return [x, y, z + dt * 0.01];
};
// ^ We could've written it more simply but it would start at some angle
// based on time instead of our preferred angle:
// moonRotator.rotation = (x, y, z, t) => [x, y, t * 0.004];
earth.rotation = (x, y, z, t) => [x, t * 0.01, z];
clouds.rotation = (x, y, z, t) => [x, -t * 0.003, z];
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment