refactor-login-page #7
@@ -12,42 +12,45 @@
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { preloadCode } from '$app/navigation';
|
||||
import Panel from '$lib/components/ui/Panel.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import Button from '$lib/components/ui/Button.svelte';
|
||||
import autoprefixer from 'autoprefixer';
|
||||
|
||||
export let data;
|
||||
|
||||
onMount(() => {
|
||||
import('@google/model-viewer');
|
||||
console.log(modelViewer.getAttribute('camera-orbit'), modelViewer.getAttribute('camera-target'), modelViewer.getAttribute('rotation'))
|
||||
});
|
||||
|
||||
let progress = 0;
|
||||
let hideProgressScreen = false;
|
||||
|
||||
let cameraOrbit = '0deg 0deg 0m';
|
||||
let cameraTarget ="0m 0m 0m";
|
||||
let fieldOfView = '0deg';
|
||||
let cameraOrbit = '0deg 0deg 100%';
|
||||
let cameraTarget = '0m 0m 0m';
|
||||
let fieldOfView = '10deg';
|
||||
|
||||
let cameraAzimuth = 0;
|
||||
let cameraPolar = 0;
|
||||
let cameraZoom = 0;
|
||||
let xRotation=0;
|
||||
let yRotation=0;
|
||||
let zRotation=0;
|
||||
|
||||
let frontView = cameraAzimuth === 0 && cameraPolar === 0 ? true : false;
|
||||
|
||||
let topView = cameraAzimuth === 0 && cameraPolar === 90 ? true : false;
|
||||
|
||||
let cameraZoom = 100;
|
||||
let xRotation = 0;
|
||||
let yRotation = 0;
|
||||
let zRotation = 0;
|
||||
|
||||
/**
|
||||
* @type {any}
|
||||
*/
|
||||
let modelViewer;
|
||||
|
||||
|
||||
$: style = `width: ${progress}%`;
|
||||
|
||||
// @ts-ignore
|
||||
/**
|
||||
* @param {any} detail
|
||||
*/
|
||||
function onProgress({ detail }) {
|
||||
progress = Math.ceil(detail.totalProgress * 100.0);
|
||||
if (progress == 100) {
|
||||
@@ -57,177 +60,141 @@
|
||||
} else hideProgressScreen = false;
|
||||
}
|
||||
|
||||
|
||||
function onResetView() {
|
||||
cameraOrbit = '0deg 0deg 0m';
|
||||
cameraTarget ="0m 0m 0m"
|
||||
|
||||
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'))
|
||||
|
||||
modelViewer.cameraOrbit = cameraOrbit;
|
||||
modelViewer.cameraTarget = cameraTarget;
|
||||
xRotation = yRotation = zRotation = 0;
|
||||
cameraOrbit = '0deg 0deg 0%';
|
||||
cameraTarget ="0m 0m 0m";
|
||||
fieldOfView = '0deg';
|
||||
|
||||
cameraAzimuth = 0;
|
||||
cameraPolar = 0;
|
||||
cameraZoom = 0;
|
||||
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')
|
||||
);
|
||||
|
||||
cameraAzimuth = 0;
|
||||
cameraPolar = 0;
|
||||
cameraZoom = 100;
|
||||
|
||||
modelViewer.cameraOrbit = cameraOrbit;
|
||||
modelViewer.cameraTarget = cameraTarget;
|
||||
modelViewer.fieldOfView = fieldOfView;
|
||||
cameraAzimuth = 0;
|
||||
cameraPolar = 0;
|
||||
cameraZoom = 100;
|
||||
fieldOfView = '10deg';
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} newOrbit
|
||||
* @param {number} azimuth
|
||||
* @param {number} polar
|
||||
* @param {number} zoom
|
||||
*/
|
||||
function updateCameraOrbit(newOrbit) {
|
||||
|
||||
// cameraTarget ="0m 0m 0m"
|
||||
console.log("update X",modelViewer.cameraOrbit,"target:", modelViewer.cameraTarget, newOrbit)
|
||||
modelViewer.cameraOrbit = newOrbit;
|
||||
modelViewer.cameraTarget = cameraTarget;
|
||||
|
||||
function updateCameraOrbit(azimuth, polar, zoom) {
|
||||
cameraAzimuth = azimuth;
|
||||
cameraPolar = polar;
|
||||
cameraZoom = zoom;
|
||||
}
|
||||
|
||||
function slideCameraOrbit(){
|
||||
modelViewer.cameraOrbit =`${cameraAzimuth}deg ${cameraPolar}deg ${cameraZoom}%`;
|
||||
}
|
||||
|
||||
function slideRotation(){
|
||||
modelViewer.orientation = `${xRotation}deg ${yRotation}deg ${zRotation}deg`
|
||||
}
|
||||
|
||||
const disableMouseWheelZoom = (/** @type {{ preventDefault: () => void; }} */ event) => {
|
||||
event.preventDefault(); // Blockiert das Mausrad-Ereignis
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<!-- <Button
|
||||
on:click={toggleShowOptions}
|
||||
{disabled}
|
||||
type="button"
|
||||
variant="white"
|
||||
fullWidth
|
||||
align="left"
|
||||
class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
|
||||
> -->
|
||||
|
||||
<div class="h-full model w-full bg-neutral-200 p-4">
|
||||
|
||||
<!-- field-of-view="auto" -->
|
||||
<!--
|
||||
camera-controls
|
||||
model-rotation="0rad 0rad 0rad"
|
||||
|
||||
camera-target="0m 0m 10m"
|
||||
|
||||
field-of-view="auto"
|
||||
max-field-of-view="10deg"
|
||||
min-field-of-view="0.1deg"-->
|
||||
<div class="h-full model w-full bg-neutral-200 p-4 transition-all delay-250">
|
||||
<model-viewer
|
||||
src={data.url}
|
||||
bind:this={modelViewer}
|
||||
touch-action="pan-y"
|
||||
field-of-view="auto"
|
||||
camera-controls
|
||||
orientation={`${xRotation}deg ${yRotation}deg ${zRotation}deg`}
|
||||
touch-action="pan-y"
|
||||
field-of-view={fieldOfView}
|
||||
min-field-of-view="1deg"
|
||||
max-field-of-view="10deg"
|
||||
camera-controls
|
||||
orientation={`${xRotation}deg ${yRotation}deg ${zRotation}deg`}
|
||||
camera-target="0m 0m 0m"
|
||||
camera-orbit = {`${cameraAzimuth}deg ${cameraPolar}deg ${cameraZoom}`}
|
||||
camera-orbit={`${cameraAzimuth}deg ${cameraPolar}deg ${cameraZoom}%`}
|
||||
on:progress={onProgress}
|
||||
>
|
||||
<!--Buttons zum Steuern-->
|
||||
<div class="bg-redx-500 p-4 flex z-10">
|
||||
<div class="flex flex-col">
|
||||
<!--Buttons zum Steuern-->
|
||||
<div
|
||||
class=" p-4 flex z-10 absolute bottom-0"
|
||||
class:opacity-0={!hideProgressScreen}
|
||||
class:hidden={!hideProgressScreen}
|
||||
>
|
||||
<div class="flex flex-col bg-white/50">
|
||||
<!--3 Buttons-->
|
||||
<div>
|
||||
<div class="p-2">
|
||||
<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"
|
||||
on:click={() => {
|
||||
updateCameraOrbit(0, 0, cameraZoom);
|
||||
}}
|
||||
type="button"
|
||||
variant="white"
|
||||
align="left"
|
||||
class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left "
|
||||
>
|
||||
Draufsicht
|
||||
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"
|
||||
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
|
||||
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"
|
||||
on:click={() => {
|
||||
updateCameraOrbit(0, 90, cameraZoom);
|
||||
}}
|
||||
type="button"
|
||||
variant="white"
|
||||
align="left"
|
||||
class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
|
||||
>
|
||||
Frontansicht
|
||||
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 class="p-2">
|
||||
<label for="cazimuth">Horizontal drehen (Azimut):</label>
|
||||
<input id="cazimuth" type="range" min="0" max="360" bind:value={cameraAzimuth} />
|
||||
</div>
|
||||
<!--Vertikal-->
|
||||
<div class="p-2">
|
||||
<label class=" mb-2" for="polarSlider">Vertikal drehen (Polar):</label>
|
||||
<input id="polarSlider" type="range" min="0" max="90" bind:value={cameraPolar} />
|
||||
</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 class="p-2">
|
||||
<label for="cZoom">Abstand (zoom):</label>
|
||||
<input id="cZoom" type="range" min="0" max="100" bind:value={cameraZoom} />
|
||||
</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>
|
||||
|
||||
<!--Rotationen-->
|
||||
<div class="flex flex-col ml-2 p-4 bg-white/50">
|
||||
Modell rotieren lassen:
|
||||
<br />
|
||||
Modell auf dem Kopf? -> y auf 270°
|
||||
<div class="p-2">
|
||||
<label class="" for="polarSlider">Rotation X:</label>
|
||||
<input id="polarSlider" type="range" min="0" max="360" bind:value={xRotation} />
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<label class="" for="polarSlider">Rotation Y:</label>
|
||||
<input id="polarSlider" type="range" min="0" max="360" bind:value={yRotation} />
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<label class="" for="polarSlider">Rotation Z:</label>
|
||||
<input id="polarSlider" type="range" min="0" max="360" bind:value={zRotation} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Loading-->
|
||||
<div
|
||||
slot="progress-bar"
|
||||
@@ -238,9 +205,30 @@
|
||||
<Panel class="w-72 bg-gray-50 flex items-center flex-col"
|
||||
><p class="mb-5">Loading {progress}%</p>
|
||||
<div class="h-1 w-full bg-neutral-200 dark:bg-neutral-600">
|
||||
<div class="h-1 bg-blue-500" {style} ></div>
|
||||
<div class="h-1 bg-blue-500" {style}></div>
|
||||
</div></Panel
|
||||
>
|
||||
</div>
|
||||
</model-viewer>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user