erste Versuche

package-lock.json

@@ -1454,10 +1454,9 @@
 			}
 		},
 		"node_modules/@sveltejs/kit": {
-			"version": "2.20.5",
-			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.20.5.tgz",
-			"integrity": "sha512-zT/97KvVUo19jEGZa972ls7KICjPCB53j54TVxnEFT5VEwL16G+YFqRVwJbfxh7AmS7/Ptr1rKF7Qt4FBMDNlw==",
-			"license": "MIT",
+			"version": "2.20.7",
+			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.20.7.tgz",
+			"integrity": "sha512-dVbLMubpJJSLI4OYB+yWYNHGAhgc2bVevWuBjDj8jFUXIJOAnLwYP3vsmtcgoxNGUXoq0rHS5f7MFCsryb6nzg==",
 			"dependencies": {
 				"@types/cookie": "^0.6.0",
 				"cookie": "^0.6.0",

src/routes/(angemeldet)/view/[vorgang]/[tatort]/+page.svelte

@@ -3,22 +3,49 @@
 		height: 100%;
 		width: 100%;
 	}
+
+	
+  .vertical-slider {
+    writing-mode: bt-lr; /* Schreibt von unten nach oben (Vertikale Darstellung) */
+    transform: rotate(270deg); /* Slider um 270° drehen */
+    height: 200px;
+  }
+
 </style>
 
 <script>
 	import { preloadCode } from '$app/navigation';
 	import Panel from '$lib/components/ui/Panel.svelte';
 	import { onMount } from 'svelte';
+	import Button from '$lib/components/ui/Button.svelte';
+	import autoprefixer from 'autoprefixer';
 	export let data;
 
 	onMount(() => {
 		import('@google/model-viewer');
+		console.log(modelViewer)
 	});
 
 	let progress = 0;
 	let hideProgressScreen = false;
+
+
+	let cameraOrbit = '0deg 0deg 0m';
+	let cameraTarget ="0m 0m 100m";
+	let fieldOfView = '0deg';
+
+	let cameraAzimuth = 0;
+	let cameraPolar = 75;
+	let cameraZoom = 3
+
+	/**
+	 * @type {any}
+	 */
+	let modelViewer;
+
 	$: style = `width: ${progress}%`;
 
+
 	function onProgress({ detail }) {
 		progress = Math.ceil(detail.totalProgress * 100.0);
 		if (progress == 100) {
@@ -27,23 +54,131 @@
 			}, 250);
 		} else hideProgressScreen = false;
 	}
+
+	function onResetView() {
+		 cameraOrbit = '0deg 0deg 5m';
+		 cameraTarget ="0m 0m 0m"
+		console.log("X",modelViewer.cameraOrbit, cameraOrbit, cameraTarget)
+		 modelViewer.cameraOrbit = cameraOrbit;
+		 modelViewer.cameraTarget = cameraTarget;
+
+	}
+
+	/**
+	 * @param {string} newOrbit
+	 */
+	function updateCameraOrbit(newOrbit) {
+		 cameraOrbit = newOrbit;
+		 cameraTarget ="0m 0m 0m"
+		console.log("X",modelViewer.cameraOrbit, cameraOrbit, cameraTarget)
+		 modelViewer.cameraOrbit = cameraOrbit;
+		 modelViewer.cameraTarget = cameraTarget;
+
+	}
+
+	const slideCameraOrbit = ()=>{
+		modelViewer.cameraOrbit = `${cameraAzimuth}deg ${cameraPolar}deg ${cameraZoom}m`;
+	}
+
+	const disableMouseWheelZoom = (event) => {
+    event.preventDefault(); // Blockiert das Mausrad-Ereignis
+  };
 </script>
 
+
+<!-- 		<Button
+			on:click={toggleShowOptions}
+			{disabled}
+			type="button"
+			variant="white"
+			fullWidth
+			align="left"
+			class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
+		> -->
 <div class="h-full w-full bg-neutral-100 p-4">
+	<div class="bg-redx-500 p-4">
+<div>
+	<Button
+	on:click={()=>{updateCameraOrbit('0deg 0deg 0m')}}
+	type="button"
+	variant="white"
+	
+	align="left"
+	class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
+	>
+	Draufsicht
+	</Button>
+	<Button
+	on:click={()=>{updateCameraOrbit('0deg 75deg 3m')}}
+	type="button"
+	variant="white"
+	
+	align="left"
+	class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
+	>
+	Zurücksetzen
+	</Button>
+	<Button
+	on:click={()=>{updateCameraOrbit('0deg 90deg 5m')}}
+	type="button"
+	variant="white"
+	
+	align="left"
+	class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
+	>
+	Frontansicht
+	</Button>
+
+</div>
+
+<!--Horizontal-->
+<div>
+			<label>Horizontal drehen (Azimut):</label>
+			<input 
+			type="range" 
+			min="-180" max="180" 
+			bind:value={cameraAzimuth} 
+			on:input={slideCameraOrbit} />
+</div>
+
+<!--Zoom/Distanz-->
+<div>
+	<label for="cZoom">Zoomen</label>
+	<input id="cZoom" type="range"
+	min="1"
+    max="10"
+  
+	 bind:value={cameraZoom} 
+	 on:input={slideCameraOrbit}/>
+</div>
+
+<!--Vertikal-->
+<div class="flex flex-col items-center mt-2">
+			<label class="text-lg font-bold mb-2" for="polarSlider">Vertikal drehen (Polar):</label>
+			<input id="polarSlider" class="vertical-slider" type="range" min=0 max=120 bind:value={cameraPolar} on:input={slideCameraOrbit} />
+</div>
+
+	</div>
+	<!-- field-of-view="auto" -->
 	<model-viewer
 		src={data.url}
 		camera-controls
-		field-of-view="auto"
+		model-rotation="0rad 0rad 0rad"
+		bind:this={modelViewer}
+		camera-target="0m 0m 0m"
+		camera-orbit = {cameraOrbit}
+		
 		max-field-of-view="10deg"
 		min-field-of-view="0.1deg"
 		on:progress={onProgress}
 	>
+	<!--Loading-->
 		<div
 			slot="progress-bar"
-			class="flex items-center justify-center h-full w-full transition-all delay-250"
+			class="flex items-center justify-center h-5/6 w-full transition-all delay-250"
 			class:opacity-0={hideProgressScreen}
 			class:hidden={hideProgressScreen}
-		>
+		> 
 			<Panel class="w-72 bg-gray-50 flex items-center flex-col"
 				><p class="mb-5">Loading {progress}%</p>
 				<div class="h-1 w-full bg-neutral-200 dark:bg-neutral-600">