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

Added Armor Stand Model

Browse source
This commit is contained in:
haselkern 2014-08-18 17:44:26 +02:00
parent 789a149a79
commit 2e32466b71
3 changed files with 185 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

36
index.htm
View file

@ -17,25 +17,35 @@
<h1>MINECRAFT ARMOR STAND<br>Please note:</h1> <h1>MINECRAFT ARMOR STAND<br>Please note:</h1>
This thing is nowhere near complete, I just wanted to upload it so I don't lose my work if my local copy messes up. This thing is nowhere near complete, I just wanted to upload it so I don't lose my work if my local copy messes up.
<br>
Notes to myself:
<ul>
<li>Y and Z rotation axis are okay, but the value has to be multiplied by -1</li>
</ul>
<div id="inputsection"> <div id="inputsection">
<input type="checkbox" name="small">Invisible<br> <input type="checkbox" name="invisible">Invisible<br>
<input type="checkbox" name="small">Invulnerable<br> <input type="checkbox" name="invulnerable">Invulnerable<br>
<input type="checkbox" name="small">No Base Plate<br> <input type="checkbox" name="nobaseplate">No Base Plate<br>
<input type="checkbox" name="small">No Gravity<br> <input type="checkbox" name="nogravity">No Gravity<br>
<input type="checkbox" name="arms">Show Arms<br> <input type="checkbox" name="showarms">Show Arms<br>
<input type="checkbox" name="small">Small<br> <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> Rotation: <input type="range" name="rotation" 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"> Head: <input type="range" name="headX" min="0" max="360" value="0"><input type="range" name="headY" min="0" max="360" value="0"><input type="range" name="headZ" min="0" max="360" value="0"><br>
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> Body: <input type="range" name="bodyX" min="0" max="360" value="0"><input type="range" name="bodyY" min="0" max="360" value="0"><input type="range" name="bodyZ" min="0" max="360" value="0"><br>
Left Leg: <input type="range" name="leftLegX" min="0" max="360" value="0"><input type="range" name="leftLegY" min="0" max="360" value="0"><input type="range" name="leftLegZ" min="0" max="360" value="0"><br>
Right Leg: <input type="range" name="rightLegX" min="0" max="360" value="0"><input type="range" name="rightLegY" min="0" max="360" value="0"><input type="range" name="rightLegZ" min="0" max="360" value="0"><br>
<div id="inputarms">
Left Arm: <input type="range" name="leftArmX" min="0" max="360" value="0"><input type="range" name="leftArmY" min="0" max="360" value="0"><input type="range" name="leftArmZ" min="0" max="360" value="0"><br>
Right Arm: <input type="range" name="rightArmX" min="0" max="360" value="0"><input type="range" name="rightArmY" min="0" max="360" value="0"><input type="range" name="rightArmZ" min="0" max="360" value="0"><br>
</div> </div>
</div> </div>

176
main.js
View file

