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:
parent
e46ba54aac
commit
dab3e20310
6 changed files with 101 additions and 16 deletions
|
@ -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>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "troisjs-app",
|
||||
"name": "minecraft-armorstand",
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
|
|
51
src/App.vue
51
src/App.vue
|
@ -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
41
src/RotationSliderRow.vue
Normal 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>
|
|
@ -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>
|
||||
|
|
|
@ -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")
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue