113 lines
2.4 KiB
Smarty
113 lines
2.4 KiB
Smarty
% 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="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>
|