3D-tester/views/google.tpl

% rebase('base.tpl')

<style>
model-viewer {
    width: 500px;
    height: 500px;
    outline: none;
    background-color: transparent;
}
</style>

<h3>
  <i class="fa fa-folder-o" aria-hidden="true"></i>
  <a href="/list/{{ current_dir.rstrip('/') }}">objects/{{current_dir}}</a>
</h3>
<h4>
  <span style="text-transform: uppercase">
    {{ object['type'] }}:
  </span>
  {{name}}
</h4>

<div class="model-wrap">
<div id="model">
    <model-viewer 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']}}"
                  %end
    >
    </model-viewer>
</div>
</div>


<script type="module" src="/static/vendor/google/model-viewer.js"></script>