% rebase('base.tpl')

% include('_nav.tpl', current_dir=current_dir, object=object)

<script src="/static/vendor/vue/vue.js"></script>
<script src="/static/vendor/vue-3d-model/vue-3d-model.umd.js"></script>

<div class="model-wrap">
  <div id="object">
    %if object['type'] == "gltf":
      <model-gltf
          src="{{ object['urls'][0] }}"
          @on-mousemove="onMouseMove"
          >
      </model-gltf>
  	%end
    %if object['type'] == "obj":
      <model-obj
          src="{{ object['urls'][0] }}"
          >
      </model-obj>
  	%end
    %if object['type'] == "fbx":
      <model-fbx
          src="{{ object['urls'][0] }}"
          >
      </model-fbx>
  	%end
    %if object['type'] == "stl":
      <model-stl
          src="{{ object['urls'][0] }}"
          >
      </model-stl>
  	%end
    %if object['type'] == "json":
    <model-three
            :backgroundAlpha="0"
            @on-load="onLoad"
            :rotation="rotation"
            src="{{ object['urls'][0] }}"
          >
    </model-three>
    %end
    %if object['type'] == "ply":
    <model-ply
            src="{{ object['urls'][0] }}"
            :backgroundAlpha="0"
            @on-load="onLoad"
            :rotation="rotation"

          >
    </model-ply>
    %end
    %if object['type'] == "dae":
    <model-collada
            src="{{ object['urls'][0] }}"
            :rotation="rotation"
            @on-load="onLoad"
          >
    </model-collada>
    %end
    %if object['type'] == "obj-mtl":
      <model-obj
          src="{{ object['urls'][0] }}"
          mtl="{{ object['urls'][1] }}"
          :backgroundAlpha="0"
          @on-load="onLoad"
          :height="height"
          background-color="white"
          >
      </model-obj>
  	%end
  </div>
</div>

<script>

new Vue({
    el: "#object",
    data: {
        height: 500,
        loading: true,
        rotation: {
          x: -Math.PI / 2,
          y: 0,
          z: 0,
        },
        cameraRotation: { x: 3, y: 2, z: -1 },
    },
    methods: {
      onLoad () {
          this.loading = true;
          //this.rotate();
      },
      rotate () {
          this.rotation.z += 0.01;
          requestAnimationFrame( this.rotate );
      }
    },
})


</script>