mattkenefick · December 14, 2023 19:52
diff --git a/index.html b/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/[email protected]/",
 					"@lumaai/luma-web": "https://cdn.jsdelivr.net/npm/@lumaai/[email protected]/+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/[email protected]/",
	"@lumaai/luma-web": "https://cdn.jsdelivr.net/npm/@lumaai/[email protected]/+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>