Gltf Plugin Sakura Loader (#15)

Gltf Plugin Sakura Loader
2gis · Nov 20, 2023 · de1e243 · de1e243
1 parent 3164bb0
commit de1e243
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 3 deletions.
diff --git a/src/gltf-plugin-sakura/index.html b/src/gltf-plugin-sakura/index.html
@@ -17,17 +17,74 @@
         <style>
             html,
             body,
-            #container {
+            #container,
+            #curtain,
+            .wrap {
                 margin: 0;
                 width: 100%;
                 height: 100%;
                 overflow: hidden;
             }
+
+            #curtain {
+                display: none;
+                position: absolute;
+                top: 0;
+                left: 0;
+                backdrop-filter: blur(10px);
+            }
+
+            .wrap {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+            }
+
+            .wrap > p {
+                font-family: Arial, Helvetica, sans-serif;
+                font-size: 24px;
+                user-select: none;
+            }
+
+            .loader {
+                width: 16px;
+                height: 16px;
+                border-radius: 50%;
+                display: block;
+                margin: 15px auto;
+                position: relative;
+                background: #fff;
+                box-shadow: -24px 0 #fff, 24px 0 #fff;
+                box-sizing: border-box;
+                animation: shadowPulse 2s linear infinite;
+            }
+
+            @keyframes shadowPulse {
+                33% {
+                    background: #fff;
+                    box-shadow: -24px 0 #000, 24px 0 #fff;
+                }
+                66% {
+                    background: #000;
+                    box-shadow: -24px 0 #fff, 24px 0 #fff;
+                }
+                100% {
+                    background: #fff;
+                    box-shadow: -24px 0 #fff, 24px 0 #000;
+                }
+            }
         </style>
     </head>
 
     <body>
         <div id="container"></div>
+        <div id="curtain">
+            <div class="wrap">
+                <p>Models are loading. Please, wait...</p>
+                <span class="loader"></span>
+            </div>
+        </div>
         <script src="https://mapgl.2gis.com/api/js/v1"></script>
         <script src="https://unpkg.com/@2gis/mapgl-gltf@^1/dist/bundle.js"></script>
         <script src="https://unpkg.com/mapgl-snow"></script>

diff --git a/src/gltf-plugin-sakura/index.js b/src/gltf-plugin-sakura/index.js
@@ -8,6 +8,10 @@ const map = new mapgl.Map('container', {
     maxZoom: 21,
 });
 
+const needPreload = new URL(location.href).searchParams.has('preload');
+const curtain = document.getElementById('curtain');
+curtain.style.display = 'block';
+
 function sleep(time) {
     return new Promise((resolve) => {
         setTimeout(resolve, time);
@@ -100,7 +104,7 @@ async function runScenario(scenario) {
 }
 
 const plugin = new mapgl.GltfPlugin(map, {
-    modelsLoadStrategy: 'dontWaitAll',
+    modelsLoadStrategy: needPreload ? 'waitAll' : 'dontWaitAll',
     ambientLight: { color: '#ffffff', intencity: 3 },
     modelsBaseUrl: 'https://disk.2gis.com/digital-twin/models_s3/realty_ads/sakura/',
     poiConfig: {
@@ -2679,7 +2683,9 @@ const realtyScene = [
     },
 ];
 
-plugin.addRealtyScene(realtyScene);
+plugin.addRealtyScene(realtyScene).then(() => {
+    curtain.style.display = 'none';
+});
 
 const labelIds = [
     '43556',