index.html

<script src="./template.js"></script>
<script type="module">
	import '@lume/live-code'
</script>

<live-code>
	<template>
		<base href="${host}" />
		<script src="./template.js"></script>

		<lume-scene
			webgl
			equirectangular-background="true"
			xbackground="https://assets.codepen.io/191583/airplane-hanger-env-map.jpg"
			environment="https://assets.codepen.io/191583/airplane-hanger-env-map.jpg"
		>
			<!-- a rig that allows zooming/rotating a camera (i.e. the view) -->
			<lume-camera-rig distance="1100"></lume-camera-rig>

			<lume-fbx-model
				id="model"
				src="https://rawcdn.githack.com/lume/lume/f7274c122964e145a0f265da63530b16361ee539/examples/models/mando-helmet.fbx"
				scale="10 10 10"
				size="250 250 250"
				mount-point="0.5 0.5 0.5"
				center-geometry
			></lume-fbx-model>
		</lume-scene>

		<div overlay>
			<h1>Hi 👋, I'm Joe,</h1>
			<p>a web developer based in California creating tooling for 3D web experiences. 🖼️</p>
		</div>

		<div overlay2>
			<h2><a href="./scratchpad/index.html">Enter my scratchpad 🗒️👈,</a></h2>
			<p>a place with free code snippets showing how to do web things, especially with the Lume 3D HTML framework.</p>
		</div>

		<style>
			html,
			body {
				background: radial-gradient(circle, rgb(90, 97, 128) 0%, rgb(36, 32, 36) 100%);
				user-select: none;
			}

			[overlay],
			[overlay2] {
				padding: 20px;
				position: absolute;
				max-width: 400px;
				backdrop-filter: blur(40px) brightness(1.2);

				& > :first-child {
					margin-top: 0;
				}

				& > :last-child {
					margin-bottom: 0;
				}
			}

			[overlay] {
				top: 0;
				left: 0;
				color: #b1c0ef;
				border-bottom-right-radius: 20px;
			}

			[overlay2] {
				bottom: 0;
				right: 0;
				color: #ebbbcd;
				border-top-left-radius: 20px;

				a {
					color: inherit;
					text-decoration: none;
				}
			}
		</style>

		<script type="module">
			import 'lume'
			import {MeshPhysicalMaterial} from 'three/src/materials/MeshPhysicalMaterial.js'
			import {toCreasedNormals} from 'three/examples/jsm/utils/BufferGeometryUtils.js'

			// rotate the model around y, 10 deg per second
			model.rotation = (x, y, z, t, dt) => [x, y + (dt / 1000) * 10, z]

			model.on('MODEL_LOAD', () => {
				model.three.traverse(obj => {
					if (!obj.isMesh) return

					// Make the parts of the helmet look metallic or plastic.
					if (obj.material.name.startsWith('Chrome') || obj.material.name.startsWith('Steel')) {
						// metal
						obj.material = new MeshPhysicalMaterial({color: 'white', metalness: 1, roughness: 0})
					} else {
						// black plastic visor
						obj.material = new MeshPhysicalMaterial({color: '#111111', metalness: 0.2, roughness: 0.2, clearcoat: 1})
						obj.geometry = toCreasedNormals(obj.geometry, 360) // smooth out the visor normals (the imported model has strange normals)
					}
				})
			})
		</script>
	</template>
</live-code>