From 608fce96ccb4be6ebbd66e4fc62bd2a91038fb97 Mon Sep 17 00:00:00 2001
From: Lars Martens <lars@martens.red>
Date: Fri, 18 Dec 2020 20:18:01 +0100
Subject: [PATCH] Rotating head demo

---
 src/App.vue                   | 22 ++++++++--------------
 src/components/Armorstand.vue | 14 ++++++++++++--
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ffe5118..45ab2dd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,7 +8,7 @@
                         <camera :obj="camera"></camera>
                         <light :hex="0xFFFFFF" :position="{x: 100, y: 200, z: 300}"></light>
                     </orbit-controls>
-                    <armorstand></armorstand>
+                    <armorstand :pose="pose"></armorstand>
                 </scene>
             </renderer>
         </div>
@@ -30,6 +30,7 @@
             </card>
             <card>
                 <h1 class="text-xl">Pose</h1>
+                <!-- TODO modularize sliders -->
                 <table class="w-full">
                     <tr>
                         <td>Rotation</td>
@@ -37,9 +38,9 @@
                     </tr>
                     <tr>
                         <td>Head</td>
-                        <td><input v-model="rotation.x" class="w-full" type="range" min="0" max="360"></td>
-                        <td><input v-model="rotation.y" class="w-full" type="range" min="0" max="360"></td>
-                        <td><input v-model="rotation.z" class="w-full" type="range" min="0" max="360"></td>
+                        <td><input v-model="pose.head.x" class="w-full" type="range" min="0" max="360"></td>
+                        <td><input v-model="pose.head.y" class="w-full" type="range" min="0" max="360"></td>
+                        <td><input v-model="pose.head.z" class="w-full" type="range" min="0" max="360"></td>
                     </tr>
                 </table>
             </card>
@@ -59,7 +60,9 @@ export default {
             renderer: new THREE.WebGLRenderer({alpha: true, antialias: true}),
             camera: new THREE.PerspectiveCamera(70, 400 / 400, 0.1, 100),
             ambientLight: new THREE.AmbientLight(0x333333),
-            rotation: {x: 30, y: 40, z: 0},
+            pose: {
+                head: {x: 0, y: 0, z: 0},
+            },
         };
     },
     mounted() {
@@ -76,14 +79,5 @@ export default {
             this.renderer.setSize(w, h);
         },
     },
-    computed: {
-        rotationInRad() {
-            return {
-                x: this.rotation.x/180*Math.PI,
-                y: this.rotation.y/180*Math.PI,
-                z: this.rotation.z/180*Math.PI,
-            };
-        },
-    },
 }
 </script>
diff --git a/src/components/Armorstand.vue b/src/components/Armorstand.vue
index f5969a8..bf240b2 100644
--- a/src/components/Armorstand.vue
+++ b/src/components/Armorstand.vue
@@ -63,7 +63,7 @@
             </mesh>
         </object3d>
         <!-- Head -->
-        <object3d :position="{x: 0, y: 22/16, z: 0}">
+        <object3d :position="{x: 0, y: 22/16, z: 0}" :rotation="head">
             <!-- Neck -->
             <mesh :position="{x: 0, y: 3.5/16, z: 0}">
                 <material type="MeshPhong" :color="colorWood"></material>
@@ -80,12 +80,22 @@
 
 <script>
 export default {
+    props: ["pose"],
     data() {
-        // TODO This should be a prop "pose" to allow external modification
         return {
             colorWood: 0xCC933D,
             colorStone: 0x888888,
         };
     },
+    computed: {
+        head() {
+            // TODO Translate rotation Minecraft -> ThreeJS
+            return {
+                x: this.pose.head.x * Math.PI/180,
+                y: this.pose.head.y * Math.PI/180,
+                z: this.pose.head.z * Math.PI/180,
+            };
+        },
+    },
 }
 </script>
\ No newline at end of file