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

26
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,13 +25,11 @@
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
import type { ModelViewerElement } from '@google/model-viewer';
let modelViewer: ModelViewerElement | null = null; let modelViewer: ModelViewerElement | null = null;
$: style = `width: ${progress}%`; $: style = `width: ${progress}%`;
const onProgress = ({ detail }: { detail: { totalProgress: number } }) => { 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(() => {
@@ -65,7 +64,6 @@
<!-- xr-environment --> <!-- xr-environment -->
<model-viewer <model-viewer
class="h-full w-full" class="h-full w-full"
ar
shadow-intensity="1" shadow-intensity="1"
src={data.url} src={data.url}
bind:this={modelViewer} bind:this={modelViewer}
@@ -77,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
@@ -85,24 +83,6 @@
class:opacity-0={!hideProgressScreen} class:opacity-0={!hideProgressScreen}
class:hidden={!hideProgressScreen} class:hidden={!hideProgressScreen}
> >
<!--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>
<button id="ar-failure"> AR is not tracking! </button>
<button
class="flex"
on:click={() => {
if (modelViewer) {
console.log(modelViewer.ar, modelViewer.getAttribute('ar-status'));
}
}}>AR Testen</button
>
</div>
<div class="flex flex-col bg-white/50"> <div class="flex flex-col bg-white/50">
<!--3 Buttons--> <!--3 Buttons-->
<div class="p-2"> <div class="p-2">