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-15 12:02:53 +02:00
parent 9058ea38e2 23123c6291
commit 0fc496cd5c
1 changed files with 140 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,45 +1,29 @@
<style>
model-viewer {
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;
}
.model{
height: calc(100%-84px)
}
</style>
<script> <script>
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 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 cameraOrbit = '0deg 0deg 100%';
let cameraTarget ="0m 0m 0m"; let cameraTarget = '0m 0m 0m';
let fieldOfView = '0deg'; let fieldOfView = '10deg';
let cameraAzimuth = 0; let cameraAzimuth = 0;
let cameraPolar = 0; let cameraPolar = 0;
let cameraZoom = 0;
let frontView = cameraAzimuth === 0 && cameraPolar === 0 ? true : false;
let topView = cameraAzimuth === 0 && cameraPolar === 90 ? true : false;
let cameraZoom = 100;
let xRotation = 0; let xRotation = 0;
let yRotation = 0; let yRotation = 0;
let zRotation = 0; let zRotation = 0;
@@ -49,10 +33,11 @@
*/ */
let modelViewer; let modelViewer;
$: style = `width: ${progress}%`; $: style = `width: ${progress}%`;
// @ts-ignore /**
* @param {any} detail
*/
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) {
@@ -62,106 +47,87 @@
} else hideProgressScreen = false; } else hideProgressScreen = false;
} }
function onResetView() { function onResetView() {
console.log(
'show cameraOrbit:',
console.log("show cameraOrbit:", modelViewer.getCameraOrbit(), modelViewer.cameraOrbit, modelViewer.getDimensions()) modelViewer.getCameraOrbit(),
console.log("Camera-orbit: ",modelViewer.getAttribute('camera-orbit'), "camera-target: ",modelViewer.getAttribute('camera-target'), "object-rotation: ", modelViewer.getAttribute('rotation')) modelViewer.cameraOrbit,
modelViewer.getDimensions()
modelViewer.cameraOrbit = cameraOrbit; );
modelViewer.cameraTarget = cameraTarget; console.log(
xRotation = yRotation = zRotation = 0; 'Camera-orbit: ',
cameraOrbit = '0deg 0deg 0m'; modelViewer.getAttribute('camera-orbit'),
cameraTarget ="0m 0m 0m"; 'camera-target: ',
fieldOfView = '0deg'; modelViewer.getAttribute('camera-target'),
'object-rotation: ',
modelViewer.getAttribute('rotation')
);
cameraAzimuth = 0; cameraAzimuth = 0;
cameraPolar = 0; cameraPolar = 0;
cameraZoom = 0; cameraZoom = 100;
modelViewer.cameraOrbit = cameraOrbit;
modelViewer.cameraTarget = cameraTarget;
modelViewer.fieldOfView = fieldOfView;
cameraAzimuth = 0;
cameraPolar = 0;
cameraZoom = 100;
fieldOfView = '10deg';
} }
/** /**
* @param {string} newOrbit * @param {number} azimuth
* @param {number} polar
* @param {number} zoom
*/ */
function updateCameraOrbit(newOrbit) { function updateCameraOrbit(azimuth, polar, zoom) {
cameraAzimuth = azimuth;
// cameraTarget ="0m 0m 0m" cameraPolar = polar;
console.log("update X",modelViewer.cameraOrbit,"target:", modelViewer.cameraTarget, newOrbit) cameraZoom = zoom;
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>
<!-- <Button <div class="h-full model w-full bg-neutral-200 p-4 transition-all delay-250">
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 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"
max-field-of-view="10deg"
min-field-of-view="0.1deg"-->
<model-viewer <model-viewer
src={data.url} src={data.url}
bind:this={modelViewer} bind:this={modelViewer}
touch-action="pan-y" touch-action="pan-y"
field-of-view="auto" field-of-view={fieldOfView}
min-field-of-view="1deg"
max-field-of-view="10deg"
camera-controls camera-controls
orientation={`${xRotation}deg ${yRotation}deg ${zRotation}deg`} orientation={`${xRotation}deg ${yRotation}deg ${zRotation}deg`}
camera-target="0m 0m 0m" camera-target="0m 0m 0m"
camera-orbit = {`${cameraAzimuth}deg ${cameraPolar}deg ${cameraZoom}`} camera-orbit={`${cameraAzimuth}deg ${cameraPolar}deg ${cameraZoom}%`}
on:progress={onProgress} on:progress={onProgress}
> >
<!--Buttons zum Steuern--> <!--Buttons zum Steuern-->
<div class="bg-redx-500 p-4 flex z-10"> <div
<div class="flex flex-col"> class=" p-4 flex z-10 absolute bottom-0"
class:opacity-0={!hideProgressScreen}
class:hidden={!hideProgressScreen}
>
<div class="flex flex-col bg-white/50">
<!--3 Buttons--> <!--3 Buttons-->
<div> <div class="p-2">
<Button <Button
on:click={()=>{updateCameraOrbit('0deg 0deg 0%')}} on:click={() => {
updateCameraOrbit(0, 0, cameraZoom);
}}
type="button" type="button"
variant="white" variant="white"
align="left" align="left"
class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left " class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left "
> >
Draufsicht Draufsicht
</Button> </Button>
<Button <Button
on:click={()=>{onResetView()}} on:click={() => {
onResetView();
}}
type="button" type="button"
variant="white" variant="white"
align="left" align="left"
class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left" class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
> >
@@ -169,68 +135,52 @@
</Button> </Button>
<Button <Button
on:click={() => {
on:click={()=>{updateCameraOrbit('0deg 90deg 0%')}} updateCameraOrbit(0, 90, cameraZoom);
}}
type="button" type="button"
variant="white" variant="white"
align="left" align="left"
class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left" class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
> >
Frontansicht Frontansicht
</Button> </Button>
</div> </div>
<!--Horizontal--> <!--Horizontal-->
<div> <div class="p-2">
<!-- svelte-ignore a11y_label_has_associated_control --> <label for="cazimuth">Horizontal drehen (Azimut):</label>
<label>Horizontal drehen (Azimut):</label> <input id="cazimuth" type="range" min="0" max="360" bind:value={cameraAzimuth} />
<input
type="range"
min="0" max="360"
bind:value={cameraAzimuth}
/>
<!-- on:input={slideCameraOrbit} -->
</div> </div>
<!--Vertikal--> <!--Vertikal-->
<div class=""> <div class="p-2">
<label class=" mb-2" for="polarSlider">Vertikal drehen (Polar):</label> <label class=" mb-2" for="polarSlider">Vertikal drehen (Polar):</label>
<input id="polarSlider" type="range" min=0 max=90 bind:value={cameraPolar} /> <input id="polarSlider" type="range" min="0" max="90" bind:value={cameraPolar} />
<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
</div> </div>
<!--Zoom/Distanz--> <!--Zoom/Distanz-->
<div> <div class="p-2">
<label for="cZoom">Zoomen</label> <label for="cZoom">Abstand (zoom):</label>
<input id="cZoom" type="range" <input id="cZoom" type="range" min="0" max="100" bind:value={cameraZoom} />
min="0"
max="120"
bind:value={cameraZoom}
on:input={slideCameraOrbit}/>
</div> </div>
</div> </div>
<!--Rotationen--> <!--Rotationen-->
<div class="flex mt-2 ml-2"> <div class="flex flex-col ml-2 p-4 bg-white/50">
Modell rotieren lassen:
<div class=""> <br />
Modell auf dem Kopf? -> y auf 270°
<div class="p-2">
<label class="" for="polarSlider">Rotation X:</label> <label class="" for="polarSlider">Rotation X:</label>
<input id="polarSlider" type="range" min=0 max=360 bind:value={xRotation} /> <input id="polarSlider" type="range" min="0" max="360" bind:value={xRotation} />
<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
</div> </div>
<div class=""> <div class="p-2">
<label class="" for="polarSlider">Rotation Y:</label> <label class="" for="polarSlider">Rotation Y:</label>
<input id="polarSlider" type="range" min=0 max=360 bind:value={yRotation} /> <input id="polarSlider" type="range" min="0" max="360" bind:value={yRotation} />
<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
</div> </div>
<div class=""> <div class="p-2">
<label class="" for="polarSlider">Rotation Z:</label> <label class="" for="polarSlider">Rotation Z:</label>
<input id="polarSlider" type="range" min=0 max=360 bind:value={zRotation} /> <input id="polarSlider" type="range" min="0" max="360" bind:value={zRotation} />
<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
</div> </div>
</div> </div>
</div> </div>
<!--Loading--> <!--Loading-->
<div <div
@@ -248,3 +198,24 @@
</div> </div>
</model-viewer> </model-viewer>
</div> </div>
<style>
model-viewer {
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;
} */
.model {
height: calc(100%-84px);
}
/* .active-border {
border: 2px blue solid;
} */
</style>