intro-example.html

<script src="./importmap.js"></script>

<style>
	html,
	body {
		height: 100%;
		margin: 0;
	}
</style>

<lume-scene
	id="scene"
	webgl
	environment="./examples/nasa-astrobee-robot/luna-station.jpg"
	background="./examples/nasa-astrobee-robot/luna-station.jpg"
	equirectangular-background="true"
>
	<lume-ambient-light color="white" intensity="0.3"></lume-ambient-light>

	<lume-camera-rig align-point="0.5 0.5 0.5" max-distance="6000" distance="3000">
		<lume-point-light slot="camera-child" position="500 500 200" intensity="0.4"></lume-point-light>
	</lume-camera-rig>

	<lume-element3d align-point="0.5 0.5 0.5">
		<!-- Load a 3D model from an FBX file. We make it have a metallic look down below. -->
		<lume-fbx-model
			id="mando"
			rotation="0 0 0"
			size="40 40 40"
			scale="10 10 10"
			src="./models/mando-helmet.fbx"
			center-geometry
		></lume-fbx-model>

		<!-- A sphere with a frosty surface. -->
		<lume-sphere
			id="sphere"
			mount-point="0.5 0.5 0.5"
			position="-500"
			has="physical-material"
			receive-shadow="false"
			size="400 400 400"
			sidedness="double"
			opacity="1"
			color="white"
			clearcoat="1"
			transmission="1"
			metalness="0.0"
			roughness="0.55"
		>
			<!-- An inner sphere to make the outer sphere seem to glow from inside, using a shader-material for a custom shader. -->
			<lume-sphere
				id="innerSphere"
				align-point="0.5 0.5 0.5"
				mount-point="0.5 0.5 0.5"
				has="shader-material"
				receive-shadow="false"
				size="360 360 360"
				sidedness="double"
				uniforms='{
					"iTime": { "value": 0 },
					"iResolution": { "value": {"x": 1, "y": 1, "z": 1} }
				}'
			></lume-sphere>
		</lume-sphere>

		<!-- A star shape, with a shader-material to make its shader be custom. -->
		<lume-shape
			id="shape"
			size="300 300 300"
			position="500"
			align-point="0.5 0.5 0.5"
			mount-point="0.5 0.5 0.5"
			sidedness="double"
			receive-shadow="false"
			color="red"
			fitment="cover"
			bevel
			bevel-thickness="1"
			has="shader-material"
			uniforms='{
				"iTime": { "value": 0 },
				"iResolution": { "value": {"x": 1, "y": 1, "z": 1} }
			}'
		></lume-shape>
	</lume-element3d>
</lume-scene>

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

	shape.shape = starPath

	const vertexShader = /*glsl*/ `
	  varying vec2 vUv;

	  void main() {
	    vUv = uv;
	    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
	  }
	`

	const fragmentShader = /*glsl*/ `
	  #include <common>

	  uniform vec3 iResolution;
	  uniform float iTime;

	  // The following is the default shader when you start a new shadertoy example.
	  // By iq: https://www.shadertoy.com/user/iq
	  // license: Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

	  // BEGIN SHADERTOY CODE {

	  void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
	    // Normalized pixel coordinates (from 0 to 1)
	    vec2 uv = fragCoord/iResolution.xy;

	    // Time varying pixel color
	    vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));

	    // Output to screen
	    fragColor = vec4(col,1.0);
	    //fragColor = vec4(1.0, 0.3, 0.1, 1.0);
	  }

	  // END SHADERTOY CODE }

	  varying vec2 vUv;

	  void main() {
	    mainImage(gl_FragColor, vUv / 2.0 * gl_FragCoord.xy);
	  }
	`

	// Apply a custom shader to the inner glowing sphere, and the star shape.
	innerSphere.vertexShader = vertexShader
	innerSphere.fragmentShader = fragmentShader
	shape.vertexShader = vertexShader
	shape.fragmentShader = fragmentShader

	animateShader(innerSphere)
	animateShader(shape, 2000)

	// Animates
	async function animateShader(targetBox, timeOffset = 0) {
		createEffect(() => {
			const mat = targetBox.behaviors.get('shader-material')

			if (!mat?.meshComponent) return

			mat.uniforms.iResolution.value.x = targetBox.calculatedSize.x * 10
			mat.uniforms.iResolution.value.y = targetBox.calculatedSize.y * 10

			targetBox.needsUpdate()
		})

		Motor.addRenderTask(t => {
			const mat = targetBox.behaviors.get('shader-material')

			if (!mat?.meshComponent) return

			mat.uniforms.iTime.value = (t + timeOffset) * 0.001
			targetBox.needsUpdate()
		})
	}

	tiltOnPointerMove(scene, sphere)
	tiltOnPointerMove(scene, mando)
	tiltOnPointerMove(scene, shape)

	function tiltOnPointerMove(pointerContext, rotationTarget, rotationAmount = 15) {
		let pointers = new Set()
		pointerContext.addEventListener('pointerdown', event => pointers.add(event.pointerId))
		pointerContext.addEventListener('pointerup', event => pointers.delete(event.pointerId))

		// Slightly rotate the given element based on pointer movement.
		pointerContext.addEventListener('pointermove', event => {
			if (pointers.size) return
			rotationTarget.rotation.y = (event.clientX / pointerContext.offsetWidth) * (rotationAmount * 2) - rotationAmount
			rotationTarget.rotation.x = -(
				(event.clientY / pointerContext.offsetHeight) * (rotationAmount * 2) -
				rotationAmount
			)
		})
	}

	// Wait for the model to be loaded so we can style metal parts of the
	// helmet with a metallic material, and the visor with a black
	// plastic-like material.
	mando.on('MODEL_LOAD', () => {
		// Once loaded, let's traverse the tree to visit all the mesh parts.
		mando.three.traverse(obj => {
			// Skip non-mesh nodes.
			if (obj.isMesh) {
				// 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.15})
				} 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 had strange normals)
				}
			}
		})
	})
</script>