better glbs model loading

src/App.vue

@@ -9,7 +9,7 @@ import Models from "./models/Models.vue";
 import {VLayout, VMain, VToolbarTitle} from "vuetify/lib/components";
 import {settings} from "./misc/settings";
 import {NetworkManager, NetworkUpdateEvent} from "./misc/network";
-import {newSceneMgrData, SceneMgr, SceneManagerData} from "./misc/scene";
+import {SceneManagerData, SceneMgr} from "./misc/scene";
 
 // NOTE: The ModelViewer library is big (THREE.js), so we split it and import it asynchronously
 const ModelViewerWrapper = defineAsyncComponent({
@@ -51,7 +51,7 @@ for (let model of settings.preloadModels) {
     </sidebar>
 
     <!-- The right collapsible sidebar has the list of tools -->
-    <sidebar :opened-init="openSidebarsByDefault" side="right" :width="120">
+    <sidebar :opened-init="openSidebarsByDefault" side="right" :width="48 * 3 /* buttons */ + 1">
       <template #toolbar>
         <v-toolbar-title>Tools</v-toolbar-title>
       </template>

src/misc/settings.ts

@@ -2,9 +2,9 @@
 export const settings = {
     preloadModels: [
         // @ts-ignore
-        new URL('../../assets/fox.glb', import.meta.url).href,
+        // 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/"
     ],

src/models/glb/glbs.ts

@@ -18,7 +18,7 @@ export async function* splitGlbs(readerSrc: ReadableStream<Uint8Array>): AsyncGe
         finalBuffer.set(buffer4Bytes);
         finalBuffer.set(remaining, buffer4Bytes.length);
         yield finalBuffer
-    } else if (magic !== "GLBS") {
+    } else if (magic === "GLBS") {
         // First, we read the number of chunks (can be 0xFFFFFFFF if the number of chunks is unknown).
         [buffer4Bytes, buffered] = await readN(reader, buffered, 4);
         let numChunks = new DataView(buffer4Bytes.buffer).getUint32(0, true);
@@ -28,7 +28,8 @@ export async function* splitGlbs(readerSrc: ReadableStream<Uint8Array>): AsyncGe
             // - Read length
             [buffer4Bytes, buffered] = await readN(reader, buffered, 4);
             if (buffer4Bytes.length === 0) {
-                if (numChunks != 0xFFFFFFFF) throw new Error('Unexpected end of stream while reading chunk length');
+                if (numChunks != 0xFFFFFFFF) throw new Error('Unexpected end of stream while reading chunk length:'+
+                    ' expected ' + (numChunks - i) + ' more chunks');
                 else break // We reached the end of the stream of unknown length, so we stop reading chunks.
             }
             let length = new DataView(buffer4Bytes.buffer).getUint32(0, true);
@@ -41,7 +42,8 @@ export async function* splitGlbs(readerSrc: ReadableStream<Uint8Array>): AsyncGe
     reader.releaseLock()
 }
 
-/** Reads exactly `n` bytes from the reader and returns them as a Uint8Array.
+/**
+ * Reads up to `n` bytes from the reader and returns them as a Uint8Array.
  * An over-read is possible, in which case the returned array will still have `n` bytes and the over-read bytes will be
  * returned. They should be provided to the next call to `readN` to avoid losing data.
  */

src/tools/Tools.vue

@@ -59,6 +59,18 @@ function centerCamera() {
   <v-btn icon="" @click="centerCamera">
     <svg-icon type="mdi" :path="mdiCrosshairsGps"/>
   </v-btn>
+  <v-btn icon="" @click="centerCamera">
+    <svg-icon type="mdi" :path="mdiCrosshairsGps"/>
+  </v-btn>
+  <v-btn icon="" @click="centerCamera">
+    <svg-icon type="mdi" :path="mdiCrosshairsGps"/>
+  </v-btn>
+  <v-btn icon="" @click="centerCamera">
+    <svg-icon type="mdi" :path="mdiCrosshairsGps"/>
+  </v-btn>
+  <v-btn icon="" @click="centerCamera">
+    <svg-icon type="mdi" :path="mdiCrosshairsGps"/>
+  </v-btn>
 </template>
 
 <!--suppress CssUnusedSymbol -->