fixed Comments of Jared
This commit is contained in:
@@ -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;
|
||||||
|
|
||||||
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);
|
||||||
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">
|
||||||
|
|||||||
Reference in New Issue
Block a user