Stable

src/src/lib/components/lessons/lesson/Environment.svelte

@@ -2,9 +2,10 @@
 	import { Canvas } from '@threlte/core';
 	import Scene from './Scene.svelte';
 	import { onMount } from 'svelte';
+	import { useProgress } from '@threlte/extras';
+	import { derived } from 'svelte/store';
 
 	let selectedObject = '';
-
 	export let role: string;
 	export let materials: { type: boolean; file_path: string; title: string }[] = [];
 
@@ -17,6 +18,12 @@
 			selectedObject = materials.find((material) => material.type === true)?.file_path || '';
 		}
 	});
+
+	// Use the `useProgress` hook to track loading state
+	const { progress } = useProgress();
+
+	// A derived store to track if the loading is complete
+	const isLoading = derived(progress, ($progress) => $progress < 1);
 </script>
 
 <div
@@ -33,6 +40,12 @@
 		</select>
 	</div>
 
+	{#if $isLoading}
+		<div class="loading-overlay">
+			Loading 3D model... {$progress * 100}%
+		</div>
+	{/if}
+
 	<Canvas>
 		<Scene {selectedObject} {role} />
 	</Canvas>
@@ -48,4 +61,19 @@
 		padding: 10px;
 		border-radius: 5px;
 	}
+
+	.loading-overlay {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background-color: rgba(0, 0, 0, 0.5);
+		color: white;
+		font-size: 1.5rem;
+		z-index: 2000;
+	}
 </style>

src/src/lib/components/webspeech/speechSynthesis.ts

@@ -0,0 +1,25 @@
+let speechSynthesis: SpeechSynthesis;
+let speechRate = 1.8;
+
+if (typeof window !== 'undefined') {
+	speechSynthesis = window.speechSynthesis;
+}
+
+export function speak(text: string): void {
+	if (!speechSynthesis) return;
+	speechSynthesis.cancel();
+
+	const utterance = new SpeechSynthesisUtterance(text);
+	utterance.rate = speechRate;
+	speechSynthesis.speak(utterance);
+}
+
+export function setRate(rate: number): void {
+	speechRate = rate;
+}
+
+export function cancel(): void {
+	if (speechSynthesis) {
+		speechSynthesis.cancel();
+	}
+}