innohub/tatort
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'CameraSteuerung' into development

Browse Source
This commit is contained in:
mina
2025-05-14 17:14:38 +02:00
parent a7c8bf91d9 9519b0fdd1
commit 9058ea38e2
2 changed files with 229 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
package-lock.json generated
View File

@@ -1454,9 +1454,9 @@
} }
}, },
"node_modules/@sveltejs/kit": { "node_modules/@sveltejs/kit": {
"version": "2.20.7", "version": "2.20.8",
"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.20.7.tgz", "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.20.8.tgz",
"integrity": "sha512-dVbLMubpJJSLI4OYB+yWYNHGAhgc2bVevWuBjDj8jFUXIJOAnLwYP3vsmtcgoxNGUXoq0rHS5f7MFCsryb6nzg==", "integrity": "sha512-ep9qTxL7WALhfm0kFecL3VHeuNew8IccbYGqv5TqL/KSqWRKzEgDG8blNlIu1CkLTTua/kHjI+f5T8eCmWIxKw==",
"dependencies": { "dependencies": {
"@types/cookie": "^0.6.0", "@types/cookie": "^0.6.0",
"cookie": "^0.6.0", "cookie": "^0.6.0",
@@ -3242,10 +3242,9 @@
} }
}, },
"node_modules/fdir": { "node_modules/fdir": {
"version": "6.4.3", "version": "6.4.4",
"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.3.tgz", "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.4.tgz",
"integrity": "sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==", "integrity": "sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==",
"license": "MIT",
"peerDependencies": { "peerDependencies": {
"picomatch": "^3 || ^4" "picomatch": "^3 || ^4"
}, },
@@ -5959,6 +5958,21 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/tinyglobby": {
"version": "0.2.13",
"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.13.tgz",
"integrity": "sha512-mEwzpUgrLySlveBwEVDMKk5B57bhLPYovRfPAXD5gA/98Opn0rCDj3GtLwFvCvH5RK9uPCExUROW5NjDwvqkxw==",
"dependencies": {
"fdir": "^6.4.4",
"picomatch": "^4.0.2"
},
"engines": {
"node": ">=12.0.0"
},
"funding": {
"url": "https://github.com/sponsors/SuperchupuDev"
}
},
"node_modules/tinypool": { "node_modules/tinypool": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.0.2.tgz", "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.0.2.tgz",
@@ -6227,14 +6241,16 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/vite": { "node_modules/vite": {
"version": "6.2.6", "version": "6.3.5",
"resolved": "https://registry.npmjs.org/vite/-/vite-6.2.6.tgz", "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
"integrity": "sha512-9xpjNl3kR4rVDZgPNdTL0/c6ao4km69a/2ihNQbcANz8RuCOK3hQBmLSJf3bRKVQjVMda+YvizNE8AwvogcPbw==", "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==",
"license": "MIT",
"dependencies": { "dependencies": {
"esbuild": "^0.25.0", "esbuild": "^0.25.0",
"fdir": "^6.4.4",
"picomatch": "^4.0.2",
"postcss": "^8.5.3", "postcss": "^8.5.3",
"rollup": "^4.30.1" "rollup": "^4.34.9",
"tinyglobby": "^0.2.13"
}, },
"bin": { "bin": {
"vite": "bin/vite.js" "vite": "bin/vite.js"

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

@@ -3,22 +3,56 @@
height: 100%; height: 100%;
width: 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;
}
.model{
height: calc(100%-84px)
}
</style> </style>
<script> <script>
import { preloadCode } from '$app/navigation'; import { preloadCode } from '$app/navigation';
import Panel from '$lib/components/ui/Panel.svelte'; import Panel from '$lib/components/ui/Panel.svelte';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import Button from '$lib/components/ui/Button.svelte';
import autoprefixer from 'autoprefixer';
export let data; export let data;
onMount(() => { onMount(() => {
import('@google/model-viewer'); import('@google/model-viewer');
console.log(modelViewer.getAttribute('camera-orbit'), modelViewer.getAttribute('camera-target'), modelViewer.getAttribute('rotation'))
}); });
let progress = 0; let progress = 0;
let hideProgressScreen = false; let hideProgressScreen = false;
let cameraOrbit = '0deg 0deg 0%';
let cameraTarget ="0m 0m 0m";
let fieldOfView = '0deg';
let cameraAzimuth = 0;
let cameraPolar = 0;
let cameraZoom = 0;
let xRotation=0;
let yRotation=0;
let zRotation=0;
/**
* @type {any}
*/
let modelViewer;
$: style = `width: ${progress}%`; $: style = `width: ${progress}%`;
// @ts-ignore
function onProgress({ detail }) { function onProgress({ detail }) {
progress = Math.ceil(detail.totalProgress * 100.0); progress = Math.ceil(detail.totalProgress * 100.0);
if (progress == 100) { if (progress == 100) {
@@ -27,20 +61,181 @@
}, 250); }, 250);
} else hideProgressScreen = false; } else hideProgressScreen = false;
} }
function onResetView() {
console.log("show cameraOrbit:", modelViewer.getCameraOrbit(), modelViewer.cameraOrbit, modelViewer.getDimensions())
console.log("Camera-orbit: ",modelViewer.getAttribute('camera-orbit'), "camera-target: ",modelViewer.getAttribute('camera-target'), "object-rotation: ", modelViewer.getAttribute('rotation'))
modelViewer.cameraOrbit = cameraOrbit;
modelViewer.cameraTarget = cameraTarget;
xRotation = yRotation = zRotation = 0;
cameraOrbit = '0deg 0deg 0m';
cameraTarget ="0m 0m 0m";
fieldOfView = '0deg';
cameraAzimuth = 0;
cameraPolar = 0;
cameraZoom = 0;
}
/**
* @param {string} newOrbit
*/
function updateCameraOrbit(newOrbit) {
// cameraTarget ="0m 0m 0m"
console.log("update X",modelViewer.cameraOrbit,"target:", modelViewer.cameraTarget, newOrbit)
modelViewer.cameraOrbit = newOrbit;
modelViewer.cameraTarget = cameraTarget;
}
function slideCameraOrbit(){
modelViewer.cameraOrbit =`${cameraAzimuth}deg ${cameraPolar}deg ${cameraZoom}%`;
}
function slideRotation(){
modelViewer.orientation = `${xRotation}deg ${yRotation}deg ${zRotation}deg`
}
const disableMouseWheelZoom = (/** @type {{ preventDefault: () => void; }} */ event) => {
event.preventDefault(); // Blockiert das Mausrad-Ereignis
};
</script> </script>
<div class="h-full w-full bg-neutral-100 p-4"> <!-- <Button
<model-viewer on:click={toggleShowOptions}
src={data.url} {disabled}
camera-controls 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 model w-full bg-neutral-200 p-4">
<!-- field-of-view="auto" -->
<!--
camera-controls
model-rotation="0rad 0rad 0rad"
camera-target="0m 0m 10m"
field-of-view="auto" field-of-view="auto"
max-field-of-view="10deg" max-field-of-view="10deg"
min-field-of-view="0.1deg" min-field-of-view="0.1deg"-->
<model-viewer
src={data.url}
bind:this={modelViewer}
touch-action="pan-y"
field-of-view="auto"
camera-controls
orientation={`${xRotation}deg ${yRotation}deg ${zRotation}deg`}
camera-target="0m 0m 0m"
camera-orbit = {`${cameraAzimuth}deg ${cameraPolar}deg ${cameraZoom}`}
on:progress={onProgress} on:progress={onProgress}
> >
<!--Buttons zum Steuern-->
<div class="bg-redx-500 p-4 flex z-10">
<div class="flex flex-col">
<!--3 Buttons-->
<div>
<Button
on:click={()=>{updateCameraOrbit('0deg 0deg 0%')}}
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={()=>{onResetView()}}
type="button"
variant="white"
align="left"
class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
>
Werte zurücksetzen
</Button>
<Button
on:click={()=>{updateCameraOrbit('0deg 90deg 0%')}}
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>
<!-- svelte-ignore a11y_label_has_associated_control -->
<label>Horizontal drehen (Azimut):</label>
<input
type="range"
min="0" max="360"
bind:value={cameraAzimuth}
/>
<!-- on:input={slideCameraOrbit} -->
</div>
<!--Vertikal-->
<div class="">
<label class=" mb-2" for="polarSlider">Vertikal drehen (Polar):</label>
<input id="polarSlider" type="range" min=0 max=90 bind:value={cameraPolar} />
<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
</div>
<!--Zoom/Distanz-->
<div>
<label for="cZoom">Zoomen</label>
<input id="cZoom" type="range"
min="0"
max="120"
bind:value={cameraZoom}
on:input={slideCameraOrbit}/>
</div>
</div>
<!--Rotationen-->
<div class="flex mt-2 ml-2">
<div class="">
<label class="" for="polarSlider">Rotation X:</label>
<input id="polarSlider" type="range" min=0 max=360 bind:value={xRotation} />
<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
</div>
<div class="">
<label class="" for="polarSlider">Rotation Y:</label>
<input id="polarSlider" type="range" min=0 max=360 bind:value={yRotation} />
<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
</div>
<div class="">
<label class="" for="polarSlider">Rotation Z:</label>
<input id="polarSlider" type="range" min=0 max=360 bind:value={zRotation} />
<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
</div>
</div>
</div>
<!--Loading-->
<div <div
slot="progress-bar" 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:opacity-0={hideProgressScreen}
class:hidden={hideProgressScreen} class:hidden={hideProgressScreen}
> >