From 27ebbc76462eb6a3434f42d93f85fbfd412b3105 Mon Sep 17 00:00:00 2001
From: Al Murray <rogueyoshi@users.noreply.github.com>
Date: Sat, 17 Apr 2021 07:51:57 -0400
Subject: [PATCH] Experimental props

---
 src/lib/BabylonSvelte/BabylonScene.svelte |  3 +++
 src/routes/index.svelte                   | 18 +++++++++++++-----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/lib/BabylonSvelte/BabylonScene.svelte b/src/lib/BabylonSvelte/BabylonScene.svelte
index 80fc2bf..1a0b1eb 100644
--- a/src/lib/BabylonSvelte/BabylonScene.svelte
+++ b/src/lib/BabylonSvelte/BabylonScene.svelte
@@ -8,6 +8,8 @@
 	let sceneStore = writable(scene);
 	$: $sceneStore = scene; // eslint-disable-line @typescript-eslint/no-unused-vars
 
+	export const elapsedTime = writable(0);
+
 	setContext('BabylonScene', {
 		getScene: () => sceneStore
 	});
@@ -17,6 +19,7 @@
 
 	function renderFunction() {
 		scene.render();
+		$elapsedTime += scene.deltaTime;
 	}
 
 	let BABYLON: typeof import('babylonjs');
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index cc38366..cee80bc 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -14,6 +14,8 @@
 		BabylonGround
 	} from '$lib/BabylonSvelte';
 
+	let BABYLON: typeof import('babylonjs'); // Init Babylon
+
 	// Sphere falling
 	const fall = {
 		duration: 1000,
@@ -28,7 +30,7 @@
 
 	const t = tweened(4);
 
-	// Chaining a Svelte Tweens to loop infinitely (changing the tween options)
+	// Chaining a Svelte Tween to loop infinitely (changing the tween options)
 	(function loop() {
 		t.set(1, fall).then(() => {
 			t.set(4, rise).then(loop);
@@ -38,10 +40,16 @@
 	let spherePosition: Vector3;
 	$: if (spherePosition) spherePosition.y = $t; // Reactively changing the Babylon sphere's y-position with our Svelte Tween
 
-	let sphereColor: Color3;
-	$: if (sphereColor) sphereColor = new BABYLON.Color3($t / 4, 0, 1); // Also reactively changing the Babylon sphere's diffuseColor with our Svelte Tween (lazy example)
+	let elapsedTime; // Read-only timer from the scene
+
+	let refColor: Color3;
+	$: if (BABYLON) refColor = new BABYLON.Color3();
 
-	let BABYLON: typeof import('babylonjs');
+	$: if (elapsedTime && refColor)
+		BABYLON.Color3.HSVtoRGBToRef(($elapsedTime / 20) % 360, 1, 1, refColor); // Generate a refColor based on the scene's frame count
+
+	let sphereColor: Color3;
+	$: if (refColor && sphereColor) sphereColor = refColor; // Also reactively changing the Babylon sphere's diffuseColor to our refColor
 
 	onMount(async () => {
 		const babylonjs = await import('babylonjs');
@@ -52,7 +60,7 @@
 <div class:BABYLON>
 	{#if BABYLON}
 		<BabylonEngine>
-			<BabylonScene>
+			<BabylonScene bind:elapsedTime>
 				<BabylonCamera position={new BABYLON.Vector3(0, 5, -10)} target={BABYLON.Vector3.Zero()} />
 				<BabylonHemisphericLight direction={new BABYLON.Vector3(0, 1, 0)} intensity={0.7} />
 				<!-- Below is two-way binding between spherePosition and position -->