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

f004_CameraSteuerung-neu #11

Merged
jared merged 5 commits from f004_CameraSteuerung-neu into development 2025-06-25 09:14:08 +02:00
Conversation 2 Commits 5 Files Changed 1 +19 -46
1 changed files with 19 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/routes/(token-based)/view/[vorgang]/[tatort]/+page.svelte
View File

@@ -2,6 +2,7 @@
import Panel from '$lib/components/Panel.svelte'; import Panel from '$lib/components/Panel.svelte';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import Button from '$lib/components/Button.svelte'; import Button from '$lib/components/Button.svelte';
import type { ModelViewerElement } from '@google/model-viewer';
export let data; export let data;
@@ -24,31 +25,32 @@
let yRotation = 0; let yRotation = 0;
let zRotation = 0; let zRotation = 0;
mina marked this conversation as resolved Outdated
jared commented 2025-06-24 15:43:14 +02:00
Outdated
Review
Copy Link

import statements oben im file platzieren

import statements oben im file platzieren
let modelViewer; let modelViewer: ModelViewerElement | null = null;
$: style = `width: ${progress}%`; $: style = `width: ${progress}%`;
const onProgress = ({ detail }) => { const updateModelProgress = ({ detail }: { detail: { totalProgress: number } }) => {
progress = Math.ceil(detail.totalProgress * 100.0); progress = Math.ceil(detail.totalProgress * 100.0);
jared marked this conversation as resolved Outdated
jared commented 2025-06-24 15:47:13 +02:00
Outdated
Review
Copy Link

Funktionnamen könnte besser sein. Was bedeutet onProgress genau?

Funktionnamen könnte besser sein. Was bedeutet onProgress genau?
mina commented 2025-06-24 17:56:35 +02:00
Outdated
Review
Copy Link

Ist ist der Prozess vom Ladebalken, ein Event-trigger vom Model-viewer, habs jetzt unbenannt zu updateModelProgress, vielleicht erklärt es das besser

Ist ist der Prozess vom Ladebalken, ein Event-trigger vom Model-viewer, habs jetzt unbenannt zu updateModelProgress, vielleicht erklärt es das besser
if (progress == 100) { if (progress == 100) {
setTimeout(() => { setTimeout(() => {
hideProgressScreen = true; hideProgressScreen = true;
}, 250); }, 250);
} else hideProgressScreen = false; } else hideProgressScreen = false;
} };
function onResetView() { function onResetView() {
cameraAzimuth = 0; if (modelViewer) {
cameraPolar = 0; cameraAzimuth = 0;
cameraZoom = 100; cameraPolar = 0;
cameraZoom = 100;
modelViewer.cameraOrbit = cameraOrbit; modelViewer.cameraOrbit = cameraOrbit;
modelViewer.cameraTarget = cameraTarget; modelViewer.cameraTarget = cameraTarget;
modelViewer.fieldOfView = fieldOfView; modelViewer.fieldOfView = fieldOfView;
cameraAzimuth = 0; cameraAzimuth = 0;
cameraPolar = 0; cameraPolar = 0;
cameraZoom = 100; cameraZoom = 100;
fieldOfView = '10deg'; fieldOfView = '10deg';
}
} }
function updateCameraOrbit(azimuth: number, polar: number, zoom: number) { function updateCameraOrbit(azimuth: number, polar: number, zoom: number) {
@@ -58,10 +60,10 @@
} }
</script> </script>
<div class="h-full model w-full bg-neutral-200 p-4 transition-all delay-250"> <div class="h-full w-full bg-neutral-200 p-4 transition-all delay-250">
<!-- xr-environment --> <!-- xr-environment -->
<model-viewer <model-viewer
ar class="h-full w-full"
shadow-intensity="1" shadow-intensity="1"
src={data.url} src={data.url}
bind:this={modelViewer} bind:this={modelViewer}
@@ -73,7 +75,7 @@
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={updateModelProgress}
> >
<!--Buttons zum Steuern--> <!--Buttons zum Steuern-->
<div <div
@@ -81,18 +83,7 @@
class:opacity-0={!hideProgressScreen} class:opacity-0={!hideProgressScreen}
class:hidden={!hideProgressScreen} class:hidden={!hideProgressScreen}
> >
<button slot="ar-button" id="ar-button"> 👋 Activate AR </button>
<div id="ar-prompt">AR-Prompt</div>
<button id="ar-failure"> AR is not tracking! </button>
<div class="flex flex-col bg-white/50"> <div class="flex flex-col bg-white/50">
<button
on:click={() => {
console.log(modelViewer.ar, modelViewer.getAttribute('ar-status'));
}}>Test</button
>
<!--3 Buttons--> <!--3 Buttons-->
<div class="p-2"> <div class="p-2">
<Button <Button
@@ -184,22 +175,4 @@
</div> </div>
<style> <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> </style>