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 +32 -39
1 changed files with 32 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ff891bc164 - Show all commits

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

@@ -24,31 +24,34 @@
let yRotation = 0; let yRotation = 0;
let zRotation = 0; let zRotation = 0;
let modelViewer; import type { ModelViewerElement } from '@google/model-viewer';
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: ModelViewerElement | null = null;
$: style = `width: ${progress}%`; $: style = `width: ${progress}%`;
const onProgress = ({ detail }) => { const onProgress = ({ detail }: { detail: { totalProgress: number } }) => {
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
progress = Math.ceil(detail.totalProgress * 100.0); progress = Math.ceil(detail.totalProgress * 100.0);
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,9 +61,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
class="h-full w-full"
ar ar
shadow-intensity="1" shadow-intensity="1"
src={data.url} src={data.url}
@@ -81,18 +85,25 @@
class:opacity-0={!hideProgressScreen} class:opacity-0={!hideProgressScreen}
class:hidden={!hideProgressScreen} class:hidden={!hideProgressScreen}
> >
<button slot="ar-button" id="ar-button"> 👋 Activate AR </button> <!--AR Tracking erstmal ausgeblendet (hidden/flex)-->
<div class="hidden p-4 z-10 bg-red-500">
<button slot="ar-button" id="ar-button"> 👋 Activate AR </button>
<div id="ar-prompt">AR-Prompt</div> <div id="ar-prompt">AR-Prompt</div>
<button id="ar-failure"> AR is not tracking! </button>
<button id="ar-failure"> AR is not tracking! </button>
<div class="flex flex-col bg-white/50">
<button <button
class="flex"
on:click={() => { on:click={() => {
console.log(modelViewer.ar, modelViewer.getAttribute('ar-status')); if (modelViewer) {
}}>Test</button console.log(modelViewer.ar, modelViewer.getAttribute('ar-status'));
}
}}>AR Testen</button
> >
</div>
jared marked this conversation as resolved Outdated
jared commented 2025-06-24 15:49:26 +02:00
Outdated
Review
Copy Link

Kann man den vorherigen Code nicht löschen, da hier nicht viel passiert und dieser auch schnell wieder eingefügt ist. Wenn wir den behalten dann nicht mit hidden verstecken, sondern auskommentieren

Kann man den vorherigen Code nicht löschen, da hier nicht viel passiert und dieser auch schnell wieder eingefügt ist. Wenn wir den behalten dann nicht mit hidden verstecken, sondern auskommentieren
mina commented 2025-06-24 18:05:02 +02:00
Outdated
Review
Copy Link

Okay, gebe dir recht. Habs den Abschnitt nun gelöscht. Zu gegebener Zeit kann man hier den Teil einfügen, habs mir lokal abgespeichert, zur besseren Findbarkeit

Okay, gebe dir recht. Habs den Abschnitt nun gelöscht. Zu gegebener Zeit kann man hier den Teil einfügen, habs mir lokal abgespeichert, zur besseren Findbarkeit
<div class="flex flex-col bg-white/50">
<!--3 Buttons--> <!--3 Buttons-->
<div class="p-2"> <div class="p-2">
<Button <Button
@@ -184,22 +195,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>
mina marked this conversation as resolved Outdated
jared commented 2025-06-24 15:49:54 +02:00
Outdated
Review
Copy Link

Das finde ich gut, dass wir kein Custom css verwenden

Das finde ich gut, dass wir kein Custom css verwenden