clean up code
This commit is contained in:
yushijinhun
parent
ef384b54a3
commit
02840ec6a4
|
|
@ -3,231 +3,13 @@
|
||||||
Project link: https://github.com/yushijinhun/skinpreview3d.js
|
Project link: https://github.com/yushijinhun/skinpreview3d.js
|
||||||
*/
|
*/
|
||||||
|
|
||||||
function SkinUtil(){
|
|
||||||
this.convert6432To6464 = context => {
|
|
||||||
this.copyImage(context, 4, 16, 4, 4, 20, 48, true); // Top Leg
|
|
||||||
this.copyImage(context, 8, 16, 4, 4, 24, 48, true); // Bottom Leg
|
|
||||||
this.copyImage(context, 0, 20, 4, 12, 24, 52, true); // Outer Leg
|
|
||||||
this.copyImage(context, 4, 20, 4, 12, 20, 52, true); // Front Leg
|
|
||||||
this.copyImage(context, 8, 20, 4, 12, 16, 52, true); // Inner Leg
|
|
||||||
this.copyImage(context, 12, 20, 4, 12, 28, 52, true); // Back Leg
|
|
||||||
|
|
||||||
this.copyImage(context, 44, 16, 4, 4, 36, 48, true); // Top Arm
|
|
||||||
this.copyImage(context, 48, 16, 4, 4, 40, 48, true); // Bottom Arm
|
|
||||||
this.copyImage(context, 40, 20, 4, 12, 40, 52, true); // Outer Arm
|
|
||||||
this.copyImage(context, 44, 20, 4, 12, 36, 52, true); // Front Arm
|
|
||||||
this.copyImage(context, 48, 20, 4, 12, 32, 52, true); // Inner Arm
|
|
||||||
this.copyImage(context, 52, 20, 4, 12, 44, 52, true); // Back Arm
|
|
||||||
}
|
|
||||||
|
|
||||||
this.copyImage = (context, sX, sY, w, h, dX, dY, flipHorizontal) => {
|
|
||||||
var imgData = context.getImageData(sX, sY, w, h);
|
|
||||||
|
|
||||||
if(flipHorizontal){
|
|
||||||
for(y = 0; y < h; y++) {
|
|
||||||
for(x = 0; x < (w / 2); x++) {
|
|
||||||
index = (x + y * w) * 4;
|
|
||||||
index2 = ((w - x - 1) + y * w) * 4;
|
|
||||||
var pA1 = imgData.data[index];
|
|
||||||
var pA2 = imgData.data[index+1];
|
|
||||||
var pA3 = imgData.data[index+2];
|
|
||||||
var pA4 = imgData.data[index+3];
|
|
||||||
|
|
||||||
var pB1 = imgData.data[index2];
|
|
||||||
var pB2 = imgData.data[index2+1];
|
|
||||||
var pB3 = imgData.data[index2+2];
|
|
||||||
var pB4 = imgData.data[index2+3];
|
|
||||||
|
|
||||||
imgData.data[index] = pB1;
|
|
||||||
imgData.data[index+1] = pB2;
|
|
||||||
imgData.data[index+2] = pB3;
|
|
||||||
imgData.data[index+3] = pB4;
|
|
||||||
|
|
||||||
imgData.data[index2] = pA1;
|
|
||||||
imgData.data[index2+1] = pA2;
|
|
||||||
imgData.data[index2+2] = pA3;
|
|
||||||
imgData.data[index2+3] = pA4;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
context.putImageData(imgData,dX,dY);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.fixOverlay = context => {
|
|
||||||
this.fixHead2(context);
|
|
||||||
this.fixBody2(context);
|
|
||||||
this.fixRightArm2(context);
|
|
||||||
this.fixLeftArm2(context);
|
|
||||||
this.fixRightLeg2(context);
|
|
||||||
this.fixLeftLeg2(context);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.fixHead2 = context => {
|
|
||||||
// Front
|
|
||||||
if(this.hasTransparency(context, 40, 8, 8, 8)) return;
|
|
||||||
|
|
||||||
// Top, Bottom, Right, Left, Back
|
|
||||||
if(this.hasTransparency(context, 40, 0, 8, 8)) return;
|
|
||||||
if(this.hasTransparency(context, 48, 0, 8, 8)) return;
|
|
||||||
if(this.hasTransparency(context, 32, 8, 8, 8)) return;
|
|
||||||
if(this.hasTransparency(context, 48, 8, 8, 8)) return;
|
|
||||||
if(this.hasTransparency(context, 56, 8, 8, 8)) return;
|
|
||||||
|
|
||||||
// Didn't have transparency, clearing the head overlay area.
|
|
||||||
context.clearRect(40, 0, 8, 8);
|
|
||||||
context.clearRect(48, 0, 8, 8);
|
|
||||||
context.clearRect(32, 8, 8, 8);
|
|
||||||
context.clearRect(40, 8, 8, 8);
|
|
||||||
context.clearRect(48, 8, 8, 8);
|
|
||||||
context.clearRect(56, 8, 8, 8);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.fixBody2 = context => {
|
|
||||||
// Front
|
|
||||||
if(this.hasTransparency(context, 20, 36, 8, 12)) return;
|
|
||||||
|
|
||||||
// Top, Bottom, Right, Left, Back
|
|
||||||
if(this.hasTransparency(context, 20, 32, 8, 4)) return;
|
|
||||||
if(this.hasTransparency(context, 28, 32, 8, 4)) return;
|
|
||||||
if(this.hasTransparency(context, 16, 36, 4, 12)) return;
|
|
||||||
if(this.hasTransparency(context, 28, 36, 4, 12)) return;
|
|
||||||
if(this.hasTransparency(context, 32, 36, 8, 12)) return;
|
|
||||||
|
|
||||||
// Didn't have transparency, clearing the body overlay area.
|
|
||||||
context.clearRect(20, 32, 8, 4);
|
|
||||||
context.clearRect(28, 32, 8, 4);
|
|
||||||
context.clearRect(16, 36, 4, 12);
|
|
||||||
context.clearRect(20, 36, 8, 12);
|
|
||||||
context.clearRect(28, 36, 4, 12);
|
|
||||||
context.clearRect(32, 36, 8, 12);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.fixRightArm2 = context => {
|
|
||||||
// Front
|
|
||||||
if(this.hasTransparency(context, 44, 36, 4, 12)) return;
|
|
||||||
|
|
||||||
// Top, Bottom, Right, Left, Back
|
|
||||||
if(this.hasTransparency(context, 44, 32, 4, 4)) return;
|
|
||||||
if(this.hasTransparency(context, 48, 32, 4, 4)) return;
|
|
||||||
if(this.hasTransparency(context, 40, 36, 4, 12)) return;
|
|
||||||
if(this.hasTransparency(context, 48, 36, 4, 12)) return;
|
|
||||||
if(this.hasTransparency(context, 52, 36, 4, 12)) return;
|
|
||||||
|
|
||||||
// Didn't have transparency, clearing the right arm overlay area.
|
|
||||||
context.clearRect(44, 32, 4, 4);
|
|
||||||
context.clearRect(48, 32, 4, 4);
|
|
||||||
context.clearRect(40, 36, 4, 12);
|
|
||||||
context.clearRect(44, 36, 4, 12);
|
|
||||||
context.clearRect(48, 36, 4, 12);
|
|
||||||
context.clearRect(52, 36, 4, 12);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.fixLeftArm2 = context => {
|
|
||||||
// Front
|
|
||||||
if(this.hasTransparency(context, 52, 52, 4, 12)) return;
|
|
||||||
|
|
||||||
// Top, Bottom, Right, Left, Back
|
|
||||||
if(this.hasTransparency(context, 52, 48, 4, 4)) return;
|
|
||||||
if(this.hasTransparency(context, 56, 48, 4, 4)) return;
|
|
||||||
if(this.hasTransparency(context, 48, 52, 4, 12)) return;
|
|
||||||
if(this.hasTransparency(context, 56, 52, 4, 12)) return;
|
|
||||||
if(this.hasTransparency(context, 60, 52, 4, 12)) return;
|
|
||||||
|
|
||||||
// Didn't have transparency, clearing the left arm overlay area.
|
|
||||||
context.clearRect(52, 48, 4, 4);
|
|
||||||
context.clearRect(56, 48, 4, 4);
|
|
||||||
context.clearRect(48, 52, 4, 12);
|
|
||||||
context.clearRect(52, 52, 4, 12);
|
|
||||||
context.clearRect(56, 52, 4, 12);
|
|
||||||
context.clearRect(60, 52, 4, 12);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.fixRightLeg2 = context => {
|
|
||||||
// Front
|
|
||||||
if(this.hasTransparency(context, 4, 36, 4, 12)) return;
|
|
||||||
|
|
||||||
// Top, Bottom, Right, Left, Back
|
|
||||||
if(this.hasTransparency(context, 4, 32, 4, 4)) return;
|
|
||||||
if(this.hasTransparency(context, 8, 32, 4, 4)) return;
|
|
||||||
if(this.hasTransparency(context, 0, 36, 4, 12)) return;
|
|
||||||
if(this.hasTransparency(context, 8, 36, 4, 12)) return;
|
|
||||||
if(this.hasTransparency(context, 12, 36, 4, 12)) return;
|
|
||||||
|
|
||||||
// Didn't have transparency, clearing the right leg overlay area.
|
|
||||||
context.clearRect(4, 32, 4, 4);
|
|
||||||
context.clearRect(8, 32, 4, 4);
|
|
||||||
context.clearRect(0, 36, 4, 12);
|
|
||||||
context.clearRect(4, 36, 4, 12);
|
|
||||||
context.clearRect(8, 36, 4, 12);
|
|
||||||
context.clearRect(12, 36, 4, 12);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.fixLeftLeg2 = context => {
|
|
||||||
// Front
|
|
||||||
if(this.hasTransparency(context, 4, 52, 4, 12)) return;
|
|
||||||
|
|
||||||
// Top, Bottom, Right, Left, Back
|
|
||||||
if(this.hasTransparency(context, 4, 48, 4, 4)) return;
|
|
||||||
if(this.hasTransparency(context, 8, 48, 4, 4)) return;
|
|
||||||
if(this.hasTransparency(context, 0, 52, 4, 12)) return;
|
|
||||||
if(this.hasTransparency(context, 8, 52, 4, 12)) return;
|
|
||||||
if(this.hasTransparency(context, 12, 52, 4, 12)) return;
|
|
||||||
|
|
||||||
// Didn't have transparency, clearing the left leg overlay area.
|
|
||||||
context.clearRect(4, 48, 4, 4);
|
|
||||||
context.clearRect(8, 48, 4, 4);
|
|
||||||
context.clearRect(0, 52, 4, 12);
|
|
||||||
context.clearRect(4, 52, 4, 12);
|
|
||||||
context.clearRect(8, 52, 4, 12);
|
|
||||||
context.clearRect(12, 52, 4, 12);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.fixNonVisible = context => {
|
|
||||||
// 64x32 and 64x64 skin parts
|
|
||||||
context.clearRect(0, 0, 8, 8);
|
|
||||||
context.clearRect(24, 0, 16, 8);
|
|
||||||
context.clearRect(56, 0, 8, 8);
|
|
||||||
context.clearRect(0, 16, 4, 4);
|
|
||||||
context.clearRect(12, 16, 8, 4);
|
|
||||||
context.clearRect(36, 16, 8, 4);
|
|
||||||
context.clearRect(52, 16, 4, 4);
|
|
||||||
context.clearRect(56, 16, 8, 32);
|
|
||||||
|
|
||||||
// 64x64 skin parts
|
|
||||||
context.clearRect(0, 32, 4, 4);
|
|
||||||
context.clearRect(12, 32, 8, 4);
|
|
||||||
context.clearRect(36, 32, 8, 4);
|
|
||||||
context.clearRect(52, 32, 4, 4);
|
|
||||||
context.clearRect(0, 48, 4, 4);
|
|
||||||
context.clearRect(12, 48, 8, 4);
|
|
||||||
context.clearRect(28, 48, 8, 4);
|
|
||||||
context.clearRect(44, 48, 8, 4);
|
|
||||||
context.clearRect(60, 48, 8, 4);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.hasTransparency = (context, x, y, w, h) => {
|
|
||||||
var imgData = context.getImageData(x, y, w, h);
|
|
||||||
|
|
||||||
for(y = 0; y < h; y++) {
|
|
||||||
for(x = 0; x < w; x++) {
|
|
||||||
var index = (x + y * w) * 4;
|
|
||||||
if(imgData.data[index + 3] == 0) return true; // Has transparency
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
(function($) {
|
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
|
(function($) {
|
||||||
$.fn.skinPreview3D = function (options) {
|
$.fn.skinPreview3D = function (options) {
|
||||||
var skinCanvas = document.createElement('canvas');
|
var skinCanvas = document.createElement('canvas');
|
||||||
var capeCanvas = document.createElement('canvas');
|
var capeCanvas = document.createElement('canvas');
|
||||||
var sp = new SkinPreview3D(this, skinCanvas, capeCanvas, options.width, options.height);
|
var sp = new SkinPreview3D(this, skinCanvas, capeCanvas, options.width, options.height, options.isSlim === true);
|
||||||
sp.setSkin(options.skinUrl);
|
sp.setSkin(options.skinUrl);
|
||||||
if(options.capeUrl != null){
|
if(options.capeUrl != null){
|
||||||
sp.setCape(options.capeUrl);
|
sp.setCape(options.capeUrl);
|
||||||
|
|
@ -236,11 +18,7 @@ function SkinUtil(){
|
||||||
|
|
||||||
} (window.jQuery));
|
} (window.jQuery));
|
||||||
|
|
||||||
function SkinPreview3D(model, skinCanvas, capeCanvas, canvasW, canvasH){
|
function SkinPreview3D(model, skinCanvas, capeCanvas, canvasW, canvasH, isSlim){ // TODO: isSlim
|
||||||
var scene, camera, renderer;
|
|
||||||
var geometry, mesh;
|
|
||||||
var rightLeg2Box, leftLeg2Box;
|
|
||||||
|
|
||||||
var radius = 32;
|
var radius = 32;
|
||||||
var isPaused = false;
|
var isPaused = false;
|
||||||
var originMouseX = 0;
|
var originMouseX = 0;
|
||||||
|
|
@ -249,12 +27,10 @@ function SkinPreview3D(model, skinCanvas, capeCanvas, canvasW, canvasH){
|
||||||
var angleRot = 0;
|
var angleRot = 0;
|
||||||
var mouseDown = false;
|
var mouseDown = false;
|
||||||
|
|
||||||
var util = new SkinUtil();
|
var camera = new THREE.PerspectiveCamera(75, canvasW / canvasH, 1, 10000);
|
||||||
|
|
||||||
camera = new THREE.PerspectiveCamera(75, canvasW / canvasH, 1, 10000);
|
|
||||||
camera.position.y = -12;
|
camera.position.y = -12;
|
||||||
|
|
||||||
scene = new THREE.Scene();
|
var scene = new THREE.Scene();
|
||||||
|
|
||||||
skinCanvas.width = 64;
|
skinCanvas.width = 64;
|
||||||
skinCanvas.height = 64;
|
skinCanvas.height = 64;
|
||||||
|
|
@ -272,26 +48,18 @@ function SkinPreview3D(model, skinCanvas, capeCanvas, canvasW, canvasH){
|
||||||
skinTexture.magFilter = THREE.NearestFilter;
|
skinTexture.magFilter = THREE.NearestFilter;
|
||||||
skinTexture.minFilter = THREE.NearestMipMapNearestFilter;
|
skinTexture.minFilter = THREE.NearestMipMapNearestFilter;
|
||||||
|
|
||||||
layer1Material = new THREE.MeshBasicMaterial({map: skinTexture, side: THREE.FrontSide});
|
var layer1Material = new THREE.MeshBasicMaterial({map: skinTexture, side: THREE.FrontSide});
|
||||||
layer2Material = new THREE.MeshBasicMaterial({map: skinTexture, transparent: true, opacity: 1, side: THREE.DoubleSide});
|
var layer2Material = new THREE.MeshBasicMaterial({map: skinTexture, transparent: true, opacity: 1, side: THREE.DoubleSide});
|
||||||
capeMaterial = new THREE.MeshBasicMaterial({map: capeTexture});
|
var capeMaterial = new THREE.MeshBasicMaterial({map: capeTexture});
|
||||||
|
|
||||||
var skinImg = new Image();
|
var skinImg = new Image();
|
||||||
skinImg.crossOrigin = '';
|
skinImg.crossOrigin = '';
|
||||||
var hasAnimate = false;
|
var hasAnimate = false;
|
||||||
skinImg.onload = () => {
|
skinImg.onload = () => {
|
||||||
|
|
||||||
skinContext.clearRect(0, 0, 64, 64);
|
skinContext.clearRect(0, 0, 64, 64);
|
||||||
skinContext.drawImage(skinImg, 0, 0);
|
skinContext.drawImage(skinImg, 0, 0);
|
||||||
|
|
||||||
if(skinImg.height == 32) util.convert6432To6464(skinContext);
|
|
||||||
|
|
||||||
//these need work
|
|
||||||
//util.fixNonVisible(skinContext);
|
|
||||||
//util.fixOverlay(skinContext);
|
|
||||||
|
|
||||||
skinTexture.needsUpdate = true;
|
skinTexture.needsUpdate = true;
|
||||||
|
|
||||||
layer1Material.needsUpdate = true;
|
layer1Material.needsUpdate = true;
|
||||||
layer2Material.needsUpdate = true;
|
layer2Material.needsUpdate = true;
|
||||||
|
|
||||||
|
|
@ -317,14 +85,16 @@ function SkinPreview3D(model, skinCanvas, capeCanvas, canvasW, canvasH){
|
||||||
|
|
||||||
capeTexture.needsUpdate = true;
|
capeTexture.needsUpdate = true;
|
||||||
capeMaterial.needsUpdate = true;
|
capeMaterial.needsUpdate = true;
|
||||||
|
|
||||||
capeLoaded=true;
|
|
||||||
};
|
};
|
||||||
capeImg.onerror = () => console.log("Failed loading " + capeImg.src);
|
capeImg.onerror = () => console.log("Failed loading " + capeImg.src);
|
||||||
|
|
||||||
this.setSkin = url => skinImg.src = url;
|
this.setSkin = url => skinImg.src = url;
|
||||||
this.setCape = url => capeImg.src = url;
|
this.setCape = url => capeImg.src = url;
|
||||||
|
|
||||||
|
var renderer;
|
||||||
|
var capePivot;
|
||||||
|
var headBox, headMesh, bodyBox, bodyMesh, rightArmBox, rightArmMesh, leftArmBox, leftArmMesh, rightLegBox, rightLegMesh, leftLegBox, leftLegMesh, head2Box, head2Mesh, body2Box, body2Mesh, rightArm2Box, rightArm2Mesh, leftArm2Box, leftArm2Mesh, rightLeg2Box, rightLeg2Mesh, leftLeg2Box, leftLeg2Mesh, capeBox, capeMesh;
|
||||||
|
|
||||||
function initializeSkin() {
|
function initializeSkin() {
|
||||||
// Head Parts
|
// Head Parts
|
||||||
var headTop = [
|
var headTop = [
|
||||||
|
|
@ -992,7 +762,7 @@ function SkinPreview3D(model, skinCanvas, capeCanvas, canvasW, canvasH){
|
||||||
new THREE.Vector2(0.25, 0.1875),
|
new THREE.Vector2(0.25, 0.1875),
|
||||||
new THREE.Vector2(0.1875, 0.1875)
|
new THREE.Vector2(0.1875, 0.1875)
|
||||||
];
|
];
|
||||||
var leftLeg2Box = new THREE.BoxGeometry(4.5, 13.5, 4.5, 0, 0, 0);
|
leftLeg2Box = new THREE.BoxGeometry(4.5, 13.5, 4.5, 0, 0, 0);
|
||||||
leftLeg2Box.faceVertexUvs[0] = [];
|
leftLeg2Box.faceVertexUvs[0] = [];
|
||||||
leftLeg2Box.faceVertexUvs[0][0] = [leftLeg2Right[3], leftLeg2Right[0], leftLeg2Right[2]];
|
leftLeg2Box.faceVertexUvs[0][0] = [leftLeg2Right[3], leftLeg2Right[0], leftLeg2Right[2]];
|
||||||
leftLeg2Box.faceVertexUvs[0][1] = [leftLeg2Right[0], leftLeg2Right[1], leftLeg2Right[2]];
|
leftLeg2Box.faceVertexUvs[0][1] = [leftLeg2Right[0], leftLeg2Right[1], leftLeg2Right[2]];
|
||||||
|
|
@ -1049,7 +819,7 @@ function SkinPreview3D(model, skinCanvas, capeCanvas, canvasW, canvasH){
|
||||||
new THREE.Vector2(11/22, 16/17),
|
new THREE.Vector2(11/22, 16/17),
|
||||||
new THREE.Vector2(1/22, 16/17)
|
new THREE.Vector2(1/22, 16/17)
|
||||||
];
|
];
|
||||||
var capeBox = new THREE.BoxGeometry(10, 16, 1, 0, 0, 0);
|
capeBox = new THREE.BoxGeometry(10, 16, 1, 0, 0, 0);
|
||||||
capeBox.faceVertexUvs[0] = [];
|
capeBox.faceVertexUvs[0] = [];
|
||||||
capeBox.faceVertexUvs[0][0] = [capeRight[3], capeRight[0], capeRight[2]];
|
capeBox.faceVertexUvs[0][0] = [capeRight[3], capeRight[0], capeRight[2]];
|
||||||
capeBox.faceVertexUvs[0][1] = [capeRight[0], capeRight[1], capeRight[2]];
|
capeBox.faceVertexUvs[0][1] = [capeRight[0], capeRight[1], capeRight[2]];
|
||||||
|
|
@ -1115,18 +885,16 @@ function SkinPreview3D(model, skinCanvas, capeCanvas, canvasW, canvasH){
|
||||||
|
|
||||||
renderer.render(scene, camera);
|
renderer.render(scene, camera);
|
||||||
|
|
||||||
if(angleRot > 360){
|
if(angleRot > 360)
|
||||||
angleRot = 0;
|
angleRot = 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
model.mousedown(function(e){
|
model.mousedown(function(e){
|
||||||
originMouseX = (e.pageX - this.offsetLeft) - modelRot;
|
originMouseX = (e.pageX - this.offsetLeft) - modelRot;
|
||||||
mouseDown = true;
|
mouseDown = true;
|
||||||
});
|
});
|
||||||
|
|
||||||
$(document).mouseup(() => mouseDown = false);
|
window.jQuery(document).mouseup(() => mouseDown = false);
|
||||||
|
|
||||||
model.bind("contextmenu", e => {
|
model.bind("contextmenu", e => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
@ -1134,7 +902,7 @@ function SkinPreview3D(model, skinCanvas, capeCanvas, canvasW, canvasH){
|
||||||
});
|
});
|
||||||
|
|
||||||
model.mousemove(function(e){
|
model.mousemove(function(e){
|
||||||
if(!mouseDown){ return; }
|
if(!mouseDown) return;
|
||||||
var x = (e.pageX - this.offsetLeft) - originMouseX;
|
var x = (e.pageX - this.offsetLeft) - originMouseX;
|
||||||
modelRot = x;
|
modelRot = x;
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue