From 477e1152e5405d75d08bcbae1069816235258170 Mon Sep 17 00:00:00 2001
From: Lars Martens <lars@martens.red>
Date: Thu, 12 Aug 2021 19:16:47 +0200
Subject: [PATCH] Add full armor stand control

---
 src/App.vue   |  16 +++++++
 src/Scene.vue | 116 +++++++++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 122 insertions(+), 10 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index bb96948..8630bcb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,6 +4,10 @@
             <Scene :armorstand="armorstand" />
         </div>
         <div class="w-2/5 float-right">
+            <label><input v-model="armorstand.showArms" type="checkbox">Show Arms</label>
+            <label><input v-model="armorstand.small" type="checkbox">Small</label>
+            <label><input v-model="armorstand.noBasePlate" type="checkbox">No Base Plate</label>
+            <hr>
             <table>
                 <tr>
                     <td>Rotation</td>
@@ -12,6 +16,11 @@
                     </td>
                 </tr>
                 <RotationSliderRow label="Head" :rotation="armorstand.head" />
+                <RotationSliderRow label="Body" :rotation="armorstand.body" />
+                <RotationSliderRow label="Left Leg" :rotation="armorstand.legLeft" />
+                <RotationSliderRow label="Right Leg" :rotation="armorstand.legRight" />
+                <RotationSliderRow v-if="armorstand.showArms" label="Left Arm" :rotation="armorstand.armLeft" />
+                <RotationSliderRow v-if="armorstand.showArms" label="Right Arm" :rotation="armorstand.armRight" />
             </table>
         </div>
     </div>
@@ -46,6 +55,13 @@ class Armorstand {
 
         // TODO Lots more to come
     }
