passes vue js data to component
This commit is contained in:
parent
081063647d
commit
16d8616f16
|
@ -4,3 +4,7 @@
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
background-color: lightgray;
|
background-color: lightgray;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#object {
|
||||||
|
height: 500px;
|
||||||
|
}
|
||||||
|
|
|
@ -23,13 +23,6 @@
|
||||||
>
|
>
|
||||||
</model-gltf>
|
</model-gltf>
|
||||||
%end
|
%end
|
||||||
%if object['type'] == "obj-mtl":
|
|
||||||
<model-obj
|
|
||||||
src="{{ object['urls'][0] }}"
|
|
||||||
mtl="{{ object['urls'][1] }}"
|
|
||||||
>
|
|
||||||
</model-obj>
|
|
||||||
%end
|
|
||||||
%if object['type'] == "obj":
|
%if object['type'] == "obj":
|
||||||
<model-obj
|
<model-obj
|
||||||
src="{{ object['urls'][0] }}"
|
src="{{ object['urls'][0] }}"
|
||||||
|
@ -48,15 +41,6 @@
|
||||||
>
|
>
|
||||||
</model-stl>
|
</model-stl>
|
||||||
%end
|
%end
|
||||||
%if object['type'] == "dae":
|
|
||||||
<model-collada
|
|
||||||
:backgroundAlpha="0"
|
|
||||||
@on-load="onLoad"
|
|
||||||
:rotation="rotation"
|
|
||||||
src="{{ object['urls'][0] }}"
|
|
||||||
>
|
|
||||||
</model-collada>
|
|
||||||
%end
|
|
||||||
%if object['type'] == "json":
|
%if object['type'] == "json":
|
||||||
<model-three
|
<model-three
|
||||||
:backgroundAlpha="0"
|
:backgroundAlpha="0"
|
||||||
|
@ -68,19 +52,59 @@
|
||||||
%end
|
%end
|
||||||
%if object['type'] == "ply":
|
%if object['type'] == "ply":
|
||||||
<model-ply
|
<model-ply
|
||||||
|
src="{{ object['urls'][0] }}"
|
||||||
:backgroundAlpha="0"
|
:backgroundAlpha="0"
|
||||||
@on-load="onLoad"
|
@on-load="onLoad"
|
||||||
:rotation="rotation"
|
:rotation="rotation"
|
||||||
src="{{ object['urls'][0] }}"
|
|
||||||
>
|
>
|
||||||
</model-ply>
|
</model-ply>
|
||||||
%end
|
%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"
|
||||||
|
>
|
||||||
|
</model-obj>
|
||||||
|
%end
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
new Vue({
|
new Vue({
|
||||||
el: "#object"
|
el: "#object",
|
||||||
|
data: {
|
||||||
|
height: 500,
|
||||||
|
loading: true,
|
||||||
|
rotation: {
|
||||||
|
x: -Math.PI / 2,
|
||||||
|
y: 0,
|
||||||
|
z: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onLoad () {
|
||||||
|
this.loading = true;
|
||||||
|
//this.rotate();
|
||||||
|
},
|
||||||
|
rotate () {
|
||||||
|
this.rotation.z += 0.01;
|
||||||
|
requestAnimationFrame( this.rotate );
|
||||||
|
}
|
||||||
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue