1
0
Fork 0
mirror of https://github.com/haselkern/Minecraft-ArmorStand.git synced 2025-05-17 00:15:34 +00:00

Add first version of armorstand class

This commit is contained in:
Lars Martens 2021-08-11 23:01:26 +02:00
parent e46ba54aac
commit dab3e20310
6 changed files with 101 additions and 16 deletions

View file

@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TroisJS App</title>
<title>Minecraft Armor Stand</title>
</head>
<body>
<div id="app"></div>

View file

@ -1,5 +1,5 @@
{
"name": "troisjs-app",
"name": "minecraft-armorstand",
"version": "0.0.0",
"scripts": {
"dev": "vite",

View file

@ -1,24 +1,59 @@
<template>
<div class="flex">
<div class="flex-1 h-screen">
<Scene :rot="roty" />
<div>
<div class="w-3/5 h-screen float-left">
<Scene :armorstand="armorstand" />
</div>
<div class="flex-none w-60">
<h1>{{ roty }}</h1>
<input type="range" min="0" max="100" v-model="roty" />
<div class="w-2/5 float-right">
<table>
<tr>
<td>Rotation</td>
<td colspan="3">
<input @dblclick="() => armorstand.rotation = 0" class="w-full" type="range" min="-180" max="180" v-model="armorstand.rotation" />
</td>
</tr>
<RotationSliderRow label="Head" :rotation="armorstand.head" />
</table>
</div>
</div>
</template>
<script>
import Scene from "./Scene.vue"
import RotationSliderRow from "./RotationSliderRow.vue"
// The Armorstand will hold all attributes for an armor stand.
class Armorstand {
constructor() {
// Rotation values for the body parts
this.rotation = 0
this.head = { x: 0, y: 0, z: 0 }
this.body = { x: 0, y: 0, z: 0 }
this.legLeft = { x: 0, y: 0, z: 0 }
this.legRight = { x: 0, y: 0, z: 0 }
this.armLeft = { x: 0, y: 0, z: 0 }
this.armRight = { x: 0, y: 0, z: 0 }
// Boolean attributes
this.invisible = false
this.invulnerable = false
this.persistenceRequired = false
this.noBasePlate = false
this.noGravity = false
this.showArms = false
this.small = false
this.marker = false
this.centerCorrected = false
// TODO Lots more to come
}
}
export default {
data() {
return {
roty: 0,
armorstand: new Armorstand(),
}
},
components: {Scene},
components: { Scene, RotationSliderRow },
}
</script>

41
src/RotationSliderRow.vue Normal file
View file

@ -0,0 +1,41 @@
<template>
<tr>
<td>{{label}}</td>
<td>
<input
class="w-full"
@dblclick="() => rotation.x = 0"
type="range"
min="-180"
max="180"
v-model="rotation.x"
/>
</td>
<td>
<input
class="w-full"
@dblclick="() => rotation.y = 0"
type="range"
min="-180"
max="180"
v-model="rotation.y"
/>
</td>
<td>
<input
class="w-full"
@dblclick="() => rotation.z = 0"
type="range"
min="-180"
max="180"
v-model="rotation.z"
/>
</td>
</tr>
</template>
<script>
export default {
props: ["rotation", "label"],
}
</script>

View file

@ -4,7 +4,7 @@
<Scene>
<AmbientLight :intensity="0.3" />
<DirectionalLight :intensity="1" :position="{ x: 10, y: 9 }" />
<Box ref="box" :rotation="{ y: rot / Math.PI / 4 }">
<Box ref="box" :rotation="scaledRotation">
<LambertMaterial />
</Box>
</Scene>
@ -13,10 +13,10 @@
<script>
import { Box, Camera, LambertMaterial, AmbientLight, Renderer, Scene } from 'troisjs';
import { Box, Camera, LambertMaterial, AmbientLight, Renderer, Scene } from "troisjs";
export default {
props: ["rot"],
props: ["armorstand"],
mounted() {
// const renderer = this.$refs.renderer
// const box = this.$refs.box.mesh
@ -24,6 +24,15 @@ export default {
// box.rotation.x += 0.01
// })
},
computed: {
scaledRotation: function() {
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,
}
}
},
components: { Box, Camera, LambertMaterial, Renderer, Scene },
}
</script>

View file

@ -1,5 +1,5 @@
import { createApp } from 'troisjs'
import App from './App.vue'
import { createApp } from "troisjs"
import App from "./App.vue"
import "./main.css"
createApp(App).mount('#app')
createApp(App).mount("#app")