mirror of
https://github.com/haselkern/Minecraft-ArmorStand.git
synced 2025-05-18 05:55:35 +00:00
TroisJS demo
This commit is contained in:
parent
608fce96cc
commit
e46ba54aac
18 changed files with 2725 additions and 12871 deletions
81
src/App.vue
81
src/App.vue
|
|
@ -1,83 +1,24 @@
|
|||
<template>
|
||||
<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>
|
||||
<orbit-controls :position="{z: 3}"
|
||||
:rotation="{x: 2, y: 0, z: 3}">
|
||||
<camera :obj="camera"></camera>
|
||||
<light :hex="0xFFFFFF" :position="{x: 100, y: 200, z: 300}"></light>
|
||||
</orbit-controls>
|
||||
<armorstand :pose="pose"></armorstand>
|
||||
</scene>
|
||||
</renderer>
|
||||
<template>
|
||||
<div class="flex">
|
||||
<div class="flex-1 h-screen">
|
||||
<Scene :rot="roty" />
|
||||
</div>
|
||||
<div class="col-span-2">
|
||||
<card class="text-center">
|
||||
<h1 class="text-2xl font-bold">Minecraft Armorstand</h1>
|
||||
<a
|
||||
title="Source Code"
|
||||
href="https://github.com/haselkern/Minecraft-ArmorStand"
|
||||
class="inline-flex items-center justify-center w-8 h-8 m-2 text-white bg-gray-700 rounded-lg">
|
||||
<i class="fas fa-code"></i>
|
||||
</a>
|
||||
<a
|
||||
title="Help"
|
||||
href="https://haselkern.com/armorstand/"
|
||||
class="inline-flex items-center justify-center w-8 h-8 m-2 text-white bg-gray-700 rounded-lg">
|
||||
<i class="fas fa-question"></i>
|
||||
</a>
|
||||
</card>
|
||||
<card>
|
||||
<h1 class="text-xl">Pose</h1>
|
||||
<!-- TODO modularize sliders -->
|
||||
<table class="w-full">
|
||||
<tr>
|
||||
<td>Rotation</td>
|
||||
<td colspan="3"><input class="w-full" type="range" min="0" max="360"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Head</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>
|
||||
<div class="flex-none w-60">
|
||||
<h1>{{ roty }}</h1>
|
||||
<input type="range" min="0" max="100" v-model="roty" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Card from "./components/Card";
|
||||
import Armorstand from "./components/Armorstand";
|
||||
import * as THREE from "three";
|
||||
import Scene from "./Scene.vue"
|
||||
|
||||
export default {
|
||||
components: {Card, Armorstand},
|
||||
data() {
|
||||
return {
|
||||
renderer: new THREE.WebGLRenderer({alpha: true, antialias: true}),
|
||||
camera: new THREE.PerspectiveCamera(70, 400 / 400, 0.1, 100),
|
||||
ambientLight: new THREE.AmbientLight(0x333333),
|
||||
pose: {
|
||||
head: {x: 0, y: 0, 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);
|
||||
},
|
||||
roty: 0,
|
||||
}
|
||||
},
|
||||
components: {Scene},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
39
src/Scene.vue
Normal file
39
src/Scene.vue
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<template>
|
||||
<Renderer ref="renderer" antialias :orbit-ctrl="{ enableDamping: false }" resize="true">
|
||||
<Camera :position="{ z: 10 }" />
|
||||
<Scene>
|
||||
<AmbientLight :intensity="0.3" />
|
||||
<DirectionalLight :intensity="1" :position="{ x: 10, y: 9 }" />
|
||||
<Box ref="box" :rotation="{ y: rot / Math.PI / 4 }">
|
||||
<LambertMaterial />
|
||||
</Box>
|
||||
</Scene>
|
||||
</Renderer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { Box, Camera, LambertMaterial, AmbientLight, Renderer, Scene } from 'troisjs';
|
||||
|
||||
export default {
|
||||
props: ["rot"],
|
||||
mounted() {
|
||||
// const renderer = this.$refs.renderer
|
||||
// const box = this.$refs.box.mesh
|
||||
// renderer.onBeforeRender(() => {
|
||||
// box.rotation.x += 0.01
|
||||
// })
|
||||
},
|
||||
components: { Box, Camera, LambertMaterial, Renderer, Scene },
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
|
@ -1,101 +0,0 @@
|
|||
<template>
|
||||
<!-- Armorstand -->
|
||||
<object3d :position="{y: -1}">
|
||||
<!-- BasePlate -->
|
||||
<mesh :position="{x: 0, y: -1/32, z: 0}">
|
||||
<material type="MeshPhong" :color="colorStone"></material>
|
||||
<geometry type="Box" :args="[12/16, 1/16, 12/16]"></geometry>
|
||||
</mesh>
|
||||
<!-- Little direction indicator for the baseplate -->
|
||||
<mesh :position="{x: 0, y: -1/32, z: 10/16}">
|
||||
<material type="MeshPhong" :color="colorStone"></material>
|
||||
<geometry type="Box" :args="[2/16, 1/16, 4/16]"></geometry>
|
||||
</mesh>
|
||||
<!-- Left leg -->
|
||||
<object3d :position="{x: 2/16, y: 11/16, z: 0}">
|
||||
<mesh :position="{x: 0, y: -5.5/16, z: 0}">
|
||||
<material type="MeshPhong" :color="colorWood"></material>
|
||||
<geometry type="Box" :args="[2/16, 11/16, 2/16]"></geometry>
|
||||
</mesh>
|
||||
</object3d>
|
||||
<!-- Right leg -->
|
||||
<object3d :position="{x: -2/16, y: 11/16, z: 0}">
|
||||
<mesh :position="{x: 0, y: -5.5/16, z: 0}">
|
||||
<material type="MeshPhong" :color="colorWood"></material>
|
||||
<geometry type="Box" :args="[2/16, 11/16, 2/16]"></geometry>
|
||||
</mesh>
|
||||
</object3d>
|
||||
<!-- Left arm -->
|
||||
<object3d :position="{x: 6/16, y: 21/16, z: 0}">
|
||||
<mesh :position="{x: 0, y: -4/16, z: 0}">
|
||||
<material type="MeshPhong" :color="colorWood"></material>
|
||||
<geometry type="Box" :args="[2/16, 12/16, 2/16]"></geometry>
|
||||
</mesh>
|
||||
</object3d>
|
||||
<!-- Right arm -->
|
||||
<object3d :position="{x: -6/16, y: 21/16, z: 0}">
|
||||
<mesh :position="{x: 0, y: -4/16, z: 0}">
|
||||
<material type="MeshPhong" :color="colorWood"></material>
|
||||
<geometry type="Box" :args="[2/16, 12/16, 2/16]"></geometry>
|
||||
</mesh>
|
||||
</object3d>
|
||||
<!-- Body -->
|
||||
<object3d :position="{x: 0, y: 23/16, z: 0}">
|
||||
<!-- Hip -->
|
||||
<mesh :position="{x: 0, y: -11/16, z: 0}">
|
||||
<material type="MeshPhong" :color="colorWood"></material>
|
||||
<geometry type="Box" :args="[8/16, 2/16, 2/16]"></geometry>
|
||||
</mesh>
|
||||
<!-- Left side -->
|
||||
<mesh :position="{x: 2/16, y: -6.5/16, z: 0}">
|
||||
<material type="MeshPhong" :color="colorWood"></material>
|
||||
<geometry type="Box" :args="[2/16, 7/16, 2/16]"></geometry>
|
||||
</mesh>
|
||||
<!-- Right side -->
|
||||
<mesh :position="{x: -2/16, y: -6.5/16, z: 0}">
|
||||
<material type="MeshPhong" :color="colorWood"></material>
|
||||
<geometry type="Box" :args="[2/16, 7/16, 2/16]"></geometry>
|
||||
</mesh>
|
||||
<!-- Shoulders -->
|
||||
<mesh :position="{x: 0, y: -1.5/16, z: 0}">
|
||||
<material type="MeshPhong" :color="colorWood"></material>
|
||||
<geometry type="Box" :args="[12/16, 3/16, 3/16]"></geometry>
|
||||
</mesh>
|
||||
</object3d>
|
||||
<!-- Head -->
|
||||
<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>
|
||||
<geometry type="Box" :args="[2/16, 7/16, 2/16]"></geometry>
|
||||
</mesh>
|
||||
<!-- Skull -->
|
||||
<mesh :position="{x: 0, y: 5/16, z: 0}">
|
||||
<material type="MeshPhong" :color="colorStone"></material>
|
||||
<geometry type="Box" :args="[10/16, 10/16, 10/16]"></geometry>
|
||||
</mesh>
|
||||
</object3d>
|
||||
</object3d>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["pose"],
|
||||
data() {
|
||||
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>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<template>
|
||||
<div class="bg-white rounded-lg m-2 p-2 shadow">
|
||||
<slot/>
|
||||
</div>
|
||||
</template>
|
||||
6
src/main.css
Normal file
6
src/main.css
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
/*
|
||||
* Do not define your own styles, instead use https://tailwindcss.com/ classes on your elements.
|
||||
*/
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
14
src/main.js
14
src/main.js
|
|
@ -1,11 +1,5 @@
|
|||
import Vue from "vue";
|
||||
import App from "./App.vue";
|
||||
import * as VueThreejs from "vue-threejs";
|
||||
import "./assets/tailwind.css";
|
||||
import "../node_modules/@fortawesome/fontawesome-free/css/all.css";
|
||||
import { createApp } from 'troisjs'
|
||||
import App from './App.vue'
|
||||
import "./main.css"
|
||||
|
||||
Vue.use(VueThreejs);
|
||||
|
||||
new Vue({
|
||||
render: h => h(App),
|
||||
}).$mount('#app');
|
||||
createApp(App).mount('#app')
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue