arcHIVE-tech
/
3D-tester
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

hides model until preload image has loaded

This commit is contained in:
buttle 2021-06-20 17:02:13 +02:00
parent 4c3dfe5d49
commit 8e61892290
3 changed files with 18 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
static/css/3d-tester.css
View File

@ -2,7 +2,8 @@
.model-wrap { .model-wrap {
padding: 1em; padding: 1em;
background-color: lightgray; display: none;
/*background-color: lightgray;*/
} }
#object { #object {

2
static/jquery-3.6.0.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

24
views/google.tpl
View File

@ -1,11 +1,13 @@
% rebase('base.tpl') % rebase('base.tpl')
<script src="/static/jquery-3.6.0.min.js"></script>
<style> <style>
model-viewer { model-viewer {
width: 500px; width: 500px;
height: 500px; height: 500px;
outline: none; outline: none;
background-color: transparent; background-color: transparent;
} }
</style> </style>
@ -44,9 +46,6 @@ model-viewer {
</style> </style>
%end %end
<h3> <h3>
<i class="fa fa-folder-o" aria-hidden="true"></i> <i class="fa fa-folder-o" aria-hidden="true"></i>
<a href="/list/{{ current_dir.rstrip('/') }}">objects/{{current_dir}}</a> <a href="/list/{{ current_dir.rstrip('/') }}">objects/{{current_dir}}</a>
@ -59,7 +58,7 @@ model-viewer {
</h4> </h4>
<div class="model-wrap"> <div class="model-wrap">
<div id="model" style="display:absolute"> <div id="model" style="display:absolute">
<model-viewer id="3d-model" <model-viewer id="3d-model"
reveal="interaction" reveal="interaction"
src="{{ object['urls'][0] }}" src="{{ object['urls'][0] }}"
@ -76,8 +75,13 @@ model-viewer {
<div id="button-load" slot="poster">Load 3D Model</div> <div id="button-load" slot="poster">Load 3D Model</div>
%end %end
</model-viewer> </model-viewer>
</div>
</div> </div>
</div>
<script type="module" src="/static/vendor/google/model-viewer.js"></script> <script type="module" src="/static/vendor/google/model-viewer.js"></script>
<script>
jQuery(function($) {
$(".model-wrap").show();
});
</script>