mirror of
				https://github.com/haselkern/Minecraft-ArmorStand.git
				synced 2025-11-04 05:14:06 +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