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

Update Buttons in model viewer

Browse Source
This commit is contained in:
mina
2025-05-12 16:22:27 +02:00
parent f3850649c7
commit 8d71633f50
1 changed files with 111 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,6 +10,9 @@
height: 200px; height: 200px;
} }
.model{
height: calc(100%-84px)
}
</style> </style>
@@ -61,13 +64,23 @@
function onResetView() { function onResetView() {
// cameraOrbit = '0deg 0deg 50m'; cameraOrbit = '0deg 0deg 0m';
// cameraTarget ="0m 0m 0m" cameraTarget ="0m 0m 0m"
console.log("show cameraOrbit:", modelViewer.getCameraOrbit(), modelViewer.cameraOrbit, modelViewer.getDimensions()) console.log("show cameraOrbit:", modelViewer.getCameraOrbit(), modelViewer.cameraOrbit, modelViewer.getDimensions())
console.log("Camera-orbit: ",modelViewer.getAttribute('camera-orbit'), "camera-target: ",modelViewer.getAttribute('camera-target'), "object-rotation: ", modelViewer.getAttribute('rotation')) console.log("Camera-orbit: ",modelViewer.getAttribute('camera-orbit'), "camera-target: ",modelViewer.getAttribute('camera-target'), "object-rotation: ", modelViewer.getAttribute('rotation'))
// modelViewer.cameraOrbit = cameraOrbit; modelViewer.cameraOrbit = cameraOrbit;
// modelViewer.cameraTarget = cameraTarget; modelViewer.cameraTarget = cameraTarget;
xRotation = yRotation = zRotation = 0;
cameraOrbit = '0deg 0deg 0%';
cameraTarget ="0m 0m 0m";
fieldOfView = '0deg';
cameraAzimuth = 0;
cameraPolar = 0;
cameraZoom = 0;
} }
@@ -107,96 +120,8 @@
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"
> --> > -->
<div class="h-full w-full bg-neutral-100 p-4"> <div class="h-full model w-full bg-neutral-200 p-4">
<div class="bg-redx-500 p-4 flex">
<div class="flex flex-col">
<!--3 Buttons-->
<div>
<Button
on:click={()=>{updateCameraOrbit('0deg 180deg 100%')}}
type="button"
variant="white"
align="left"
class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
>
Draufsicht
</Button>
<Button
on:click={()=>{onResetView()}}
type="button"
variant="white"
align="left"
class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
>
Camera-Orbit Attribute
</Button>
<Button
on:click={()=>{updateCameraOrbit('0deg 90deg 0%')}}
type="button"
variant="white"
align="left"
class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
>
Frontansicht
</Button>
</div>
<!--Horizontal-->
<div>
<!-- svelte-ignore a11y_label_has_associated_control -->
<label>Horizontal drehen (Azimut):</label>
<input
type="range"
min="0" max="360"
bind:value={cameraAzimuth}
/>
<!-- on:input={slideCameraOrbit} -->
</div>
<!--Vertikal-->
<div class="">
<label class=" mb-2" for="polarSlider">Vertikal drehen (Polar):</label>
<input id="polarSlider" type="range" min=0 max=90 bind:value={cameraPolar} />
<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
</div>
<!--Zoom/Distanz-->
<div>
<label for="cZoom">Zoomen</label>
<input id="cZoom" type="range"
min="0"
max="120"
bind:value={cameraZoom}
on:input={slideCameraOrbit}/>
</div>
</div>
<!--Rotationen-->
<div class="flex mt-2 ml-2">
<div class="">
<label class="" for="polarSlider">Rotation X:</label>
<input id="polarSlider" type="range" min=0 max=360 bind:value={xRotation} />
<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
</div>
<div class="">
<label class="" for="polarSlider">Rotation Y:</label>
<input id="polarSlider" type="range" min=0 max=360 bind:value={yRotation} />
<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
</div>
<div class="">
<label class="" for="polarSlider">Rotation Z:</label>
<input id="polarSlider" type="range" min=0 max=360 bind:value={zRotation} />
<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
</div>
</div>
</div>
<!-- field-of-view="auto" --> <!-- field-of-view="auto" -->
<!-- <!--
camera-controls camera-controls
@@ -210,14 +135,104 @@
<model-viewer <model-viewer
src={data.url} src={data.url}
bind:this={modelViewer} bind:this={modelViewer}
shadow-intensity="50" touch-action="pan-y"
touch-action="pan-x" field-of-view="auto"
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-->
<div class="bg-redx-500 p-4 flex z-10">
<div class="flex flex-col">
<!--3 Buttons-->
<div>
<Button
on:click={()=>{updateCameraOrbit('0deg 0deg 0%')}}
type="button"
variant="white"
align="left"
class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
>
Draufsicht
</Button>
<Button
on:click={()=>{onResetView()}}
type="button"
variant="white"
align="left"
class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
>
Werte zurücksetzen
</Button>
<Button
on:click={()=>{updateCameraOrbit('0deg 90deg 0%')}}
type="button"
variant="white"
align="left"
class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
>
Frontansicht
</Button>
</div>
<!--Horizontal-->
<div>
<!-- svelte-ignore a11y_label_has_associated_control -->
<label>Horizontal drehen (Azimut):</label>
<input
type="range"
min="0" max="360"
bind:value={cameraAzimuth}
/>
<!-- on:input={slideCameraOrbit} -->
</div>
<!--Vertikal-->
<div class="">
<label class=" mb-2" for="polarSlider">Vertikal drehen (Polar):</label>
<input id="polarSlider" type="range" min=0 max=90 bind:value={cameraPolar} />
<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
</div>
<!--Zoom/Distanz-->
<div>
<label for="cZoom">Zoomen</label>
<input id="cZoom" type="range"
min="0"
max="120"
bind:value={cameraZoom}
on:input={slideCameraOrbit}/>
</div>
</div>
<!--Rotationen-->
<div class="flex mt-2 ml-2">
<div class="">
<label class="" for="polarSlider">Rotation X:</label>
<input id="polarSlider" type="range" min=0 max=360 bind:value={xRotation} />
<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
</div>
<div class="">
<label class="" for="polarSlider">Rotation Y:</label>
<input id="polarSlider" type="range" min=0 max=360 bind:value={yRotation} />
<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
</div>
<div class="">
<label class="" for="polarSlider">Rotation Z:</label>
<input id="polarSlider" type="range" min=0 max=360 bind:value={zRotation} />
<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
</div>
</div>
</div>
<!--Loading--> <!--Loading-->
<div <div
slot="progress-bar" slot="progress-bar"