@ -3,11 +3,40 @@
// for helping me getting started // for helping me getting started
//Stuff for rendering //Stuff for rendering
var width, height, renderer, scene, camera, cube; var DEG2RAD = Math.PI / 180;
var width, height, renderer, scene, camera;
var clock = new THREE.Clock; var clock = new THREE.Clock;
var rotY = 0, rotX = 0; var rotY = 0, rotX = 0;
var matWood = new THREE.MeshLambertMaterial({ color: 0x826841 });
//var matWood = new THREE.MeshLambertMaterial({ color: 0x826841, transparent: true, opacity: 0.5 }); //For testing the mesh alignment
var matStone = new THREE.MeshLambertMaterial({ color: 0xadadad });
var viewCenter = new THREE.Vector3(0,0,0);
// Meshes
// The ones marked with //* are not real meshes, but contain a child (or more) which gets rendered.
// This is done, so these can easily be rotated around an accurate pivot point.
var mBasePlate;
var mBody; //*
var mHead; //*
var mLegLeft; //*
var mLegRight; //*
var mArmLeft; //*
var mArmRight; //*
var armorstand, armorstandWrapper; //Group all the other elements
var armorstand; //Groups all the other elements
//DATA -> Stuff that we'll use to generate the command. Fetched from the controls.
var invisible = false;
var invulnerable = false;
var noBasePlate = false;
var noGravity = false;
var showArms = false;
var small = false;
var head = new THREE.Vector3(0,0,0);
var body = new THREE.Vector3(0,0,0);
var leftLeg = new THREE.Vector3(0,0,0);
var rightLeg = new THREE.Vector3(0,0,0);
var leftArm = new THREE.Vector3(0,0,0);
var rightarm = new THREE.Vector3(0,0,0);
//Stuff for mouse movements //Stuff for mouse movements
var mouseDownX; var mouseDownX;
@ -23,7 +52,7 @@ Point = {
$(document).ready(function(){ $(document).ready(function(){
setup(); setup();
updateUI();
render(); render();
$("input").on("input", function(){ $("input").on("input", function(){
@ -62,23 +91,116 @@ function setup(){
scene = new THREE.Scene(); scene = new THREE.Scene();
armorstand = new THREE.Object3D(); 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);
//Parenting example
cube2 = new THREE.Mesh(new THREE.CubeGeometry(0.5,0.5,0.5), cubeMat);
cube2.position.y = 0.7;
cube.add(cube2);
armorstand.add(cube); //BasePlate
mBasePlate = new THREE.Mesh(
new THREE.CubeGeometry(12/16, 1/16, 12/16),
matStone);
mBasePlate.position.y = -1/32;
//Add a little dot to the BasePlate, so the user knows which way is forward
mmBaseDot = new THREE.Mesh(
new THREE.CubeGeometry(4/16, 1/16, 4/16),
matStone);
mmBaseDot.position.set(0,0,8/16);
mBasePlate.add(mmBaseDot);
armorstand.add(mBasePlate);
scene.add(armorstand); // To Generate the other body parts, we will use a mesh to display,
// and add it as a child to the object that serves as a pivot.
//Left Leg
var mmLegLeft = new THREE.Mesh(
new THREE.CubeGeometry(2/16, 11/16, 2/16),
matWood);
mmLegLeft.position.set(0,-5.5/16,0);
mLegLeft = new THREE.Object3D();
mLegLeft.position.set(2/16,11/16,0); //Pivot Point
mLegLeft.add(mmLegLeft);
armorstand.add(mLegLeft);
//Right Leg
var mmLegRight = new THREE.Mesh(
new THREE.CubeGeometry(2/16, 11/16, 2/16),
matWood);
mmLegRight.position.set(0,-5.5/16,0);
mLegRight = new THREE.Object3D();
mLegRight.position.set(-2/16,11/16,0); //Pivot Point
mLegRight.add(mmLegRight);
armorstand.add(mLegRight);
//Left Arm
var mmArmLeft = new THREE.Mesh(
new THREE.CubeGeometry(2/16, 12/16, 2/16),
matWood);
mmArmLeft.position.set(0,-4/16,0);
mArmLeft = new THREE.Object3D();
mArmLeft.position.set(6/16,21/16,0); //Pivot Point
mArmLeft.add(mmArmLeft);
armorstand.add(mArmLeft);
//Right Arm
var mmArmRight = new THREE.Mesh(
new THREE.CubeGeometry(2/16, 12/16, 2/16),
matWood);
mmArmRight.position.set(0,-4/16,0);
mArmRight = new THREE.Object3D();
mArmRight.position.set(-6/16,21/16,0); //Pivot Point
mArmRight.add(mmArmRight);
armorstand.add(mArmRight);
//Body (consists of four parts)
var mmHip = new THREE.Mesh(
new THREE.CubeGeometry(8/16, 2/16, 2/16),
matWood);
mmHip.position.set(0,-11/16,0);
var mmBodyLeft = new THREE.Mesh(
new THREE.CubeGeometry(2/16, 7/16, 2/16),
matWood);
mmBodyLeft.position.set(2/16,-6.5/16,0);
var mmBodyRight = new THREE.Mesh(
new THREE.CubeGeometry(2/16, 7/16, 2/16),
matWood);
mmBodyRight.position.set(-2/16,-6.5/16,0);
var mmShoulders = new THREE.Mesh(
new THREE.CubeGeometry(12/16, 3/16, 3/16),
matWood);
mmShoulders.position.set(0,-1.5/16,0);
mBody = new THREE.Object3D();
mBody.position.set(0,23/16,0); //Pivot Point
mBody.add(mmHip);
mBody.add(mmBodyLeft);
mBody.add(mmBodyRight);
mBody.add(mmShoulders);
armorstand.add(mBody);
//Head (neck and skull)
var mmNeck = new THREE.Mesh(
new THREE.CubeGeometry(2/16, 7/16, 2/16),
matWood);
mmNeck.position.set(0,3.5/16,0);
/*
We do not want the head, as it obstructs a whole lot of the view. We can implement this,
once we've got an editor option to toggle it on and off.
var mmSkull = new THREE.Mesh(
new THREE.CubeGeometry(10/16, 10/16, 10/16),
matWood);
mmSkull.position.set(0,5/16,0);*/
mHead = new THREE.Object3D();
mHead.position.set(0,22/16,0); //Pivot Point
mHead.add(mmNeck);
armorstand.add(mHead);
//Add an armorstandwrapper to the scene, so the armorstand can be rotated naturally.
armorstandWrapper = new THREE.Object3D();
armorstand.position.set(0,-0.5,0);
armorstandWrapper.add(armorstand);
scene.add(armorstandWrapper);
camera = new THREE.PerspectiveCamera(45, width/height, 0.1, 1000); camera = new THREE.PerspectiveCamera(45, width/height, 0.1, 1000);
camera.position.y = 2; camera.position.y = 2;
camera.position.z = 4; camera.position.z = 4;
camera.lookAt(cube.position); camera.lookAt(viewCenter);
scene.add(camera); scene.add(camera);
var pointLight = new THREE.PointLight(0xffffff); var pointLight = new THREE.PointLight(0xffffff);
@ -88,8 +210,30 @@ function setup(){
} }
function handleInput(){ function handleInput(){
cube.material.color.setHex(Math.random() * 0xFFFFFF);
invisible = getCheckBox("invisible");
invulnerable = getCheckBox("invulnerable");
noBasePlate = getCheckBox("nobaseplate");
noGravity = getCheckBox("nogravity");
showArms = getCheckBox("showarms");
small = getCheckBox("small");
updateUI();
} }
function getCheckBox(name){
return $("input[name="+name+"]").prop("checked");
}
/** Changes stuff according to our input values */
function updateUI(){
//Hide/Show the arm section
if(showArms)
$("#inputarms").show();
else
$("#inputarms").hide();
}
function getMouseDeltaX(){ function getMouseDeltaX(){
var mouseDeltaX = 0; var mouseDeltaX = 0;
if(mouseDownX != null && mouseMoveX != null){ if(mouseDownX != null && mouseMoveX != null){
@ -110,8 +254,8 @@ function render(){
var deltaTime = clock.getDelta(); var deltaTime = clock.getDelta();
armorstand.rotation.y = rotY + getMouseDeltaX(); armorstandWrapper.rotation.y = rotY + getMouseDeltaX();
armorstand.rotation.x = rotX + getMouseDeltaY(); armorstandWrapper.rotation.x = rotX + getMouseDeltaY();
requestAnimationFrame(render); requestAnimationFrame(render);
} }

7
style.css
View file

@ -1,11 +1,8 @@
*{
margin: 0;
padding: 0;
}
html, body{ html, body{
height: 100%; height: 100%;
font-family: Arial; font-family: Arial;
margin: 0;
padding: 0;
} }
canvas{ canvas{