mirror of
https://github.com/haselkern/Minecraft-ArmorStand.git
synced 2025-05-17 15:05:33 +00:00
Add full armor stand control
This commit is contained in:
parent
dab3e20310
commit
477e1152e5
2 changed files with 122 additions and 10 deletions
16
src/App.vue
16
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 {
|
||||
|
|
112
src/Scene.vue
112
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">
|
||||
|
||||
<!-- 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>
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue