From 16d8616f16fb9fb0ca525afd4b4d9e2a1b360662 Mon Sep 17 00:00:00 2001
From: buttle <chris@gatopelao.org>
Date: Sun, 13 Jun 2021 15:34:16 +0200
Subject: [PATCH] passes vue js data to component

---
 static/css/3d-tester.css |  4 +++
 views/vue-3d.tpl         | 66 +++++++++++++++++++++++++++-------------
 2 files changed, 49 insertions(+), 21 deletions(-)

diff --git a/static/css/3d-tester.css b/static/css/3d-tester.css
index a7e01d3..f7ee561 100644
--- a/static/css/3d-tester.css
+++ b/static/css/3d-tester.css
@@ -4,3 +4,7 @@
   padding: 1em;
   background-color: lightgray;
 }
+
+#object {
+    height: 500px;
+}
diff --git a/views/vue-3d.tpl b/views/vue-3d.tpl
index 7eaf3a1..f05e9bb 100644
--- a/views/vue-3d.tpl
+++ b/views/vue-3d.tpl
@@ -23,13 +23,6 @@
           >
       </model-gltf>
   	%end
-    %if object['type'] == "obj-mtl":
-      <model-obj
-          src="{{ object['urls'][0] }}"
-          mtl="{{ object['urls'][1] }}"
-          >
-      </model-obj>
-  	%end
     %if object['type'] == "obj":
       <model-obj
           src="{{ object['urls'][0] }}"
@@ -48,15 +41,6 @@
           >
       </model-stl>
   	%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":
     <model-three
             :backgroundAlpha="0"
@@ -68,19 +52,59 @@
     %end
     %if object['type'] == "ply":
     <model-ply
+            src="{{ object['urls'][0] }}"
             :backgroundAlpha="0"
             @on-load="onLoad"
             :rotation="rotation"
-            src="{{ object['urls'][0] }}"
+
           >
     </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"
+          >
+      </model-obj>
+  	%end
   </div>
 </div>
 
 <script>
-  new Vue({
-    el: "#object"
-  })
+
+new Vue({
+    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>