1
0
Fork 0
mirror of https://github.com/haselkern/Minecraft-ArmorStand.git synced 2025-05-17 15:05:33 +00:00

Shiny, colorful cube

Has not much to do with Minecraft, but it's worth committing.
This commit is contained in:
haselkern 2014-08-17 18:01:41 +02:00
parent 18ddc0426c
commit 54b1bdef3e
4 changed files with 35960 additions and 10 deletions

View file

@ -1,15 +1,30 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="stylesheet" type="text/css" href="style.css" /> <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'>
<script src="three.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head> </head>
<body> <body>
<h1>Minecraft Armor Stand</h1> <script src="main.js"></script>
It might take some time, until this thing is ready.<br>
If you have nothing better to do, you can play some <a href="http://candybox2.net/">Candy Box</a>. <div id="gl"></div>
<div id="controls">
<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.
<div id="inputsection">
<input type="checkbox" name="small">Small Armor Stand<br>
<input type="checkbox" name="arms">Show Arms<br>
<input type="range" name="points" min="0" max="360" value="0">
</div>
</div>
</body> </body>
</html>
</html>

63
main.js Normal file
View file

@ -0,0 +1,63 @@
// BIG Thanks to tutsplus.com
// http://code.tutsplus.com/tutorials/webgl-with-threejs-basics--net-35688
// for helping me getting started
var width, height, renderer, scene, camera, cube;
var clock = new THREE.Clock;
$(document).ready(function(){
setup();
render();
$("input").on("input", function(){
handleInput();
});
$(':checkbox').change(function() {
handleInput();
});
});
function setup(){
width = $("#gl").width();
height = $("#gl").height();
renderer = new THREE.WebGLRenderer({ antialias: true, alpha:true });
renderer.setSize(width, height);
$("#gl").append(renderer.domElement);
scene = new THREE.Scene;
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;
scene.add(cube);
camera = new THREE.PerspectiveCamera(45, width/height, 0.1, 1000);
camera.position.y = 2;
camera.position.z = 4;
camera.lookAt(cube.position);
scene.add(camera);
var pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(0, 300, 200);
scene.add(pointLight);
}
function handleInput(){
cube.material.color.setHex(Math.random() * 0xFFFFFF);
}
function render(){
renderer.render(scene, camera);
var d = clock.getDelta();
cube.rotation.y += d;
requestAnimationFrame(render);
}

View file

@ -1,10 +1,40 @@
*{ *{
font-family: Arial;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
html, body{
height: 100%;
font-family: Arial;
}
canvas{
position: relative;
top: 0;
left: 0;
}
body{ body{
background-color: #dddddd; background-color: #dddddd;
}
#gl{
width: 60%;
height: 100%;
float: left;
}
#controls{
background-color: #ffffff;
box-shadow: 0 2px 4px #555555;
margin: 1em;
margin-left: 60%;
}
#inputsection{
margin: 0.5em;
}
h1{
text-align: center; text-align: center;
font-family: "Oswald", sans-serif;
} }

35842
three.js Normal file

File diff suppressed because one or more lines are too long