3D-tester/views/vue-3d.tpl

% rebase('base.tpl')

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

<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="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="green"
          >
      </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>