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

Basic 3D support

Browse source
This commit is contained in:
Lars Martens 2020-12-17 16:16:33 +01:00
parent f2bf164431
commit cb781e94eb
9 changed files with 266 additions and 394 deletions
Download patch file Download diff file Expand all files Collapse all files

54
src/App.vue
View file

@ -1,6 +1,18 @@
<template>
<div class="grid grid-cols-5 min-h-screen bg-gray-200">
<div class="col-span-3"></div>
<div class="grid grid-cols-5 min-h-screen bg-gray-700">
<div ref="rendererwrapper" class="col-span-3">
<renderer :obj="renderer" :size="{w: 400, h: 400}">
<scene>
<camera :obj="camera" :position="{ z: 5 }"></camera>
<light :hex="0xEEEEEE" :position="{x: 10, y: 10, z: 10}"></light>
<light :obj="ambientLight"></light>
<mesh :rotation="rotationInRad">
<geometry type="Box" :args="[1, 1, 1]"></geometry>
<material type="MeshLambert" :obj="testMaterial"></material>
</mesh>
</scene>
</renderer>
</div>
<div class="col-span-2">
<card class="text-center">
<h1 class="text-2xl font-bold">Minecraft Armorstand</h1>
@ -22,13 +34,13 @@
<table class="w-full">
<tr>
<td>Rotation</td>
<td colspan="3"><input v-model="rotation" class="w-full" type="range" min="0" max="360"></td>
<td colspan="3"><input class="w-full" type="range" min="0" max="360"></td>
</tr>
<tr>
<td>Head</td>
<td><input class="w-full" type="range" min="0" max="360"></td>
<td><input class="w-full" type="range" min="0" max="360"></td>
<td><input class="w-full" type="range" min="0" max="360"></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>
</tr>
</table>
</card>
@ -38,13 +50,41 @@
<script>
import Card from "./components/Card";
import * as THREE from "three";
export default {
components: {Card},
data() {
return {
rotation: 0,
renderer: new THREE.WebGLRenderer({alpha: true, antialias: true}),
camera: new THREE.PerspectiveCamera(70, 400 / 400, 0.1, 100),
testMaterial: new THREE.MeshLambertMaterial({color: 0x826841}),
ambientLight: new THREE.AmbientLight(0x333333),
rotation: {x: 30, y: 40, z: 0},
};
},
mounted() {
this.resize();
window.resize = this.resize;
},
methods: {
resize() {
let el = this.$refs.rendererwrapper;
let w = el.clientWidth;
let h = el.clientHeight;
this.camera.aspect = w/h;
this.camera.updateProjectionMatrix();
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>