WebGL Minecraft 2
HTML
<script src="https://raw.github.com/SirFizX/webgl/master/js/Three.js"></script>
<script src="https://raw.github.com/SirFizX/webgl/master/js/Stats.js"></script>
<div id="container"></div>
<!--<div id="loader">
<h1>Loading items and models..</h1>
</div>-->
<div id="topbar">
<select id="selectcamera" disabled>
<option selected value="stevefront">Front camera</option>
<option value="steveback">Back camera</option>
<option value="steveeyes">Steve's eyes</option>
<option value="rotcamera">Rotating camera</option>
</select>
<button id="takescreenshot">Screenshot</button>
<input type=checkbox id="skycheckbox" checked>
<label for="skycheckbox">Skybox</label>
</div>
CSS
body {
padding: 0px;
margin: 0px;
overflow: hidden;
font-size: 13px;
}
#loader {
width: 100%;
text-align: center;
position: absolute;
font-family: Monospace;
top: 20%;
}
#topbar {
position: absolute;
background-color: rgba(255, 255, 255, 0.7);
left: 0px;
right: 0px;
padding: 1px;
text-align: center;
font-family: sans-serif;
height: 50px;
padding-left: 190px;
padding-right: 135px;
}
#share {
height: 24px;
overflow: hidden;
}
#ce {
position: absolute;
left: 90px;
top: 2px;
}
#badge {
position: absolute;
right: 0px;
top: 0px;
}
canvas {
position: absolute;
}
JavaScript
/* Created by djazz
* http://djazz.mine.nu
* Twitter: @daniel_hede
*/
// shim layer with setTimeout fallback
var requestAnimFrame = (function () {
return document.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function ( /* function */ callback, /* DOMElement */ element) {
window.setTimeout(callback, 1000 / 60);
};
}());
function cubeFromPlanes(size, mat) {
var cube = new THREE.Object3D();
var meshes = [];
for (var i = 0; i < 6; i++) {
var mesh = new THREE.Mesh(new THREE.PlaneGeometry(size, size), mat);
mesh.doubleSided = true;
cube.add(mesh);
meshes.push(mesh);
}
// Front
meshes[0].rotation.x = Math.PI / 2;
meshes[0].rotation.z = -Math.PI / 2;
meshes[0].position.x = size / 2;
// Back
meshes[1].rotation.x = Math.PI / 2;
meshes[1].rotation.z = Math.PI / 2;
meshes[1].position.x = -size / 2;
// Top
meshes[2].position.y = size / 2;
// Bottom
meshes[3].rotation.y = Math.PI;
meshes[3].rotation.z = Math.PI;
meshes[3].position.y = -size / 2;
// Left
meshes[4].rotation.x = Math.PI / 2;
meshes[4].position.z = size / 2;
// Right
meshes[5].rotation.x = -Math.PI / 2;
meshes[5].rotation.y = Math.PI;
meshes[5].position.z = -size / 2;
return cube;
};
function getMaterial(img, trans) {
var material = new THREE.MeshBasicMaterial({
map: new THREE.Texture(
img,
new THREE.UVMapping(),
THREE.ClampToEdgeWrapping,
THREE.ClampToEdgeWrapping,
THREE.NearestFilter,
THREE.NearestFilter, (trans ? THREE.RGBAFormat : THREE.RGBFormat)),
transparent: trans
});
material.map.needsUpdate = true;
return material;
};
function uvmap(geometry, face, x, y, w, h, rotateBy) {
if (!rotateBy) rotateBy = 0;
var uvs =...