Merge pull request #1 from lumalabs/george/worlds-within-worlds

George/worlds within worlds

README.md

@@ -90,7 +90,7 @@ scene.background = scene.fog.color;
 ## Scene Lighting
 [![scene-lighting-demo](https://cdn-luma.com/public/lumalabs.ai/luma-web-library/assets/images/scene-lighting-preview.jpg)](https://cdn-luma.com/public/lumalabs.ai/luma-web-library/index.html#scene-lighting)
 
-It's possible to illuminate three.js scenes with Luma splats. To do so, we can render a cubemap of the splats and use it as the scene environment. This is done by calling `captureCubeMap` on the splats object. We first wait for the splats to fully load before capturing the cubemap. To ensure the splats are fully rendered at the time of capture, we disable the loading animation.
+It's possible to illuminate three.js scenes with Luma splats. To do so, we can render a cubemap of the splats and use it as the scene environment. This is done by calling `captureCubemap()` on the splats object. We first wait for the splats to fully load before capturing the cubemap. To ensure the splats are fully rendered at the time of capture, we disable the loading animation.
 
 **[DemoLighting.ts](https://cdn-luma.com/public/lumalabs.ai/luma-web-library/src/DemoLighting.ts)**
 ```ts
@@ -102,10 +102,11 @@ let splats = new LumaSplatsThree({
 });
 
 splats.onLoad = () => {
-	let capturedTexture = splats.captureCubeMap(renderer);
-	scene.environment = capturedTexture;
-	scene.background = capturedTexture;
-	scene.backgroundBlurriness = 0.5;
+	splats.captureCubemap(renderer).then((capturedTexture) => {
+		scene.environment = capturedTexture;
+		scene.background = capturedTexture;
+		scene.backgroundBlurriness = 0.5;
+	});
 }
 ```
 

package.json

@@ -6,12 +6,13 @@
   "scripts": {
     "build": "npx esbuild src/index.tsx --bundle --outdir=dist --sourcemap --preserve-symlinks --loader:.md=text --minify",
     "dev": "npx esbuild src/index.tsx --bundle --outdir=dist --sourcemap --preserve-symlinks --watch --serve=localhost:3002 --servedir=. --loader:.md=text",
-    "start": "npm run dev"
+    "start": "npm run dev",
+    "deploy": "./misc/deploy.sh"
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@lumaai/luma-web": "^0.1.8",
+    "@lumaai/luma-web": "^0.1.9",
     "@react-three/drei": "^9.88.17",
     "@react-three/fiber": "^8.15.11",
     "@types/react": "^18.2.38",

src/DemoFog.ts

@@ -25,13 +25,14 @@ export function DemoFog(props: DemoProps) {
 	};
 
 	splats.onLoad = () => {
-		let environmentMap = splats.captureCubeMap(renderer);
-		scene.environment = environmentMap;
-		let environmentProbes = new EnvironmentProbes(4);
-		environmentProbes.position.set(-3, 1, 0.25);
-		environmentProbes.rotation.y = Math.PI / 2;
-		environmentProbes.scale.setScalar(3);
-		scene.add(environmentProbes);
+		splats.captureCubemap(renderer).then(environmentMap => {
+			scene.environment = environmentMap;
+			let environmentProbes = new EnvironmentProbes(4);
+			environmentProbes.position.set(-3, 1, 0.25);
+			environmentProbes.rotation.y = Math.PI / 2;
+			environmentProbes.scale.setScalar(3);
+			scene.add(environmentProbes);
+		});
 	}
 
 	// gui for fog

src/DemoLighting.ts

@@ -15,10 +15,11 @@ export function DemoLighting(props: DemoProps) {
 	});
 
 	splats.onLoad = () => {
-		let capturedTexture = splats.captureCubeMap(renderer);
-		scene.environment = capturedTexture;
-		scene.background = capturedTexture;
-		scene.backgroundBlurriness = 0.5;
+		splats.captureCubemap(renderer).then(capturedTexture => {
+			scene.environment = capturedTexture;
+			scene.background = capturedTexture;
+			scene.backgroundBlurriness = 0.5;
+		});
 	}
 
 	scene.add(splats);