passes vue js data to component

This commit is contained in:
buttle 2021-06-13 15:34:16 +02:00
parent 081063647d
commit 16d8616f16
2 changed files with 49 additions and 21 deletions

View File

@ -4,3 +4,7 @@
padding: 1em; padding: 1em;
background-color: lightgray; background-color: lightgray;
} }
#object {
height: 500px;
}

View File

@ -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>