adds preview image to gltf

static/assets/ic_get_app_white_24dp.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF">
+    <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>

utils/utils.py

@@ -47,12 +47,16 @@ def get_directory_content(dir_path):
 
 
 def find_skybox_image(dir):
-    print("find_skybox_image(dir): ", dir)
     for p in Path(dir).iterdir():
         extension = Path(p).suffix
-        print(f"sky-box{extension}")
+        if str(Path(p)).endswith(f"sky-box-image{extension}"):
-        if str(Path(p)).endswith(f"sky-box{extension}"):
+            return str(p)
-            print("return str(p): ", str(p))
+    return None
+
+def find_pre_loader_image(dir):
+    for p in Path(dir).iterdir():
+        extension = Path(p).suffix
+        if str(Path(p)).endswith(f"pre-load-image{extension}"):
             return str(p)
     return None
 
@@ -92,6 +96,10 @@ def get_object(file_path, result={}):
         if skybox_path:
             skybox_path = str(skybox_path).replace(OBJECT_DIR, '')
             result['skybox'] = f"/objects{skybox_path}"
+        preloader_path = find_pre_loader_image(file_dir)
+        if preloader_path:
+            preloader_path = str(preloader_path).replace(OBJECT_DIR, '')
+            result['preloader'] = f"/objects{preloader_path}"
         return result
     if extension == "obj":
         result['type']="obj"

views/google.tpl

@@ -9,6 +9,44 @@ model-viewer {
 }
 </style>
 
+%if 'preloader' in object:
+<style>
+  #lazy-load-poster {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background-image: url("{{ object['preloader'] }}");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+  #button-load {
+    background-image: url("/static/assets/ic_get_app_white_24dp.svg");
+    background-repeat: no-repeat;
+    background-size: 24px 24px;
+    background-position: 6% 50%;
+    background-color: #000;
+    color: white;
+    cursor: pointer;
+    border-radius: 6px;
+    display: inline-block;
+    padding: 10px 18px 9px 40px;
+    font-weight: 500;
+    box-shadow: 0 0 8px rgba(0,0,0,.2), 0 0 4px rgba(0,0,0,.25);
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    z-index: 100;
+  }
+</style>
+%end
+
+
+
+
 <h3>
   <i class="fa fa-folder-o" aria-hidden="true"></i>
   <a href="/list/{{ current_dir.rstrip('/') }}">objects/{{current_dir}}</a>
@@ -21,16 +59,22 @@ model-viewer {
 </h4>
 
 <div class="model-wrap">
-<div id="model">
+<div id="model" style="display:absolute">
-    <model-viewer src="{{ object['urls'][0] }}"
+    <model-viewer id="3d-model"
+                  reveal="interaction"
+                  src="{{ object['urls'][0] }}"
                   alt="A 3D model of a robot"
                   auto-rotate=""
                   camera-controls=""
                   background-color="#455A64"
                   %if 'skybox' in object:
-                  skybox-image="{{ object['skybox']}}"
+                  skybox-image="{{ object['skybox'] }}"
                   %end
     >
+    %if 'preloader' in object:
+    <div id="lazy-load-poster" slot="poster"></div>
+    <div id="button-load" slot="poster">Load 3D Model</div>
+    %end
     </model-viewer>
 </div>
 </div>