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

Rotating head demo

Browse source
This commit is contained in:
Lars Martens 2020-12-18 20:18:01 +01:00
parent 11eec45515
commit 608fce96cc
2 changed files with 20 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/App.vue
View file

@ -8,7 +8,7 @@
<camera :obj="camera"></camera> <camera :obj="camera"></camera>
<light :hex="0xFFFFFF" :position="{x: 100, y: 200, z: 300}"></light> <light :hex="0xFFFFFF" :position="{x: 100, y: 200, z: 300}"></light>
</orbit-controls> </orbit-controls>
<armorstand></armorstand> <armorstand :pose="pose"></armorstand>
</scene> </scene>
</renderer> </renderer>
</div> </div>
@ -30,6 +30,7 @@
</card> </card>
<card> <card>
<h1 class="text-xl">Pose</h1> <h1 class="text-xl">Pose</h1>
<!-- TODO modularize sliders -->
<table class="w-full"> <table class="w-full">
<tr> <tr>
<td>Rotation</td> <td>Rotation</td>
@ -37,9 +38,9 @@
</tr> </tr>
<tr> <tr>
<td>Head</td> <td>Head</td>
<td><input v-model="rotation.x" class="w-full" type="range" min="0" max="360"></td> <td><input v-model="pose.head.x" class="w-full" type="range" min="0" max="360"></td>
<td><input v-model="rotation.y" class="w-full" type="range" min="0" max="360"></td> <td><input v-model="pose.head.y" class="w-full" type="range" min="0" max="360"></td>
<td><input v-model="rotation.z" class="w-full" type="range" min="0" max="360"></td> <td><input v-model="pose.head.z" class="w-full" type="range" min="0" max="360"></td>
</tr> </tr>
</table> </table>
</card> </card>
@ -59,7 +60,9 @@ export default {
renderer: new THREE.WebGLRenderer({alpha: true, antialias: true}), renderer: new THREE.WebGLRenderer({alpha: true, antialias: true}),
camera: new THREE.PerspectiveCamera(70, 400 / 400, 0.1, 100), camera: new THREE.PerspectiveCamera(70, 400 / 400, 0.1, 100),
ambientLight: new THREE.AmbientLight(0x333333), ambientLight: new THREE.AmbientLight(0x333333),
rotation: {x: 30, y: 40, z: 0}, pose: {
head: {x: 0, y: 0, z: 0},
},
}; };
}, },
mounted() { mounted() {
@ -76,14 +79,5 @@ export default {
this.renderer.setSize(w, h); this.renderer.setSize(w, h);
}, },
}, },
computed: {
rotationInRad() {
return {
x: this.rotation.x/180*Math.PI,
y: this.rotation.y/180*Math.PI,
z: this.rotation.z/180*Math.PI,
};
},
},
} }
</script> </script>

14
src/components/Armorstand.vue
View file

@ -63,7 +63,7 @@
</mesh> </mesh>
</object3d> </object3d>
<!-- Head --> <!-- Head -->
<object3d :position="{x: 0, y: 22/16, z: 0}"> <object3d :position="{x: 0, y: 22/16, z: 0}" :rotation="head">
<!-- Neck --> <!-- Neck -->
<mesh :position="{x: 0, y: 3.5/16, z: 0}"> <mesh :position="{x: 0, y: 3.5/16, z: 0}">
<material type="MeshPhong" :color="colorWood"></material> <material type="MeshPhong" :color="colorWood"></material>
@ -80,12 +80,22 @@
<script> <script>
export default { export default {
props: ["pose"],
data() { data() {
// TODO This should be a prop "pose" to allow external modification
return { return {
colorWood: 0xCC933D, colorWood: 0xCC933D,
colorStone: 0x888888, colorStone: 0x888888,
}; };
}, },
computed: {
head() {
// TODO Translate rotation Minecraft -> ThreeJS
return {
x: this.pose.head.x * Math.PI/180,
y: this.pose.head.y * Math.PI/180,
z: this.pose.head.z * Math.PI/180,
};
},
},
} }
</script> </script>