lots of improvements

src/App.vue

@@ -1,3 +1,4 @@
+<!--suppress SillyAssignmentJS -->
 <script setup lang="ts">
 import {defineAsyncComponent, ref, Ref} from "vue";
 import Sidebar from "./misc/Sidebar.vue";
@@ -6,8 +7,9 @@ import ModelViewerOverlay from "./viewer/ModelViewerOverlay.vue";
 import Tools from "./tools/Tools.vue";
 import Models from "./models/Models.vue";
 import {VLayout, VMain, VToolbarTitle} from "vuetify/lib/components";
-import type {ModelViewerInfo} from "./viewer/ModelViewerWrapper.vue";
 import {settings} from "./misc/settings";
+import {NetworkManager, NetworkUpdateEvent} from "./misc/network";
+import {newSceneMgrData, SceneMgr, SceneManagerData} from "./misc/scene";
 
 // NOTE: The ModelViewer library is big (THREE.js), so we split it and import it asynchronously
 const ModelViewerWrapper = defineAsyncComponent({
@@ -17,8 +19,18 @@ const ModelViewerWrapper = defineAsyncComponent({
 });
 
 let openSidebarsByDefault: Ref<boolean> = ref(window.innerWidth > 1200);
-let modelViewerInfo: Ref<typeof ModelViewerInfo | null> = ref(null);
-let modelSrc: Ref<string | Uint8Array> = ref(settings.preloadModels[0]);
+
+let sData: Ref<SceneManagerData> = SceneMgr.newData();
+
+// Set up the load model event listener
+let networkMgr = new NetworkManager();
+networkMgr.addEventListener('update', (model: NetworkUpdateEvent) => {
+  sData.value.viewerSrc = model.url;
+});
+// Start loading all configured models ASAP
+for (let model of settings.preloadModels) {
+  networkMgr.load(model);
+}
 </script>
 
 <template>
@@ -26,8 +38,8 @@ let modelSrc: Ref<string | Uint8Array> = ref(settings.preloadModels[0]);
 
     <!-- The main content of the app is the model-viewer with the SVG "2D" overlay -->
     <v-main id="main">
-      <model-viewer-wrapper :src="modelSrc" @load-viewer="(args) => modelViewerInfo = args"/>
-      <model-viewer-overlay v-if="modelViewerInfo"/>
+      <model-viewer-wrapper :src="sData.viewerSrc" @load="(i) => SceneMgr.onload(sData, i)"/>
+      <model-viewer-overlay v-if="sData.viewer !== null"/>
     </v-main>
 
     <!-- The left collapsible sidebar has the list of models -->
@@ -35,7 +47,7 @@ let modelSrc: Ref<string | Uint8Array> = ref(settings.preloadModels[0]);
       <template #toolbar>
         <v-toolbar-title>Models</v-toolbar-title>
       </template>
-      <models :modelViewerInfo="modelViewerInfo"/>
+      <models/>
     </sidebar>
 
     <!-- The right collapsible sidebar has the list of tools -->
@@ -43,7 +55,7 @@ let modelSrc: Ref<string | Uint8Array> = ref(settings.preloadModels[0]);
       <template #toolbar>
         <v-toolbar-title>Tools</v-toolbar-title>
       </template>
-      <tools :modelViewerInfo="modelViewerInfo"/>
+      <tools :scene-mgr-data="sData"/>
     </sidebar>
 
   </v-layout>

src/misc/network.ts

@@ -1 +1,63 @@
+export class NetworkUpdateEvent extends Event {
+    name: string;
+    url: string;
+    constructor(name: string, url: string) {
+        super("update");
+        this.name = name;
+        this.url = url;
+    }
+}
 
+/** Listens for updates and emits events when a model changes */
+export class NetworkManager extends EventTarget {
+    private knownObjectHashes: { [name: string]: string } = {};
+
+    /**
+     * Tries to load a new model (.glb or .glbs) from the given URL.
+     *
+     * If the URL uses the websocket protocol (ws:// or wss://), the server will be continuously monitored for changes.
+     * In this case, it will only trigger updates if the name or hash of any model changes.
+     *
+     * Updates will be emitted as "update" events, including the download URL and the model name.
+     */
+    async load(url: string) {
+        if (url.startsWith("ws://") || url.startsWith("wss://")) {
+            this.monitorWebSocket(url);
+        } else {
+            // Get the last part of the URL as the "name" of the model
+            let name = url.split("/").pop();
+            name = name?.split(".")[0] || `unknown-${Math.random()}`;
+            let prevHash = this.knownObjectHashes[name];
+            // Use a head request to get the hash of the file
+            let response = await fetch(url, { method: "HEAD" });
+            let hash = response.headers.get("etag");
+            // Only trigger an update if the hash has changed
+            if (hash !== prevHash) {
+                this.knownObjectHashes[name] = hash;
+                this.dispatchEvent(new NetworkUpdateEvent(name, url));
+            }
+        }
+    }
+
+    private monitorWebSocket(url: string) {
+        let ws = new WebSocket(url);
+        ws.onmessage = (event) => {
+            let data = JSON.parse(event.data);
+            console.debug("WebSocket message", data);
+            let name = data.name;
+            let prevHash = this.knownObjectHashes[name];
+            let hash = data.hash;
+            if (hash !== prevHash) {
+                this.knownObjectHashes[name] = hash;
+                this.dispatchEvent(new NetworkUpdateEvent(name, data.url));
+            }
+        };
+        ws.onerror = (event) => {
+            console.error("WebSocket error", event);
+        }
+        ws.onclose = () => {
+            console.trace("WebSocket closed, reconnecting very soon");
+            setTimeout(() => this.monitorWebSocket(url), 500);
+        }
+    }
+}

src/misc/scene.ts

@@ -0,0 +1,41 @@
+import type {ModelViewerElement} from '@google/model-viewer';
+import type {ModelScene} from "@google/model-viewer/lib/three-components/ModelScene";
+import {ref, Ref} from 'vue';
+import {Document} from '@gltf-transform/core';
+import {ModelViewerInfo} from "./viewer/ModelViewerWrapper.vue";
+
+type SceneManagerData = {
+    /** When updated, forces the viewer to load a new model replacing the current one */
+    viewerSrc: string | null
+
+    /** The model viewer HTML element with all APIs */
+    viewer: ModelViewerElement | null
+    /** The (hidden) scene of the model viewer */
+    viewerScene: ModelScene | null
+
+    /** The currently shown document, which must match the viewerSrc. */
+    document: Document | null
+}
+
+/** This class helps manage SceneManagerData. All methods are static to support reactivity... */
+export class SceneMgr {
+    private constructor() {
+    }
+
+    /** Creates a new SceneManagerData object */
+    static newData(): Ref<SceneManagerData> {
+        return ref({
+            viewerSrc: null,
+            viewer: null,
+            viewerScene: null,
+            document: null,
+        });
+    }
+
+    /** Should be called any model finishes loading successfully (after a viewerSrc update) */
+    static onload(data: SceneManagerData, info: typeof ModelViewerInfo) {
+        console.log("ModelViewer loaded", info);
+        data.viewer = info.viewer;
+        data.viewerScene = info.scene;
+    }
+}

src/misc/settings.ts

@@ -4,9 +4,9 @@ export const settings = {
         // @ts-ignore
         new URL('../../assets/fox.glb', import.meta.url).href,
         // @ts-ignore
-        new URL('../../assets/logo.glbs', import.meta.url).href,
+        // new URL('../../assets/logo.glbs', import.meta.url).href,
         // Websocket URLs automatically listen for new models from the python backend
-        "ws://localhost:8080/"
+        //"ws://localhost:8080/"
     ],
     // ModelViewer settings
     autoplay: true,

src/models/Models.vue

@@ -1,14 +1,10 @@
 <script setup lang="ts">
 import {VExpansionPanel, VExpansionPanels, VExpansionPanelText, VExpansionPanelTitle} from "vuetify/lib/components";
-
-const props = defineProps({
-  modelViewerInfo: Object
-});
 </script>
 
 <template>
   <v-expansion-panels>
-    <v-expansion-panel key="model-id">
+    <v-expansion-panel key="model-id" >
       <v-expansion-panel-title>? F ? E ? V | Model Name</v-expansion-panel-title>
       <v-expansion-panel-text>Content</v-expansion-panel-text>
     </v-expansion-panel>

src/tools/OrientationGizmo.vue

@@ -9,9 +9,7 @@ import {Matrix4} from "three/src/math/Matrix4.js";
 
 globalThis.THREE = {Vector3, Matrix4} as any // HACK: Required for the gizmo to work
 
-const props = defineProps({
-  scene: Object
-});
+const props = defineProps<{ scene: ModelScene }>();
 
 function createGizmo(expectedParent: HTMLElement, scene: ModelScene): HTMLElement {
   // noinspection SpellCheckingInspection

src/tools/Tools.vue

@@ -1,21 +1,18 @@
 <script setup lang="ts">
-import {VBtn, VIcon} from "vuetify/lib/components";
+import {VBtn} from "vuetify/lib/components";
 import {ref} from "vue";
 import OrientationGizmo from "./OrientationGizmo.vue";
-import type {ModelScene} from "@google/model-viewer/lib/three-components/ModelScene";
 import {OrthographicCamera} from "three/src/cameras/OrthographicCamera";
 import {mdiCrosshairsGps, mdiProjector} from '@mdi/js'
 import SvgIcon from '@jamescoyle/vue-icon';
+import {SceneManagerData} from "../misc/scene";
+import type {ModelViewerElement} from '@google/model-viewer';
 
-
-const props = defineProps<{
-  modelViewerInfo: { scene: ModelScene } | null
-}>();
-
+let props = defineProps<{ sceneMgrData: SceneManagerData }>();
 
 function syncOrthoCamera(force: boolean) {
-  if (!props.modelViewerInfo) return;
-  let scene = props.modelViewerInfo.scene
+  let scene = props.sceneMgrData.viewerScene;
+  if (!scene) return;
   let perspectiveCam = (scene as any).__perspectiveCamera;
   if (force || perspectiveCam && scene.camera != perspectiveCam) {
     // Get zoom level from perspective camera
@@ -31,8 +28,8 @@ function syncOrthoCamera(force: boolean) {
 
 let toggleProjectionText = ref('PERSP'); // Default to perspective camera
 function toggleProjection() {
-  if (!props.modelViewerInfo) return;
-  let scene = props.modelViewerInfo.scene
+  let scene = props.sceneMgrData.viewerScene;
+  if (!scene) return;
   let prevCam = scene.camera;
   let wasPerspectiveCamera = prevCam.isPerspectiveCamera;
   if (wasPerspectiveCamera) {
@@ -46,14 +43,20 @@ function toggleProjection() {
   toggleProjectionText.value = wasPerspectiveCamera ? 'ORTHO' : 'PERSP';
 }
 
+function centerCamera() {
+  let viewer: ModelViewerElement = props.sceneMgrData.viewer;
+  if (!viewer) return;
+  viewer.updateFraming();
+}
+
 </script>
 
 <template>
-  <orientation-gizmo v-if="props.modelViewerInfo" :scene="props.modelViewerInfo.scene"/>
+  <orientation-gizmo :scene="props.sceneMgrData.viewerScene" v-if="props.sceneMgrData.viewerScene !== null"/>
   <v-btn icon="" @click="toggleProjection"><span class="icon-detail">{{ toggleProjectionText }}</span>
     <svg-icon type="mdi" :path="mdiProjector"></svg-icon>
   </v-btn>
-  <v-btn icon="" @click=""> <!-- TODO: Center camera -->
+  <v-btn icon="" @click="centerCamera">
     <svg-icon type="mdi" :path="mdiCrosshairsGps"/>
   </v-btn>
 </template>

src/viewer/ModelViewerWrapper.vue

@@ -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>