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>
<light :hex="0xFFFFFF" :position="{x: 100, y: 200, z: 300}"></light>
</orbit-controls>
<armorstand></armorstand>
<armorstand :pose="pose"></armorstand>
</scene>
</renderer>
</div>
@ -30,6 +30,7 @@
</card>
<card>
<h1 class="text-xl">Pose</h1>
<!-- TODO modularize sliders -->
<table class="w-full">
<tr>
<td>Rotation</td>
@ -37,9 +38,9 @@
</tr>
<tr>
<td>Head</td>
<td><input v-model="rotation.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="rotation.z" 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="pose.head.y" 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>
</table>
</card>
@ -59,7 +60,9 @@ export default {
renderer: new THREE.WebGLRenderer({alpha: true, antialias: true}),
camera: new THREE.PerspectiveCamera(70, 400 / 400, 0.1, 100),
ambientLight: new THREE.AmbientLight(0x333333),
rotation: {x: 30, y: 40, z: 0},
pose: {
head: {x: 0, y: 0, z: 0},
},
};
},
mounted() {
@ -76,14 +79,5 @@ export default {
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>

14
src/components/Armorstand.vue
View file

@ -63,7 +63,7 @@
</mesh>
</object3d>
<!-- Head -->
<object3d :position="{x: 0, y: 22/16, z: 0}">
<object3d :position="{x: 0, y: 22/16, z: 0}" :rotation="head">
<!-- Neck -->
<mesh :position="{x: 0, y: 3.5/16, z: 0}">
<material type="MeshPhong" :color="colorWood"></material>
@ -80,12 +80,22 @@
<script>
export default {
props: ["pose"],
data() {
// TODO This should be a prop "pose" to allow external modification
return {
colorWood: 0xCC933D,
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>