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

Add first version of armorstand class

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

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

2
package.json
View file

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

51
src/App.vue
View file

@ -1,24 +1,59 @@
<template> <template>
<div class="flex"> <div>
<div class="flex-1 h-screen"> <div class="w-3/5 h-screen float-left">
<Scene :rot="roty" /> <Scene :armorstand="armorstand" />
</div> </div>
<div class="flex-none w-60"> <div class="w-2/5 float-right">
<h1>{{ roty }}</h1> <table>
<input type="range" min="0" max="100" v-model="roty" /> <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>
</div> </div>
</template> </template>
<script> <script>
import Scene from "./Scene.vue" 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 { export default {
data() { data() {
return { return {
roty: 0, armorstand: new Armorstand(),
} }
}, },
components: {Scene}, components: { Scene, RotationSliderRow },
} }
</script> </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>

15
src/Scene.vue
View file

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

6
src/main.js
View file

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