basic viewer assets (all integrated in viewer.js)

Viewer/assets/templates/default/defaultTemplate.html

@@ -0,0 +1,24 @@
+<style>
+    loading-screen {
+        display: flex;
+        flex: 1;
+        z-index: 100;
+        justify-content: center;
+        align-items: center;
+        background-color: black;
+    }
+
+    viewer {
+        display: none;
+        position: relative;
+        overflow: hidden;
+        /* Start stage */
+        flex: 1;
+        z-index: 1;
+        justify-content: center;
+        align-items: center;
+    }
+</style>
+
+<viewer></viewer>
+<loading-screen></loading-screen>

Viewer/assets/templates/default/defaultViewer.html

@@ -0,0 +1,27 @@
+<style>
+    .babylonjs-canvas {
+        flex: 1;
+        width: 100%;
+        height: 100%;
+    }
+
+    nav-bar {
+        position: absolute;
+        height: 80px;
+        width: 100%;
+        bottom: 0;
+        opacity: 0.3;
+        background-color: black;
+        color: white;
+        transition: 1s;
+
+        align-items: center;
+        justify-content: center;
+        display: flex;
+    }
+</style>
+
+<canvas class="babylonjs-canvas" id="{{canvasId}}">
+</canvas>
+
+<nav-bar></nav-bar>

Viewer/assets/templates/default/loadingScreen.html

@@ -0,0 +1,26 @@
+<style>
+    img.loading-image {
+        -webkit-animation: spin 2s linear infinite;
+        animation: spin 2s linear infinite;
+    }
+
+    @-webkit-keyframes spin {
+        0% {
+            -webkit-transform: rotate(0deg);
+        }
+        100% {
+            -webkit-transform: rotate(360deg);
+        }
+    }
+
+    @keyframes spin {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+</style>
+
+<img class="loading-image" src="{{loadingImage}}">

Viewer/assets/templates/default/navbar.html

@@ -0,0 +1 @@
+<span>BabylonJS Viewer</span>