lots of improvements

This commit is contained in:
Yeicor
2024-02-17 17:37:15 +01:00
parent 52f6349c34
commit a0b8cfe2a8
8 changed files with 154 additions and 39 deletions

View File

@@ -3,13 +3,15 @@ import {settings} from "../misc/settings";
import {ModelViewerElement} from '@google/model-viewer';
import {onMounted, ref} from "vue";
import {$scene} from "@google/model-viewer/lib/model-viewer-base";
import {ModelScene} from "@google/model-viewer/lib/three-components/ModelScene";
import type {ModelScene} from "@google/model-viewer/lib/three-components/ModelScene";
export type ModelViewerInfo = { viewer: ModelViewerElement, scene: ModelScene };
let _ = ModelViewerElement; // HACK: Needed to avoid tree shaking
const emit = defineEmits(['load-viewer']);
const emit = defineEmits<{
load: [info: ModelViewerInfo]
}>()
const props = defineProps({
src: String
@@ -17,21 +19,22 @@ const props = defineProps({
let viewer = ref<ModelViewerElement | null>(null);
onMounted(() => {
viewer.value.addEventListener('load', () =>
emit('load-viewer', {
viewer.value.addEventListener('load', () => {
if (viewer.value) {
emit('load', {
viewer: viewer.value,
scene: viewer.value[$scene] as ModelScene,
} as ModelViewerInfo)
);
})
}
});
});
</script>
<template>
<model-viewer ref="viewer"
style="width: 100%; height: 100%" :src="props.src" alt="The 3D model(s)" camera-controls
camera-orbit="30deg 75deg auto" max-camera-orbit="Infinity 180deg auto"
min-camera-orbit="-Infinity 0deg auto"
style="width: 100%; height: 100%" :src="props.src" alt="The 3D model(s)" camera-controls camera-orbit="30deg 75deg auto"
max-camera-orbit="Infinity 180deg auto" min-camera-orbit="-Infinity 0deg auto" disable-tap
:exposure="settings.exposure" :shadow-intensity="settings.shadowIntensity" interaction-prompt="none"
:autoplay="settings.autoplay" :ar="settings.arModes.length > 0" :ar-modes="settings.arModes"
:skybox-image="settings.background" :environment-image="settings.background"></model-viewer>