diff --git a/src/App.vue b/src/App.vue
index f121dee..7468e99 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,3 +1,4 @@
+
@@ -26,8 +38,8 @@ let modelSrc: Ref = ref(settings.preloadModels[0]);
-
-
+
+
@@ -35,7 +47,7 @@ let modelSrc: Ref = ref(settings.preloadModels[0]);
Models
-
+
@@ -43,7 +55,7 @@ let modelSrc: Ref = ref(settings.preloadModels[0]);
Tools
-
+
diff --git a/src/misc/network.ts b/src/misc/network.ts
index 8b13789..88ba091 100644
--- a/src/misc/network.ts
+++ b/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);
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/misc/scene.ts b/src/misc/scene.ts
new file mode 100644
index 0000000..b15ccfa
--- /dev/null
+++ b/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 {
+ 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;
+ }
+}
\ No newline at end of file
diff --git a/src/misc/settings.ts b/src/misc/settings.ts
index 370fed9..442d53f 100644
--- a/src/misc/settings.ts
+++ b/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,
diff --git a/src/models/Models.vue b/src/models/Models.vue
index 9c868e4..65a31f8 100644
--- a/src/models/Models.vue
+++ b/src/models/Models.vue
@@ -1,14 +1,10 @@
-
+
? F ? E ? V | Model Name
Content
diff --git a/src/tools/OrientationGizmo.vue b/src/tools/OrientationGizmo.vue
index 526d489..7d318a8 100644
--- a/src/tools/OrientationGizmo.vue
+++ b/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
diff --git a/src/tools/Tools.vue b/src/tools/Tools.vue
index d91e07b..88802f9 100644
--- a/src/tools/Tools.vue
+++ b/src/tools/Tools.vue
@@ -1,21 +1,18 @@
-
+
{{ toggleProjectionText }}
-
+
diff --git a/src/viewer/ModelViewerWrapper.vue b/src/viewer/ModelViewerWrapper.vue
index d530e10..36732e8 100644
--- a/src/viewer/ModelViewerWrapper.vue
+++ b/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(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)
- );
+ })
+ }
+ });
});