+    getScale() {
+        if (this.small) {
+            return { x: 0.6, y: 0.6, z: 0.6 }
+        } else {
+            return { x: 1, y: 1, z: 1 }
+        }
+    }
 }
 
 export default {
diff --git a/src/Scene.vue b/src/Scene.vue
index 1a2676b..4fe4181 100644
--- a/src/Scene.vue
+++ b/src/Scene.vue
@@ -4,16 +4,111 @@
         <Scene>
             <AmbientLight :intensity="0.3" />
             <DirectionalLight :intensity="1" :position="{ x: 10, y: 9 }" />
-            <Box ref="box" :rotation="scaledRotation">
-                <LambertMaterial />
-            </Box>
+
+            <!-- This group contains armorstand + base plate -->
+            <Group :position="{ y: -8 / 16 }">
+                <!--Baseplate-->
+                <Group :position="{ y: -0.5 / 16 }">
+                    <Box :visible="!armorstand.noBasePlate" :scale="{ x: 12 / 16, y: 1 / 16, z: 12 / 16 }">
+                        <LambertMaterial />
+                    </Box>
+                    <Box :position="{ z: 10 / 16}" :scale="{ x: 2 / 16, y: 1 / 16, z: 4 / 16 }">
+                        <LambertMaterial />
+                    </Box>
+                </Group>
+                <!--Armorstand-->
+                <Group :scale="armorstand.getScale()">
+                    <!--Left Leg-->
+                    <Group
+                        :rotation="convertRotation(armorstand.legLeft)"
+                        :position="{ x: 2 / 16, y: 11 / 16, z: 0 }">
+                        <Box
+                            :position="{ x: 0, y: -5.5 / 16, z: 0 }"
+                            :scale="{ x: 2 / 16, y: 11 / 16, z: 2 / 16 }">
+                            <LambertMaterial />
+                        </Box>
+                    </Group>
+                    <!--Right Leg-->
+                    <Group
+                        :rotation="convertRotation(armorstand.legRight)"
+                        :position="{ x: -2 / 16, y: 11 / 16, z: 0 }">
+                        <Box
+                            :position="{ x: 0, y: -5.5 / 16, z: 0 }"
+                            :scale="{ x: 2 / 16, y: 11 / 16, z: 2 / 16 }">
+                            <LambertMaterial />
+                        </Box>
+                    </Group>
+                    <!--Left Arm-->
+                    <Group
+                        :visible="armorstand.showArms"
+                        :rotation="convertRotation(armorstand.armLeft)"
+                        :position="{ x: 6 / 16, y: 21 / 16, z: 0 }">
+                        <Box
+                            :position="{ x: 0, y: -4 / 16, z: 0 }"
+                            :scale="{ x: 2 / 16, y: 12 / 16, z: 2 / 16 }">
+                            <LambertMaterial />
+                        </Box>
+                    </Group>
+                    <!--Right Arm-->
+                    <Group
+                        :visible="armorstand.showArms"
+                        :rotation="convertRotation(armorstand.armRight)"
+                        :position="{ x: -6 / 16, y: 21 / 16, z: 0 }">
+                        <Box
+                            :position="{ x: 0, y: -4 / 16, z: 0 }"
+                            :scale="{ x: 2 / 16, y: 12 / 16, z: 2 / 16 }">
+                            <LambertMaterial />
+                        </Box>
+                    </Group>
+                    <!--Body-->
+                    <Group
+                        :rotation="convertRotation(armorstand.body)"
+                        :position="{ x: 0 / 16, y: 23 / 16, z: 0 }">
+                        <Box
+                            :position="{ x: 0, y: -11 / 16, z: 0 }"
+                            :scale="{ x: 8 / 16, y: 2 / 16, z: 2 / 16 }">
+                            <LambertMaterial />
+                        </Box>
+                        <Box
+                            :position="{ x: 2 / 16, y: -6.5 / 16, z: 0 }"
+                            :scale="{ x: 2 / 16, y: 7 / 16, z: 2 / 16 }">
+                            <LambertMaterial />
+                        </Box>
+                        <Box
+                            :position="{ x: -2 / 16, y: -6.5 / 16, z: 0 }"
+                            :scale="{ x: 2 / 16, y: 7 / 16, z: 2 / 16 }">
+                            <LambertMaterial />
+                        </Box>
+                        <Box
+                            :position="{ x: 0 / 16, y: -1.5 / 16, z: 0 }"
+                            :scale="{ x: 12 / 16, y: 3 / 16, z: 3 / 16 }">
+                            <LambertMaterial />
+                        </Box>
+                    </Group>
+                    <!--Head-->
+                    <Group
+                        :rotation="convertRotation(armorstand.head)"
+                        :position="{ x: 0 / 16, y: 22 / 16, z: 0 }">
+                        <Box
+                            :position="{ x: 0, y: 3.5 / 16, z: 0 }"
+                            :scale="{ x: 2 / 16, y: 7 / 16, z: 2 / 16 }">
+                            <LambertMaterial />
+                        </Box>
+                        <Box
+                            :position="{ x: 0, y: 5 / 16, z: 0 }"
+                            :scale="{ x: 10 / 16, y: 10 / 16, z: 10 / 16 }">
+                            <LambertMaterial />
+                        </Box>
+                    </Group>
+                </Group>
+            </Group>
         </Scene>
     </Renderer>
 </template>
   
 <script>
 
-import { Box, Camera, LambertMaterial, AmbientLight, Renderer, Scene } from "troisjs";
+import { Box, Camera, LambertMaterial, AmbientLight, Renderer, Scene, Object3D } from "troisjs";
 
 export default {
     props: ["armorstand"],
@@ -24,16 +119,17 @@ export default {
         //     box.rotation.x += 0.01
         // })
     },
-    computed: {
-        scaledRotation: function() {
+    methods: {
+        convertRotation: function (rot) {
+            // TODO Convert Minecraft to ThreeJS rotation here
             return {
-                x: this.armorstand.head.x / 180 * Math.PI,
-                y: this.armorstand.head.y / 180 * Math.PI,
-                z: this.armorstand.head.z / 180 * Math.PI,
+                x: rot.x / 180 * Math.PI,
+                y: rot.y / 180 * Math.PI,
+                z: rot.z / 180 * Math.PI,
             }
         }
     },
-    components: { Box, Camera, LambertMaterial, Renderer, Scene },
+    components: { Box, Camera, LambertMaterial, Renderer, Scene, Object3D },
 }
 </script>