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';
let modelViewer: ModelViewerElement | null = null;
$: style = `width: ${progress}%`; $: style = `width: ${progress}%`;
const onProgress = ({ detail }) => { const onProgress = ({ detail }: { detail: { totalProgress: number } }) => {
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>
<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>