adds preview image to gltf

This commit is contained in:
buttle 2021-06-20 16:18:51 +02:00
parent ec58f719f0
commit 4c3dfe5d49
5 changed files with 63 additions and 7 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 97 KiB

View File

Before

Width:  |  Height:  |  Size: 914 KiB

After

Width:  |  Height:  |  Size: 914 KiB

View File

@ -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>

After

Width:  |  Height:  |  Size: 210 B

View File

@ -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{extension}"):
print("return str(p): ", str(p))
if str(Path(p)).endswith(f"sky-box-image{extension}"):
return 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"

View File

@ -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">
<model-viewer src="{{ object['urls'][0] }}"
<div id="model" style="display:absolute">
<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>