some error handling in viewer

src/server/viewer/src/main.ts

@@ -56,25 +56,30 @@ dirLight.position.set(10, 10, 10);
 scene.add(dirLight);
 
 let map;
+let base_url = "";
 
 const urlParams = new URLSearchParams(window.location.search);
 if (window.location.pathname.startsWith('/view/')) {
     map = window.location.pathname.substring('/view/'.length);
 } else {
     map = urlParams.get('map');
+    base_url = "https://gltf.demos.tf"
 }
 const textureScale = urlParams.get('texture_scale') || 0.25;
 const textures = urlParams.get('textures') || true;
 console.log(map);
 
-loader.load(`/gltf/${map}.glb?texture_scale=${textureScale}&textures=${textures}`, (gltf) => {
+loader.load(`${base_url}/gltf/${map}.glb?texture_scale=${textureScale}&textures=${textures}`, (gltf) => {
     document.body.classList.remove('loading');
     gltf.scene.traverse(child => {
         if ((child as THREE.Mesh).material) {
             ((child as THREE.Mesh).material as any as THREE.MaterialJSON).metalness = 0;
         }
     });
     scene.add(gltf.scene)
+}, () => {
+}, (e) => {
+    (document.getElementById('loading') as HTMLElement).textContent = `Failed to load map: ${e}`;
 })
 
 const stats = new Stats()

src/server/viewer/src/style.css

@@ -22,7 +22,7 @@ body.loading #loading {
 #startButton {
     height: 100px;
     width: 350px;
-    margin: -50px -125px;
+    margin: -50px -175px;
     position: absolute;
     top: 50%;
     left: 50%;
@@ -31,10 +31,11 @@ body.loading #loading {
 }
 
 #loading {
+    text-align: center;
     display: none;
     height: 100px;
-    width: 250px;
-    margin: -50px -125px;
+    width: 100vw;
+    margin: -50px -50vw;
     position: absolute;
     top: 50%;
     left: 50%;