f004_CameraSteuerung-neu #11
@@ -2,6 +2,7 @@
|
||||
import Panel from '$lib/components/Panel.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import Button from '$lib/components/Button.svelte';
|
||||
import type { ModelViewerElement } from '@google/model-viewer';
|
||||
|
||||
export let data;
|
||||
|
||||
@@ -24,13 +25,11 @@
|
||||
let yRotation = 0;
|
||||
let zRotation = 0;
|
||||
|
||||
|
mina marked this conversation as resolved
Outdated
|
||||
import type { ModelViewerElement } from '@google/model-viewer';
|
||||
|
||||
let modelViewer: ModelViewerElement | null = null;
|
||||
|
||||
$: style = `width: ${progress}%`;
|
||||
|
||||
const onProgress = ({ detail }: { detail: { totalProgress: number } }) => {
|
||||
const updateModelProgress = ({ detail }: { detail: { totalProgress: number } }) => {
|
||||
progress = Math.ceil(detail.totalProgress * 100.0);
|
||||
|
jared marked this conversation as resolved
Outdated
jared
commented
Funktionnamen könnte besser sein. Was bedeutet onProgress genau? Funktionnamen könnte besser sein. Was bedeutet onProgress genau?
mina
commented
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) {
|
||||
setTimeout(() => {
|
||||
@@ -65,7 +64,6 @@
|
||||
<!-- xr-environment -->
|
||||
<model-viewer
|
||||
class="h-full w-full"
|
||||
ar
|
||||
shadow-intensity="1"
|
||||
src={data.url}
|
||||
bind:this={modelViewer}
|
||||
@@ -77,7 +75,7 @@
|
||||
orientation={`${xRotation}deg ${yRotation}deg ${zRotation}deg`}
|
||||
camera-target="0m 0m 0m"
|
||||
camera-orbit={`${cameraAzimuth}deg ${cameraPolar}deg ${cameraZoom}%`}
|
||||
on:progress={onProgress}
|
||||
on:progress={updateModelProgress}
|
||||
>
|
||||
<!--Buttons zum Steuern-->
|
||||
<div
|
||||
@@ -85,24 +83,6 @@
|
||||
class:opacity-0={!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">
|
||||
<!--3 Buttons-->
|
||||
<div class="p-2">
|
||||
|
||||
Reference in New Issue
Block a user
import statements oben im file platzieren