mattkenefick/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Three.js Basic Scene</title>
		<style>
			body {
				margin: 0;
			}
		</style>
	</head>
	<body>
		<script type="importmap">
			{
				"imports": {
					"three": "https://cdnjs.cloudflare.com/ajax/libs/three.js/0.157.0/three.module.js",
					"three/": "https://cdn.skypack.dev/three@0.149.0/",
					"@lumaai/luma-web": "https://cdn.jsdelivr.net/npm/@lumaai/luma-web@0.1.15/+esm"
				}
			}
		</script>
		<script type="module">
			import * as THREE from 'three';
			import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
			import { LumaSplatsSemantics, LumaSplatsThree } from '@lumaai/luma-web';

			// Create a scene
			const scene = new THREE.Scene();
			// scene.fog = new THREE.FogExp2(new THREE.Color(0xe0e1ff).convertLinearToSRGB(), 0.05);
			// scene.background = scene.fog.color;

			// Create a camera
			const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
			camera.position.z = 3;

			// Create a renderer
			const renderer = new THREE.WebGLRenderer();
			renderer.setSize(window.innerWidth, window.innerHeight);
			document.body.appendChild(renderer.domElement);

			// Orbit controls
			const controls = new OrbitControls(camera, renderer.domElement);
			controls.dampingFactor = 0.075;
			controls.enableDamping = true;
			controls.screenSpacePanning = false;

			// Setup uniform time
			let uniformTime = new THREE.Uniform(0);

			// Create a cube
			const geometry = new THREE.BoxGeometry();
			const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
			const cube = new THREE.Mesh(geometry, material);
			// scene.add(cube);

			// Animate the cube
			const animate = () => {
				requestAnimationFrame(animate);

				cube.rotation.x += 0.01;
				cube.rotation.y += 0.01;

				controls.update();

				renderer.render(scene, camera);
			};

			let splats = new LumaSplatsThree({
				antialias: true,
				enableThreeShaderIntegration: true,
				loadingAnimationEnabled: true,
				// source: 'https://lumalabs.ai/capture/ca9ea966-ca24-4ec1-ab0f-af665cb546ff',
				// source: 'https://lumalabs.ai/capture/5d4d36d7-4c4c-430d-833d-3df5610b22a7',
				source: 'https://lumalabs.ai/capture/3757048c-8718-4b17-a9e6-48e209692501',
				onBeforeRender: () => {
					uniformTime.value = performance.now() / 1000;
				}
			});

			// splats.semanticsMask = LumaSplatsSemantics.FOREGROUND;
			scene.add(splats);

			splats.onLoad = () => {
				splats.captureCubemap(renderer).then((capturedTexture) => {
					scene.environment = capturedTexture;
					scene.background = capturedTexture;
					scene.backgroundBlurriness = 0.5;
				});
			}

			// splats.setShaderHooks({
			// 	vertexShaderHooks: {
			// 		additionalUniforms: {
			// 			time_s: ['float', uniformTime],
			// 		},

			// 		getSplatTransform: /*glsl*/`
			// 			(vec3 position, uint layersBitmask) {
			// 				float x = 0.;
			// 				float z = 0.;
			// 				float y = sin(position.x * 1.0 + time_s) * 0.05;
			// 				return mat4(
			// 					1., 0., 0., 0,
			// 					0., 1., 0., 0,
			// 					0., 0., 1., 0,
			// 					x,  y,  z, 1.
			// 				);
			// 			}
			// 		`,
			// 	}
			// });

			animate();

			window.addEventListener('resize', e => {
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();
				renderer.setSize(window.innerWidth, window.innerHeight);
			});
		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>Three.js Basic Scene</title>
	<style>
	body {
	margin: 0;
	}
	</style>
	</head>
	<body>
	<script type="importmap">
	{
	"imports": {
	"three": "https://cdnjs.cloudflare.com/ajax/libs/three.js/0.157.0/three.module.js",
	"three/": "https://cdn.skypack.dev/three@0.149.0/",
	"@lumaai/luma-web": "https://cdn.jsdelivr.net/npm/@lumaai/luma-web@0.1.15/+esm"
	}
	}
	</script>
	<script type="module">
	import * as THREE from 'three';
	import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
	import { LumaSplatsSemantics, LumaSplatsThree } from '@lumaai/luma-web';

	// Create a scene
	const scene = new THREE.Scene();
	// scene.fog = new THREE.FogExp2(new THREE.Color(0xe0e1ff).convertLinearToSRGB(), 0.05);
	// scene.background = scene.fog.color;

	// Create a camera
	const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
	camera.position.z = 3;

	// Create a renderer
	const renderer = new THREE.WebGLRenderer();
	renderer.setSize(window.innerWidth, window.innerHeight);
	document.body.appendChild(renderer.domElement);

	// Orbit controls
	const controls = new OrbitControls(camera, renderer.domElement);
	controls.dampingFactor = 0.075;
	controls.enableDamping = true;
	controls.screenSpacePanning = false;

	// Setup uniform time
	let uniformTime = new THREE.Uniform(0);

	// Create a cube
	const geometry = new THREE.BoxGeometry();
	const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
	const cube = new THREE.Mesh(geometry, material);
	// scene.add(cube);

	// Animate the cube
	const animate = () => {
	requestAnimationFrame(animate);

	cube.rotation.x += 0.01;
	cube.rotation.y += 0.01;

	controls.update();

	renderer.render(scene, camera);
	};

	let splats = new LumaSplatsThree({
	antialias: true,
	enableThreeShaderIntegration: true,
	loadingAnimationEnabled: true,
	// source: 'https://lumalabs.ai/capture/ca9ea966-ca24-4ec1-ab0f-af665cb546ff',
	// source: 'https://lumalabs.ai/capture/5d4d36d7-4c4c-430d-833d-3df5610b22a7',
	source: 'https://lumalabs.ai/capture/3757048c-8718-4b17-a9e6-48e209692501',
	onBeforeRender: () => {
	uniformTime.value = performance.now() / 1000;
	}
	});

	// splats.semanticsMask = LumaSplatsSemantics.FOREGROUND;
	scene.add(splats);

	splats.onLoad = () => {
	splats.captureCubemap(renderer).then((capturedTexture) => {
	scene.environment = capturedTexture;
	scene.background = capturedTexture;
	scene.backgroundBlurriness = 0.5;
	});
	}

	// splats.setShaderHooks({
	// vertexShaderHooks: {
	// additionalUniforms: {
	// time_s: ['float', uniformTime],
	// },

	// getSplatTransform: /glsl/`
	// (vec3 position, uint layersBitmask) {
	// float x = 0.;
	// float z = 0.;
	// float y = sin(position.x * 1.0 + time_s) * 0.05;
	// return mat4(
	// 1., 0., 0., 0,
	// 0., 1., 0., 0,
	// 0., 0., 1., 0,
	// x, y, z, 1.
	// );
	// }
	// `,
	// }
	// });

	animate();

	window.addEventListener('resize', e => {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize(window.innerWidth, window.innerHeight);
	});
	</script>
	</body>
	</html>