blessing-skin-server/libs/three.msp.js
2016-03-12 21:59:08 +08:00

663 lines
20 KiB
JavaScript
Executable File

/* Created by djazz
* http://djazz.mine.nu/
* @daniel_hede on Twitter
* daniel_hede in Minecraft
*
* https://github.com/daniel-j/chrome-minecraft-skin-preview/blob/master/skin.js
*
* Editted by printempw
* https://prinzeugen.net
* Added support for high-resolution skin & capes,
* also added external interfaces
*/
var MSP = (function (global, undefined) {
'use strict';
// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback, /* DOMElement */ element) {
window.setTimeout(callback, 1000 / 60);
};
})();
var supportWebGL = !!global.WebGLRenderingContext && (!!global.document.createElement('canvas').getContext('experimental-webgl') || !!global.document.createElement('canvas').getContext('webgl'));
var container = global.document.querySelector('#skinpreview');
// Width and height
var cw = 300, ch = 300;
var tileUvWidth = 1/64;
var tileUvHeight = 1/32;
// Init <canvas>
var skinBig = global.document.createElement('canvas');
var sbc = skinBig.getContext('2d');
var sizeRatio = 8;
skinBig.width = 64*sizeRatio;
skinBig.height = 32*sizeRatio;
var skincanvas = global.document.createElement('canvas');
var skinc = skincanvas.getContext('2d');
skincanvas.width = 64;
skincanvas.height = 32;
var capecanvas = global.document.createElement('canvas');
var capec = capecanvas.getContext('2d');
capecanvas.width = 64;
capecanvas.height = 32;
// You can change these value via external interface
var isRotating = true;
var isPaused = false;
var isYfreezed = false;
var isFunnyRunning = false;
var getMaterial = function (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;
};
var uvmap = function (mesh, face, x, y, w, h, rotateBy) {
if(!rotateBy) rotateBy = 0;
var uvs = mesh.geometry.faceVertexUvs[0][face];
var tileU = x;
var tileV = y;
uvs[ (0 + rotateBy) % 4 ].u = tileU * tileUvWidth;
uvs[ (0 + rotateBy) % 4 ].v = tileV * tileUvHeight;
uvs[ (1 + rotateBy) % 4 ].u = tileU * tileUvWidth;
uvs[ (1 + rotateBy) % 4 ].v = tileV * tileUvHeight + h * tileUvHeight;
uvs[ (2 + rotateBy) % 4 ].u = tileU * tileUvWidth + w * tileUvWidth;
uvs[ (2 + rotateBy) % 4 ].v = tileV * tileUvHeight + h * tileUvHeight;
uvs[ (3 + rotateBy) % 4 ].u = tileU * tileUvWidth + w * tileUvWidth;
uvs[ (3 + rotateBy) % 4 ].v = tileV * tileUvHeight;
};
var cubeFromPlanes = function (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;
};
var charMaterial = getMaterial(skincanvas, false);
var charMaterialTrans = getMaterial(skincanvas, true);
var capeMaterial = getMaterial(capecanvas, false);
var camera = new THREE.PerspectiveCamera(35, cw / ch, 1, 1000);
camera.position.z = 50;
//camera.target.position.y = -2;
var scene = new THREE.Scene();
scene.add(camera);
var headgroup = new THREE.Object3D();
var upperbody = new THREE.Object3D();
//Light
var pointLightA = new THREE.DirectionalLight(0xFFFFFF, 1);
var pointLightB = new THREE.DirectionalLight(0x666666, 1);
var environmentalLight = new THREE.AmbientLight(0x555555);
pointLightA.position.set(100, 120, 80);
pointLightB.position.set(-100, -40, -80);
scene.add(pointLightA);
scene.add(pointLightB);
scene.add(environmentalLight);
// Left leg
var leftleggeo = new THREE.CubeGeometry(4, 12, 4);
for(var i=0; i < 8; i+=1) {
leftleggeo.vertices[i].y -= 6;
}
var leftleg = new THREE.Mesh(leftleggeo, charMaterial);
leftleg.position.z = -2;
leftleg.position.y = -6;
uvmap(leftleg, 0, 8, 20, -4, 12);
uvmap(leftleg, 1, 16, 20, -4, 12);
uvmap(leftleg, 2, 4, 16, 4, 4, 3);
uvmap(leftleg, 3, 8, 20, 4, -4, 1);
uvmap(leftleg, 4, 12, 20, -4, 12);
uvmap(leftleg, 5, 4, 20, -4, 12);
// Right leg
var rightleggeo = new THREE.CubeGeometry(4, 12, 4);
for(var i=0; i < 8; i+=1) {
rightleggeo.vertices[i].y -= 6;
}
var rightleg = new THREE.Mesh(rightleggeo, charMaterial);
rightleg.position.z = 2;
rightleg.position.y = -6;
uvmap(rightleg, 0, 4, 20, 4, 12);
uvmap(rightleg, 1, 12, 20, 4, 12);
uvmap(rightleg, 2, 8, 16, -4, 4, 3);
uvmap(rightleg, 3, 12, 20, -4, -4, 1);
uvmap(rightleg, 4, 0, 20, 4, 12);
uvmap(rightleg, 5, 8, 20, 4, 12);
// Body
var bodygeo = new THREE.CubeGeometry(4, 12, 8);
var bodymesh = new THREE.Mesh(bodygeo, charMaterial);
uvmap(bodymesh, 0, 20, 20, 8, 12);
uvmap(bodymesh, 1, 32, 20, 8, 12);
uvmap(bodymesh, 2, 20, 16, 8, 4, 1);
uvmap(bodymesh, 3, 28, 16, 8, 4, 3);
uvmap(bodymesh, 4, 16, 20, 4, 12);
uvmap(bodymesh, 5, 28, 20, 4, 12);
upperbody.add(bodymesh);
// Left arm
var leftarmgeo = new THREE.CubeGeometry(4, 12, 4);
for(var i=0; i < 8; i+=1) {
leftarmgeo.vertices[i].y -= 4;
}
var leftarm = new THREE.Mesh(leftarmgeo, charMaterial);
leftarm.position.z = -6;
leftarm.position.y = 4;
leftarm.rotation.x = Math.PI/32;
uvmap(leftarm, 0, 48, 20, -4, 12);
uvmap(leftarm, 1, 56, 20, -4, 12);
uvmap(leftarm, 2, 48, 16, -4, 4, 1);
uvmap(leftarm, 3, 52, 16, -4, 4, 3);
uvmap(leftarm, 4, 52, 20, -4, 12);
uvmap(leftarm, 5, 44, 20, -4, 12);
upperbody.add(leftarm);
// Right arm
var rightarmgeo = new THREE.CubeGeometry(4, 12, 4);
for(var i=0; i < 8; i+=1) {
rightarmgeo.vertices[i].y -= 4;
}
var rightarm = new THREE.Mesh(rightarmgeo, charMaterial);
rightarm.position.z = 6;
rightarm.position.y = 4;
rightarm.rotation.x = -Math.PI/32;
uvmap(rightarm, 0, 44, 20, 4, 12);
uvmap(rightarm, 1, 52, 20, 4, 12);
uvmap(rightarm, 2, 44, 16, 4, 4, 1);
uvmap(rightarm, 3, 48, 16, 4, 4, 3);
uvmap(rightarm, 4, 40, 20, 4, 12);
uvmap(rightarm, 5, 48, 20, 4, 12);
upperbody.add(rightarm);
//Head
var headgeo = new THREE.CubeGeometry(8, 8, 8);
var headmesh = new THREE.Mesh(headgeo, charMaterial);
headmesh.position.y = 2;
uvmap(headmesh, 0, 8, 8, 8, 8);
uvmap(headmesh, 1, 24, 8, 8, 8);
uvmap(headmesh, 2, 8, 0, 8, 8, 1);
uvmap(headmesh, 3, 16, 0, 8, 8, 1);
uvmap(headmesh, 4, 0, 8, 8, 8);
uvmap(headmesh, 5, 16, 8, 8, 8);
headgroup.add(headmesh);
// Helmet/hat
var helmetgeo = new THREE.CubeGeometry(9, 9, 9);
var helmetmesh = new THREE.Mesh(helmetgeo, charMaterialTrans);
helmetmesh.doubleSided = true;
helmetmesh.position.y = 2;
uvmap(helmetmesh, 0, 32+8, 8, 8, 8);
uvmap(helmetmesh, 1, 32+24, 8, 8, 8);
uvmap(helmetmesh, 2, 32+8, 0, 8, 8, 1);
uvmap(helmetmesh, 3, 32+16, 0, 8, 8, 3);
uvmap(helmetmesh, 4, 32+0, 8, 8, 8);
uvmap(helmetmesh, 5, 32+16, 8, 8, 8);
headgroup.add(helmetmesh);
var helmet = cubeFromPlanes(9, charMaterialTrans);
helmet.position.y = 2;
uvmap(helmet.children[0], 0, 32+8, 8, 8, 8);
uvmap(helmet.children[1], 0, 32+24, 8, 8, 8);
uvmap(helmet.children[2], 0, 32+8, 0, 8, 8, 1);
uvmap(helmet.children[3], 0, 32+16, 0, 8, 8, 3);
uvmap(helmet.children[4], 0, 32+0, 8, 8, 8);
uvmap(helmet.children[5], 0, 32+16, 8, 8, 8);
headgroup.add(helmet);
/* ===== Ears Start (作者的彩蛋,没啥卵用) ===== */
var ears = new THREE.Object3D();
var eargeo = new THREE.CubeGeometry(1, (9/8)*6, (9/8)*6);
var leftear = new THREE.Mesh(eargeo, charMaterial);
var rightear = new THREE.Mesh(eargeo, charMaterial);
leftear.position.y = 2+(9/8)*5;
rightear.position.y = 2+(9/8)*5;
leftear.position.z = -(9/8)*5;
rightear.position.z = (9/8)*5;
// Right ear share same geometry, same uv-maps
uvmap(leftear, 0, 25, 1, 6, 6); // Front side
uvmap(leftear, 1, 32, 1, 6, 6); // Back side
uvmap(leftear, 2, 25, 0, 6, 1, 1); // Top edge
uvmap(leftear, 3, 31, 0, 6, 1, 1); // Bottom edge
uvmap(leftear, 4, 24, 1, 1, 6); // Left edge
uvmap(leftear, 5, 31, 1, 1, 6); // Right edge
ears.add(leftear);
ears.add(rightear);
leftear.visible = rightear.visible = false;
headgroup.add(ears);
headgroup.position.y = 8;
/* ================ Ears End ================== */
// Init cape
var capeOrigo = new THREE.Object3D();
var capegeo = new THREE.CubeGeometry(1, 16, 10);
var capemesh = new THREE.Mesh(capegeo, capeMaterial);
capemesh.position.y = -8;
capemesh.visible = false;
uvmap(capemesh, 0, 1, 1, 10, 16); // Front side
uvmap(capemesh, 1, 12, 1, 10, 16); // Back side
uvmap(capemesh, 2, 1, 0, 10, 1); // Top edge
uvmap(capemesh, 3, 11, 0, 10, 1, 1); // Bottom edge
uvmap(capemesh, 4, 0, 1, 1, 16); // Left edge
uvmap(capemesh, 5, 11, 1, 1, 16); // Right edge
capeOrigo.rotation.y = Math.PI;
capeOrigo.position.x = -2;
capeOrigo.position.y = 6;
capeOrigo.add(capemesh);
var playerModel = new THREE.Object3D();
playerModel.add(leftleg);
playerModel.add(rightleg);
playerModel.add(upperbody);
playerModel.add(headgroup);
playerModel.add(capeOrigo);
playerModel.position.y = 6;
var playerGroup = new THREE.Object3D();
playerGroup.add(playerModel);
scene.add(playerGroup);
var mouseX = 0;
var mouseY = 0.1;
var originMouseX = 0;
var originMouseY = 0;
var rad = 0;
var isMouseOver = false;
var isMouseDown = false;
var counter = 0;
var firstRender = true;
var startTime = Date.now();
var pausedTime = 0;
var render = function () {
requestAnimFrame(render, renderer.domElement);
var oldRad = rad;
var time = (Date.now() - startTime)/1000;
if(!isMouseDown) {
//mouseX*=0.95;
if(!isYfreezed) {
mouseY*=0.97;
}
if(isRotating) {
rad += 2;
}
}
else {
rad = mouseX;
}
if(mouseY > 500) {
mouseY = 500;
}
else if(mouseY < -500) {
mouseY = -500;
}
camera.position.x = -Math.cos(rad/(cw/2)+(Math.PI/0.9));
camera.position.z = -Math.sin(rad/(cw/2)+(Math.PI/0.9));
camera.position.y = (mouseY/(ch/2))*1.5+0.2;
camera.position.setLength(70);
camera.lookAt(new THREE.Vector3(0, 1.5, 0));
if(!isPaused) {
counter+=0.01;
headgroup.rotation.y = Math.sin(time*1.5)/5;
headgroup.rotation.z = Math.sin(time)/6;
if(isFunnyRunning) {
rightarm.rotation.z = 2 * Math.cos(0.6662 * time*10 + Math.PI);
rightarm.rotation.x = 1 * (Math.cos(0.2812 * time*10) - 1);
leftarm.rotation.z = 2 * Math.cos(0.6662 * time*10);
leftarm.rotation.x = 1 * (Math.cos(0.2312 * time*10) + 1);
rightleg.rotation.z = 1.4 * Math.cos(0.6662 * time*10);
leftleg.rotation.z = 1.4 * Math.cos(0.6662 * time*10 + Math.PI);
playerGroup.position.y = -6+1 * Math.cos(0.6662 * time*10 * 2); // Jumping
playerGroup.position.z = 0.15 * Math.cos(0.6662 * time*10); // Dodging when running
playerGroup.rotation.x = 0.01 * Math.cos(0.6662 * time*10 + Math.PI); // Slightly tilting when running
capeOrigo.rotation.z = 0.1 * Math.sin(0.6662 * time*10 * 2)+Math.PI/2.5;
}
else {
leftarm.rotation.z = -Math.sin(time*3)/2;
leftarm.rotation.x = (Math.cos(time*3)+Math.PI/2)/30;
rightarm.rotation.z = Math.sin(time*3)/2;
rightarm.rotation.x = -(Math.cos(time*3)+Math.PI/2)/30;
leftleg.rotation.z = Math.sin(time*3)/3;
rightleg.rotation.z = -Math.sin(time*3)/3;
capeOrigo.rotation.z = Math.sin(time*2)/15+Math.PI/15;
playerGroup.position.y = -6; // Not jumping
}
}
renderer.render(scene, camera);
};
if(supportWebGL) {
var renderer = new THREE.WebGLRenderer({antialias: true,precision:'highp'});
}
else {
var renderer = new THREE.CanvasRenderer({antialias: true});
}
var threecanvas = renderer.domElement;
renderer.setSize(cw, ch);
//renderer.setClearColorHex(0x000000, 0.25);
// container.appendChild(threecanvas);
var onMouseMove = function (e) {
if(isMouseDown) {
mouseX = (e.pageX - threecanvas.offsetLeft - originMouseX);
mouseY = (e.pageY - threecanvas.offsetTop - originMouseY);
}
};
threecanvas.addEventListener('mousedown', function (e) {
e.preventDefault();
originMouseX = (e.pageX - threecanvas.offsetLeft) - rad;
originMouseY = (e.pageY - threecanvas.offsetTop) - mouseY;
isMouseDown = true;
isMouseOver = true;
onMouseMove(e);
}, false);
global.addEventListener('mouseup', function (e) {
isMouseDown = false;
}, false);
global.addEventListener('mousemove', onMouseMove, false);
threecanvas.addEventListener('mouseout', function (e) {
isMouseOver = false;
}, false);
// container.appendChild(skinBig);
/* ============================================================ */
// 默认开始渲染的地方
render();
var skin = new Image();
skin.onload = function () {
/* 高清皮肤支持 */
skincanvas.width = skin.width;
skincanvas.height = skin.height;
skinc.clearRect(0, 0, 64, 32);
skinc.drawImage(skin, 0, 0);
var imgdata = skinc.getImageData(0, 0, 64, 32);
var pixels = imgdata.data;
sbc.clearRect(0, 0, skinBig.width, skinBig.height);
sbc.save();
var isOnecolor = true;
var colorCheckAgainst = [40, 0];
var colorIndex = (colorCheckAgainst[0]+colorCheckAgainst[1]*64)*4;
var isPixelDifferent = function (x, y) {
if(pixels[(x+y*64)*4+0] !== pixels[colorIndex+0] || pixels[(x+y*64)*4+1] !== pixels[colorIndex+1] || pixels[(x+y*64)*4+2] !== pixels[colorIndex+2] || pixels[(x+y*64)*4+3] !== pixels[colorIndex+3]) {
return true;
}
return false;
};
// Check if helmet/hat is a solid color
// Bottom row
for(var i=32; i < 64; i+=1) {
for(var j=8; j < 16; j+=1) {
if(isPixelDifferent(i, j)) {
isOnecolor = false;
break;
}
}
if(!isOnecolor) {
break;
}
}
if(!isOnecolor) {
// Top row
for(var i=40; i < 56; i+=1) {
for(var j=0; j < 8; j+=1) {
if(isPixelDifferent(i, j)) {
isOnecolor = false;
break;
}
}
if(!isOnecolor) {
break;
}
}
}
for(var i=0; i < 64; i+=1) {
for(var j=0; j < 32; j+=1) {
if(isOnecolor && ((i >= 32 && i < 64 && j >= 8 && j < 16) || (i >= 40 && i < 56 && j >= 0 && j < 8))) {
pixels[(i+j*64)*4+3] = 0;
}
sbc.fillStyle = 'rgba('+pixels[(i+j*64)*4+0]+', '+pixels[(i+j*64)*4+1]+', '+pixels[(i+j*64)*4+2]+', '+pixels[(i+j*64)*4+3]/255+')';
sbc.fillRect(i*sizeRatio, j*sizeRatio, sizeRatio, sizeRatio);
}
}
sbc.restore();
skinc.putImageData(imgdata, 0, 0);
charMaterial.map.needsUpdate = true;
charMaterialTrans.map.needsUpdate = true;
};
var cape = new Image();
cape.onload = function () {
/* 高清披风支持 */
capecanvas.width = cape.width;
capecanvas.height = cape.height;
capec.clearRect(0, 0, 64, 32);
capec.drawImage(cape, 0, 0);
capeMaterial.map.needsUpdate = true;
capemesh.visible = true;
};
cape.onerror = function () {
capemesh.visible = false;
};
threecanvas.addEventListener('dragenter', function (e) {
e.stopPropagation();
e.preventDefault();
threecanvas.className = "dragenter";
}, false);
threecanvas.addEventListener('dragleave', function (e) {
e.stopPropagation();
e.preventDefault();
threecanvas.className = "";
}, false);
threecanvas.addEventListener('dragover', function (e) {
e.stopPropagation();
e.preventDefault();
}, false);
threecanvas.addEventListener('drop', function (e) {
e.stopPropagation();
e.preventDefault();
threecanvas.className = "";
var dt = e.dataTransfer;
var files = dt.files;
handleFiles(files);
}, false);
// 定义外部接口
return {
getStatus: function(key) {
switch(key) {
case "rotation":
return isRotating;
break;
case "movements":
return !isPaused;
break;
case "camera":
return !isYfreezed;
break;
case "running":
return isFunnyRunning;
break;
default:
}
},
setStatus: function(key, value) {
switch(key) {
case "rotation":
isRotating = value;
return isRotating;
break;
case "movements":
isPaused = !value;
// \o/
if(isPaused) {
pausedTime = Date.now() - startTime;
} else {
startTime = Date.now() - pausedTime;
}
return !isPaused;
break;
case "camera":
isYfreezed = !value;
return !isYfreezed;
break;
case "running":
isFunnyRunning = value;
return isFunnyRunning;
break;
default:
}
},
showCape: function(val) {
if(val) {
capeOrigo.add(capemesh);
} else {
capeOrigo.remove(capemesh);
}
},
changeSkin: function(url) {
skin.src = url;
},
changeCape: function(url) {
cape.src = url;
},
get3dSkinCanvas: function(width, height) {
renderer.setSize(width, height);
return threecanvas;
},
// 作者的彩蛋(笑
setEars: function (val) {
leftear.visible = rightear.visible = val;
}
};
}(this));