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

Rotatable Cube + Sliders And Checkboxes

Browse source
This commit is contained in:
haselkern 2014-08-18 15:41:08 +02:00
parent 947cb306ef
commit 789a149a79
3 changed files with 77 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

19
index.htm
View file

@ -1,6 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>Minecraft Armor Stand</title>
<link rel="stylesheet" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:700' rel='stylesheet' type='text/css'>
@ -19,9 +20,23 @@
<div id="inputsection">
<input type="checkbox" name="small">Small Armor Stand<br>
<input type="checkbox" name="small">Invisible<br>
<input type="checkbox" name="small">Invulnerable<br>
<input type="checkbox" name="small">No Base Plate<br>
<input type="checkbox" name="small">No Gravity<br>
<input type="checkbox" name="arms">Show Arms<br>
<input type="range" name="points" min="0" max="360" value="0">
<input type="checkbox" name="small">Small<br>
Rotation: <input type="range" name="points" min="0" max="360" value="0"><br>
Head: <input type="range" name="points" min="0" max="360" value="0"><input type="range" name="points" min="0" max="360" value="0"><input type="range" name="points" min="0" max="360" value="0"><br>
Body: <input type="range" name="points" min="0" max="360" value="0"><input type="range" name="points" min="0" max="360" value="0"><input type="range" name="points" min="0" max="360" value="0"><br>
Left Leg: <input type="range" name="points" min="0" max="360" value="0"><input type="range" name="points" min="0" max="360" value="0"><input type="range" name="points" min="0" max="360" value="0"><br>
Right Leg: <input type="range" name="points" min="0" max="360" value="0"><input type="range" name="points" min="0" max="360" value="0"><input type="range" name="points" min="0" max="360" value="0"><br>
<div id="inputArms">
Left Arm: <input type="range" name="points" min="0" max="360" value="0"><input type="range" name="points" min="0" max="360" value="0"><input type="range" name="points" min="0" max="360" value="0"><br>
Right Arm: <input type="range" name="points" min="0" max="360" value="0"><input type="range" name="points" min="0" max="360" value="0"><input type="range" name="points" min="0" max="360" value="0"><br>
</div>
</div>

64
main.js
View file

@ -2,8 +2,24 @@
// http://code.tutsplus.com/tutorials/webgl-with-threejs-basics--net-35688
// for helping me getting started
//Stuff for rendering
var width, height, renderer, scene, camera, cube;
var clock = new THREE.Clock;
var rotY = 0, rotX = 0;
var armorstand; //Groups all the other elements
//Stuff for mouse movements
var mouseDownX;
var mouseDownY;
var mouseMoveX;
var mouseMoveY;
var mouseRotationMultiplier = 0.008;
//A point class will help us manage the mouse movements.
Point = {
x:null,
y:null
};
$(document).ready(function(){
setup();
@ -16,6 +32,22 @@ $(document).ready(function(){
$(':checkbox').change(function() {
handleInput();
});
$("#gl")
.mousedown(function(event){
mouseDownX = event.pageX;
mouseDownY = event.pageY;
})
.mousemove(function(event){
mouseMoveX = event.pageX;
mouseMoveY = event.pageY;
})
.mouseup(function(event){
rotY += getMouseDeltaX();
rotX += getMouseDeltaY();
mouseDownX = null;
mouseDownY = null;
});
});
function setup(){
@ -27,15 +59,21 @@ function setup(){
$("#gl").append(renderer.domElement);
scene = new THREE.Scene;
scene = new THREE.Scene();
armorstand = new THREE.Object3D();
var cubeGeo = new THREE.CubeGeometry(1, 1, 1);
var cubeMat = new THREE.MeshLambertMaterial({ color: 0x1ec876 });
cube = new THREE.Mesh(cubeGeo, cubeMat);
cube.rotation.y = 45 * Math.PI/180;
//Parenting example
cube2 = new THREE.Mesh(new THREE.CubeGeometry(0.5,0.5,0.5), cubeMat);
cube2.position.y = 0.7;
cube.add(cube2);
scene.add(cube);
armorstand.add(cube);
scene.add(armorstand);
camera = new THREE.PerspectiveCamera(45, width/height, 0.1, 1000);
camera.position.y = 2;
@ -52,12 +90,28 @@ function setup(){
function handleInput(){
cube.material.color.setHex(Math.random() * 0xFFFFFF);
}
function getMouseDeltaX(){
var mouseDeltaX = 0;
if(mouseDownX != null && mouseMoveX != null){
mouseDeltaX = mouseMoveX - mouseDownX;
}
return mouseDeltaX * mouseRotationMultiplier;
}
function getMouseDeltaY(){
var mouseDeltaY = 0;
if(mouseDownY != null && mouseMoveY != null){
mouseDeltaY = mouseMoveY - mouseDownY;
}
return mouseDeltaY * mouseRotationMultiplier;
}
function render(){
renderer.render(scene, camera);
var d = clock.getDelta();
cube.rotation.y += d;
var deltaTime = clock.getDelta();
armorstand.rotation.y = rotY + getMouseDeltaX();
armorstand.rotation.x = rotX + getMouseDeltaY();
requestAnimationFrame(render);
}

1
style.css
View file

@ -22,6 +22,7 @@ body{
width: 60%;
height: 100%;
float: left;
cursor: move;
}
#controls{