Ubujira
/
skinview3d
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

support slim model

This commit is contained in:
yushijinhun 2017-08-30 20:26:04 +08:00
parent 02840ec6a4
commit 5d55407b46
No known key found for this signature in database
GPG Key ID: 5BC167F73EA558E4
7 changed files with 197 additions and 676 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
README.md
View File

@ -6,6 +6,7 @@ The code was originally created by [Kent Rasmussen](https://github.com/earthiver
# Features # Features
* 1.8 Skins * 1.8 Skins
* Capes * Capes
* Slim arms
# Dependencies # Dependencies
* [Three.js](https://github.com/mrdoob/three.js/) * [Three.js](https://github.com/mrdoob/three.js/)
@ -21,13 +22,11 @@ JS
```js ```js
$(() => { $(() => {
$("#skin_container").skinPreview3D({ $("#skin_container").skinPreview3D({
skinUrl: 'img/Dinnerbone.png', skinUrl: 'img/hatsune_miku.png',
capeUrl: 'img/cape.png', capeUrl: 'img/cape.png',
slim: true,
width: 600, width: 600,
height: 600 height: 600
}); });
}); });
``` ```
# TODOs
* Alex support (Slim arms).

5
example.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>SkinPreview3D</title> <title>skinpreview3d.js</title>
</head> </head>
<body> <body>
@ -14,8 +14,9 @@
<script> <script>
$(function() { $(function() {
$("#skin_container").skinPreview3D({ $("#skin_container").skinPreview3D({
skinUrl: 'img/Dinnerbone.png', skinUrl: 'img/hatsune_miku.png',
capeUrl: 'img/cape.png', capeUrl: 'img/cape.png',
slim: true,
width: 600, width: 600,
height: 600 height: 600
}); });

BIN
img/ref.png → img/1_8_texturemap_redux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
img/Dinnerbone.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.7 KiB

BIN
img/Hacksore.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 689 B

BIN
img/hatsune_miku.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

859
js/skinpreview3d.js
View File

@ -1,6 +1,6 @@
/* /*
A 3D Minecraft skin renderer * skinpreview3d.js
Project link: https://github.com/yushijinhun/skinpreview3d.js * https://github.com/yushijinhun/skinpreview3d.js
*/ */
'use strict'; 'use strict';
@ -9,7 +9,7 @@
$.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, options.isSlim === true); var sp = new SkinPreview3D(this, skinCanvas, capeCanvas, options.width, options.height, options.slim === 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);
@ -18,7 +18,7 @@
} (window.jQuery)); } (window.jQuery));
function SkinPreview3D(model, skinCanvas, capeCanvas, canvasW, canvasH, isSlim){ // TODO: isSlim function SkinPreview3D(model, skinCanvas, capeCanvas, canvasW, canvasH, isSlim){
var radius = 32; var radius = 32;
var isPaused = false; var isPaused = false;
var originMouseX = 0; var originMouseX = 0;
@ -35,8 +35,10 @@ function SkinPreview3D(model, skinCanvas, capeCanvas, canvasW, canvasH, isSlim){
skinCanvas.width = 64; skinCanvas.width = 64;
skinCanvas.height = 64; skinCanvas.height = 64;
var skinContext = skinCanvas.getContext("2d"); var skinContext = skinCanvas.getContext("2d");
var skinTexture = new THREE.Texture(skinCanvas);
skinTexture.magFilter = THREE.NearestFilter;
skinTexture.minFilter = THREE.NearestMipMapNearestFilter;
//Cape Part
capeCanvas.width = 32; capeCanvas.width = 32;
capeCanvas.height = 32; capeCanvas.height = 32;
var capeContext = capeCanvas.getContext("2d"); var capeContext = capeCanvas.getContext("2d");
@ -44,10 +46,6 @@ function SkinPreview3D(model, skinCanvas, capeCanvas, canvasW, canvasH, isSlim){
capeTexture.magFilter = THREE.NearestFilter; capeTexture.magFilter = THREE.NearestFilter;
capeTexture.minFilter = THREE.NearestMipMapNearestFilter; capeTexture.minFilter = THREE.NearestMipMapNearestFilter;
var skinTexture = new THREE.Texture(skinCanvas);
skinTexture.magFilter = THREE.NearestFilter;
skinTexture.minFilter = THREE.NearestMipMapNearestFilter;
var layer1Material = new THREE.MeshBasicMaterial({map: skinTexture, side: THREE.FrontSide}); var layer1Material = new THREE.MeshBasicMaterial({map: skinTexture, side: THREE.FrontSide});
var 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});
var capeMaterial = new THREE.MeshBasicMaterial({map: capeTexture}); var capeMaterial = new THREE.MeshBasicMaterial({map: capeTexture});
@ -69,7 +67,6 @@ function SkinPreview3D(model, skinCanvas, capeCanvas, canvasW, canvasH, isSlim){
drawSkin(); drawSkin();
} }
}; };
skinImg.onerror = () => console.log("Failed loading " + skinImg.src); skinImg.onerror = () => console.log("Failed loading " + skinImg.src);
var capeImg = new Image(); var capeImg = new Image();
@ -77,10 +74,7 @@ function SkinPreview3D(model, skinCanvas, capeCanvas, canvasW, canvasH, isSlim){
capeImg.onload = () => { capeImg.onload = () => {
capePivot.add(capeMesh); capePivot.add(capeMesh);
// Erase what was on the canvas before
capeContext.clearRect(0, 0, capeCanvas.width, capeCanvas.height); capeContext.clearRect(0, 0, capeCanvas.width, capeCanvas.height);
// Draw the image to the canvas
capeContext.drawImage(capeImg, 0, 0, capeCanvas.width, capeCanvas.height); capeContext.drawImage(capeImg, 0, 0, capeCanvas.width, capeCanvas.height);
capeTexture.needsUpdate = true; capeTexture.needsUpdate = true;
@ -95,288 +89,124 @@ function SkinPreview3D(model, skinCanvas, capeCanvas, canvasW, canvasH, isSlim){
var capePivot; 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; 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() { var initializeSkin = () => {
// Head Parts var toFaceVertices = (x1,y1,x2,y2,w,h) => [
var headTop = [ new THREE.Vector2(x1/w, 1.0-y2/h),
new THREE.Vector2(0.125, 0.875), new THREE.Vector2(x2/w, 1.0-y2/h),
new THREE.Vector2(0.25, 0.875), new THREE.Vector2(x2/w, 1.0-y1/h),
new THREE.Vector2(0.25, 1), new THREE.Vector2(x1/w, 1.0-y1/h)
new THREE.Vector2(0.125, 1)
];
var headBottom = [
new THREE.Vector2(0.25, 0.875),
new THREE.Vector2(0.375, 0.875),
new THREE.Vector2(0.375, 1),
new THREE.Vector2(0.25, 1)
];
var headLeft = [
new THREE.Vector2(0, 0.75),
new THREE.Vector2(0.125, 0.75),
new THREE.Vector2(0.125, 0.875),
new THREE.Vector2(0, 0.875)
];
var headFront = [
new THREE.Vector2(0.125, 0.75),
new THREE.Vector2(0.25, 0.75),
new THREE.Vector2(0.25 , 0.875),
new THREE.Vector2(0.125 , 0.875)
];
var headRight = [
new THREE.Vector2(0.25, 0.75),
new THREE.Vector2(0.375, 0.75),
new THREE.Vector2(0.375, 0.875),
new THREE.Vector2(0.25, 0.875)
];
var headBack = [
new THREE.Vector2(0.375, 0.75),
new THREE.Vector2(0.5, 0.75),
new THREE.Vector2(0.5, 0.875),
new THREE.Vector2(0.375, 0.875)
]; ];
var toSkinVertices = (x1,y1,x2,y2) => toFaceVertices(x1, y1, x2, y2, 64.0, 64.0);
var toCapeVertices = (x1,y1,x2,y2) => toFaceVertices(x1, y1, x2, y2, 22.0, 17.0);
var addVertices = (box,top,bottom,left,front,right,back) => {
box.faceVertexUvs[0] = [];
box.faceVertexUvs[0][0] = [right[3], right[0], right[2]];
box.faceVertexUvs[0][1] = [right[0], right[1], right[2]];
box.faceVertexUvs[0][2] = [left[3], left[0], left[2]];
box.faceVertexUvs[0][3] = [left[0], left[1], left[2]];
box.faceVertexUvs[0][4] = [top[3], top[0], top[2]];
box.faceVertexUvs[0][5] = [top[0], top[1], top[2]];
box.faceVertexUvs[0][6] = [bottom[0], bottom[3], bottom[1]];
box.faceVertexUvs[0][7] = [bottom[3], bottom[2], bottom[1]];
box.faceVertexUvs[0][8] = [front[3], front[0], front[2]];
box.faceVertexUvs[0][9] = [front[0], front[1], front[2]];
box.faceVertexUvs[0][10] = [back[3], back[0], back[2]];
box.faceVertexUvs[0][11] = [back[0], back[1], back[2]];
};
// Head Parts
headBox = new THREE.BoxGeometry(8, 8, 8, 0, 0, 0); headBox = new THREE.BoxGeometry(8, 8, 8, 0, 0, 0);
headBox.faceVertexUvs[0] = []; addVertices(headBox,
headBox.faceVertexUvs[0][0] = [headRight[3], headRight[0], headRight[2]]; toSkinVertices(8, 0, 16, 8),
headBox.faceVertexUvs[0][1] = [headRight[0], headRight[1], headRight[2]]; toSkinVertices(16, 0, 24, 8),
headBox.faceVertexUvs[0][2] = [headLeft[3], headLeft[0], headLeft[2]]; toSkinVertices(0, 8, 8, 16),
headBox.faceVertexUvs[0][3] = [headLeft[0], headLeft[1], headLeft[2]]; toSkinVertices(8, 8, 16, 16),
headBox.faceVertexUvs[0][4] = [headTop[3], headTop[0], headTop[2]]; toSkinVertices(16, 8, 24, 16),
headBox.faceVertexUvs[0][5] = [headTop[0], headTop[1], headTop[2]]; toSkinVertices(24, 8, 32, 16)
headBox.faceVertexUvs[0][6] = [headBottom[0], headBottom[3], headBottom[1]]; );
headBox.faceVertexUvs[0][7] = [headBottom[3], headBottom[2], headBottom[1]];
headBox.faceVertexUvs[0][8] = [headFront[3], headFront[0], headFront[2]];
headBox.faceVertexUvs[0][9] = [headFront[0], headFront[1], headFront[2]];
headBox.faceVertexUvs[0][10] = [headBack[3], headBack[0], headBack[2]];
headBox.faceVertexUvs[0][11] = [headBack[0], headBack[1], headBack[2]];
headMesh = new THREE.Mesh(headBox, layer1Material); headMesh = new THREE.Mesh(headBox, layer1Material);
headMesh.name = "head"; headMesh.name = "head";
scene.add(headMesh); scene.add(headMesh);
// Body Parts // Body Parts
var bodyTop = [
new THREE.Vector2(0.3125, 0.6875),
new THREE.Vector2(0.4375, 0.6875),
new THREE.Vector2(0.4375, 0.75),
new THREE.Vector2(0.3125, 0.75)
];
var bodyBottom = [
new THREE.Vector2(0.4375, 0.6875),
new THREE.Vector2(0.5625, 0.6875),
new THREE.Vector2(0.5625, 0.75),
new THREE.Vector2(0.4375, 0.75)
];
var bodyLeft = [
new THREE.Vector2(0.25, 0.5),
new THREE.Vector2(0.3125, 0.5),
new THREE.Vector2(0.3125, 0.6875),
new THREE.Vector2(0.25, 0.6875)
];
var bodyFront = [
new THREE.Vector2(0.3125, 0.5),
new THREE.Vector2(0.4375, 0.5),
new THREE.Vector2(0.4375, 0.6875),
new THREE.Vector2(0.3125, 0.6875)
];
var bodyRight = [
new THREE.Vector2(0.4375, 0.5),
new THREE.Vector2(0.5, 0.5),
new THREE.Vector2(0.5, 0.6875),
new THREE.Vector2(0.4375, 0.6875)
];
var bodyBack = [
new THREE.Vector2(0.5, 0.5),
new THREE.Vector2(0.625, 0.5),
new THREE.Vector2(0.625, 0.6875),
new THREE.Vector2(0.5, 0.6875)
];
bodyBox = new THREE.BoxGeometry(8, 12, 4, 0, 0, 0); bodyBox = new THREE.BoxGeometry(8, 12, 4, 0, 0, 0);
bodyBox.faceVertexUvs[0] = []; addVertices(bodyBox,
bodyBox.faceVertexUvs[0][0] = [bodyRight[3], bodyRight[0], bodyRight[2]]; toSkinVertices(20, 16, 28, 20),
bodyBox.faceVertexUvs[0][1] = [bodyRight[0], bodyRight[1], bodyRight[2]]; toSkinVertices(28, 16, 36, 20),
bodyBox.faceVertexUvs[0][2] = [bodyLeft[3], bodyLeft[0], bodyLeft[2]]; toSkinVertices(16, 20, 20, 32),
bodyBox.faceVertexUvs[0][3] = [bodyLeft[0], bodyLeft[1], bodyLeft[2]]; toSkinVertices(20, 20, 28, 32),
bodyBox.faceVertexUvs[0][4] = [bodyTop[3], bodyTop[0], bodyTop[2]]; toSkinVertices(28, 20, 32, 32),
bodyBox.faceVertexUvs[0][5] = [bodyTop[0], bodyTop[1], bodyTop[2]]; toSkinVertices(32, 20, 40, 32)
bodyBox.faceVertexUvs[0][6] = [bodyBottom[0], bodyBottom[3], bodyBottom[1]]; );
bodyBox.faceVertexUvs[0][7] = [bodyBottom[3], bodyBottom[2], bodyBottom[1]];
bodyBox.faceVertexUvs[0][8] = [bodyFront[3], bodyFront[0], bodyFront[2]];
bodyBox.faceVertexUvs[0][9] = [bodyFront[0], bodyFront[1], bodyFront[2]];
bodyBox.faceVertexUvs[0][10] = [bodyBack[3], bodyBack[0], bodyBack[2]];
bodyBox.faceVertexUvs[0][11] = [bodyBack[0], bodyBack[1], bodyBack[2]];
bodyMesh = new THREE.Mesh(bodyBox, layer1Material); bodyMesh = new THREE.Mesh(bodyBox, layer1Material);
bodyMesh.name = "body"; bodyMesh.name = "body";
bodyMesh.position.y = -10; bodyMesh.position.y = -10;
scene.add(bodyMesh); scene.add(bodyMesh);
// Right Arm Parts // Right Arm Parts
var rightArmTop = [ rightArmBox = new THREE.BoxGeometry(isSlim?3:4, 12, 4, 0, 0, 0);
new THREE.Vector2(0.6875, 0.6875), if (isSlim) {
new THREE.Vector2(0.75, 0.6875), addVertices(rightArmBox,
new THREE.Vector2(0.75, 0.75), toSkinVertices(44, 16, 47, 20),
new THREE.Vector2(0.6875, 0.75), toSkinVertices(47, 16, 50, 20),
]; toSkinVertices(40, 20, 44, 32),
var rightArmBottom = [ toSkinVertices(44, 20, 47, 32),
new THREE.Vector2(0.75, 0.6875), toSkinVertices(47, 20, 51, 32),
new THREE.Vector2(0.8125, 0.6875), toSkinVertices(51, 20, 54, 32)
new THREE.Vector2(0.8125, 0.75), );
new THREE.Vector2(0.75, 0.75) } else {
]; addVertices(rightArmBox,
var rightArmLeft = [ toSkinVertices(44, 16, 48, 20),
new THREE.Vector2(0.625, 0.5), toSkinVertices(48, 16, 52, 20),
new THREE.Vector2(0.6875, 0.5), toSkinVertices(40, 20, 44, 32),
new THREE.Vector2(0.6875, 0.6875), toSkinVertices(44, 20, 48, 32),
new THREE.Vector2(0.625, 0.6875) toSkinVertices(48, 20, 52, 32),
]; toSkinVertices(52, 20, 56, 32)
var rightArmFront = [ );
new THREE.Vector2(0.6875, 0.5), }
new THREE.Vector2(0.75, 0.5),
new THREE.Vector2(0.75, 0.6875),
new THREE.Vector2(0.6875, 0.6875)
];
var rightArmRight = [
new THREE.Vector2(0.75, 0.5),
new THREE.Vector2(0.8125, 0.5),
new THREE.Vector2(0.8125, 0.6875),
new THREE.Vector2(0.75, 0.6875)
];
var rightArmBack = [
new THREE.Vector2(0.8125, 0.5),
new THREE.Vector2(0.875, 0.5),
new THREE.Vector2(0.875, 0.6875),
new THREE.Vector2(0.8125, 0.6875)
];
rightArmBox = new THREE.BoxGeometry(4, 12, 4, 0, 0, 0);
rightArmBox.faceVertexUvs[0] = [];
rightArmBox.faceVertexUvs[0][0] = [rightArmRight[3], rightArmRight[0], rightArmRight[2]];
rightArmBox.faceVertexUvs[0][1] = [rightArmRight[0], rightArmRight[1], rightArmRight[2]];
rightArmBox.faceVertexUvs[0][2] = [rightArmLeft[3], rightArmLeft[0], rightArmLeft[2]];
rightArmBox.faceVertexUvs[0][3] = [rightArmLeft[0], rightArmLeft[1], rightArmLeft[2]];
rightArmBox.faceVertexUvs[0][4] = [rightArmTop[3], rightArmTop[0], rightArmTop[2]];
rightArmBox.faceVertexUvs[0][5] = [rightArmTop[0], rightArmTop[1], rightArmTop[2]];
rightArmBox.faceVertexUvs[0][6] = [rightArmBottom[0], rightArmBottom[3], rightArmBottom[1]];
rightArmBox.faceVertexUvs[0][7] = [rightArmBottom[3], rightArmBottom[2], rightArmBottom[1]];
rightArmBox.faceVertexUvs[0][8] = [rightArmFront[3], rightArmFront[0], rightArmFront[2]];
rightArmBox.faceVertexUvs[0][9] = [rightArmFront[0], rightArmFront[1], rightArmFront[2]];
rightArmBox.faceVertexUvs[0][10] = [rightArmBack[3], rightArmBack[0], rightArmBack[2]];
rightArmBox.faceVertexUvs[0][11] = [rightArmBack[0], rightArmBack[1], rightArmBack[2]];
rightArmMesh = new THREE.Mesh(rightArmBox, layer1Material); rightArmMesh = new THREE.Mesh(rightArmBox, layer1Material);
rightArmMesh.name = "rightArm"; rightArmMesh.name = "rightArm";
rightArmMesh.position.y = -10; rightArmMesh.position.y = -10;
rightArmMesh.position.x = -6; rightArmMesh.position.x = isSlim?-5.5:-6;
scene.add(rightArmMesh); scene.add(rightArmMesh);
// Left Arm Parts // Left Arm Parts
var leftArmTop = [ leftArmBox = new THREE.BoxGeometry(isSlim?3:4, 12, 4, 0, 0, 0);
new THREE.Vector2(0.5625, 0.1875), if (isSlim) {
new THREE.Vector2(0.625, 0.1875), addVertices(leftArmBox,
new THREE.Vector2(0.625, 0.25), toSkinVertices(36, 48, 39, 52),
new THREE.Vector2(0.5625, 0.25), toSkinVertices(39, 48, 42, 52),
]; toSkinVertices(32, 52, 36, 64),
var leftArmBottom = [ toSkinVertices(36, 52, 39, 64),
new THREE.Vector2(0.625, 0.1875), toSkinVertices(39, 52, 43, 64),
new THREE.Vector2(0.6875, 0.1875), toSkinVertices(43, 52, 46, 64)
new THREE.Vector2(0.6875, 0.25), );
new THREE.Vector2(0.625, 0.25) } else {
]; addVertices(leftArmBox,
var leftArmLeft = [ toSkinVertices(36, 48, 40, 52),
new THREE.Vector2(0.5, 0), toSkinVertices(40, 48, 44, 52),
new THREE.Vector2(0.5625, 0), toSkinVertices(32, 52, 36, 64),
new THREE.Vector2(0.5625, 0.1875), toSkinVertices(36, 52, 40, 64),
new THREE.Vector2(0.5, 0.1875) toSkinVertices(40, 52, 44, 64),
]; toSkinVertices(44, 52, 48, 64)
var leftArmFront = [ );
new THREE.Vector2(0.5625, 0), }
new THREE.Vector2(0.625, 0),
new THREE.Vector2(0.625, 0.1875),
new THREE.Vector2(0.5625, 0.1875)
];
var leftArmRight = [
new THREE.Vector2(0.625, 0),
new THREE.Vector2(0.6875, 0),
new THREE.Vector2(0.6875, 0.1875),
new THREE.Vector2(0.625, 0.1875)
];
var leftArmBack = [
new THREE.Vector2(0.6875, 0),
new THREE.Vector2(0.75, 0),
new THREE.Vector2(0.75, 0.1875),
new THREE.Vector2(0.6875, 0.1875)
];
leftArmBox = new THREE.BoxGeometry(4, 12, 4, 0, 0, 0);
leftArmBox.faceVertexUvs[0] = [];
leftArmBox.faceVertexUvs[0][0] = [leftArmRight[3], leftArmRight[0], leftArmRight[2]];
leftArmBox.faceVertexUvs[0][1] = [leftArmRight[0], leftArmRight[1], leftArmRight[2]];
leftArmBox.faceVertexUvs[0][2] = [leftArmLeft[3], leftArmLeft[0], leftArmLeft[2]];
leftArmBox.faceVertexUvs[0][3] = [leftArmLeft[0], leftArmLeft[1], leftArmLeft[2]];
leftArmBox.faceVertexUvs[0][4] = [leftArmTop[3], leftArmTop[0], leftArmTop[2]];
leftArmBox.faceVertexUvs[0][5] = [leftArmTop[0], leftArmTop[1], leftArmTop[2]];
leftArmBox.faceVertexUvs[0][6] = [leftArmBottom[0], leftArmBottom[3], leftArmBottom[1]];
leftArmBox.faceVertexUvs[0][7] = [leftArmBottom[3], leftArmBottom[2], leftArmBottom[1]];
leftArmBox.faceVertexUvs[0][8] = [leftArmFront[3], leftArmFront[0], leftArmFront[2]];
leftArmBox.faceVertexUvs[0][9] = [leftArmFront[0], leftArmFront[1], leftArmFront[2]];
leftArmBox.faceVertexUvs[0][10] = [leftArmBack[3], leftArmBack[0], leftArmBack[2]];
leftArmBox.faceVertexUvs[0][11] = [leftArmBack[0], leftArmBack[1], leftArmBack[2]];
leftArmMesh = new THREE.Mesh(leftArmBox, layer1Material); leftArmMesh = new THREE.Mesh(leftArmBox, layer1Material);
leftArmMesh.name = "leftArm"; leftArmMesh.name = "leftArm";
leftArmMesh.position.y = -10; leftArmMesh.position.y = -10;
leftArmMesh.position.x = 6; leftArmMesh.position.x = isSlim?5.5:6;
scene.add(leftArmMesh); scene.add(leftArmMesh);
// Right Leg Parts // Right Leg Parts
var rightLegTop = [
new THREE.Vector2(0.0625, 0.6875),
new THREE.Vector2(0.125, 0.6875),
new THREE.Vector2(0.125, 0.75),
new THREE.Vector2(0.0625, 0.75),
];
var rightLegBottom = [
new THREE.Vector2(0.125, 0.6875),
new THREE.Vector2(0.1875, 0.6875),
new THREE.Vector2(0.1875, 0.75),
new THREE.Vector2(0.125, 0.75)
];
var rightLegLeft = [
new THREE.Vector2(0, 0.5),
new THREE.Vector2(0.0625, 0.5),
new THREE.Vector2(0.0625, 0.6875),
new THREE.Vector2(0, 0.6875)
];
var rightLegFront = [
new THREE.Vector2(0.0625, 0.5),
new THREE.Vector2(0.125, 0.5),
new THREE.Vector2(0.125, 0.6875),
new THREE.Vector2(0.0625, 0.6875)
];
var rightLegRight = [
new THREE.Vector2(0.125, 0.5),
new THREE.Vector2(0.1875, 0.5),
new THREE.Vector2(0.1875, 0.6875),
new THREE.Vector2(0.125, 0.6875)
];
var rightLegBack = [
new THREE.Vector2(0.1875, 0.5),
new THREE.Vector2(0.25, 0.5),
new THREE.Vector2(0.25, 0.6875),
new THREE.Vector2(0.1875, 0.6875)
];
rightLegBox = new THREE.BoxGeometry(4, 12, 4, 0, 0, 0); rightLegBox = new THREE.BoxGeometry(4, 12, 4, 0, 0, 0);
rightLegBox.faceVertexUvs[0] = []; addVertices(rightLegBox,
rightLegBox.faceVertexUvs[0][0] = [rightLegRight[3], rightLegRight[0], rightLegRight[2]]; toSkinVertices(4, 16, 8, 20),
rightLegBox.faceVertexUvs[0][1] = [rightLegRight[0], rightLegRight[1], rightLegRight[2]]; toSkinVertices(8, 16, 12, 20),
rightLegBox.faceVertexUvs[0][2] = [rightLegLeft[3], rightLegLeft[0], rightLegLeft[2]]; toSkinVertices(0, 20, 4, 32),
rightLegBox.faceVertexUvs[0][3] = [rightLegLeft[0], rightLegLeft[1], rightLegLeft[2]]; toSkinVertices(4, 20, 8, 32),
rightLegBox.faceVertexUvs[0][4] = [rightLegTop[3], rightLegTop[0], rightLegTop[2]]; toSkinVertices(8, 20, 12, 32),
rightLegBox.faceVertexUvs[0][5] = [rightLegTop[0], rightLegTop[1], rightLegTop[2]]; toSkinVertices(12, 20, 16, 32)
rightLegBox.faceVertexUvs[0][6] = [rightLegBottom[0], rightLegBottom[3], rightLegBottom[1]]; );
rightLegBox.faceVertexUvs[0][7] = [rightLegBottom[3], rightLegBottom[2], rightLegBottom[1]];
rightLegBox.faceVertexUvs[0][8] = [rightLegFront[3], rightLegFront[0], rightLegFront[2]];
rightLegBox.faceVertexUvs[0][9] = [rightLegFront[0], rightLegFront[1], rightLegFront[2]];
rightLegBox.faceVertexUvs[0][10] = [rightLegBack[3], rightLegBack[0], rightLegBack[2]];
rightLegBox.faceVertexUvs[0][11] = [rightLegBack[0], rightLegBack[1], rightLegBack[2]];
rightLegMesh = new THREE.Mesh(rightLegBox, layer1Material); rightLegMesh = new THREE.Mesh(rightLegBox, layer1Material);
rightLegMesh.name = "rightLeg" rightLegMesh.name = "rightLeg"
rightLegMesh.position.y = -22; rightLegMesh.position.y = -22;
@ -384,56 +214,15 @@ function SkinPreview3D(model, skinCanvas, capeCanvas, canvasW, canvasH, isSlim){
scene.add(rightLegMesh); scene.add(rightLegMesh);
// Left Leg Parts // Left Leg Parts
var leftLegTop = [
new THREE.Vector2(0.3125, 0.1875),
new THREE.Vector2(0.375, 0.1875),
new THREE.Vector2(0.375, 0.25),
new THREE.Vector2(0.3125, 0.25),
];
var leftLegBottom = [
new THREE.Vector2(0.375, 0.1875),
new THREE.Vector2(0.4375, 0.1875),
new THREE.Vector2(0.4375, 0.25),
new THREE.Vector2(0.375, 0.25)
];
var leftLegLeft = [
new THREE.Vector2(0.25, 0),
new THREE.Vector2(0.3125, 0),
new THREE.Vector2(0.3125, 0.1875),
new THREE.Vector2(0.25, 0.1875)
];
var leftLegFront = [
new THREE.Vector2(0.3125, 0),
new THREE.Vector2(0.375, 0),
new THREE.Vector2(0.375, 0.1875),
new THREE.Vector2(0.3125, 0.1875)
];
var leftLegRight = [
new THREE.Vector2(0.375, 0),
new THREE.Vector2(0.4375, 0),
new THREE.Vector2(0.4375, 0.1875),
new THREE.Vector2(0.375, 0.1875)
];
var leftLegBack = [
new THREE.Vector2(0.4375, 0),
new THREE.Vector2(0.5, 0),
new THREE.Vector2(0.5, 0.1875),
new THREE.Vector2(0.4375, 0.1875)
];
leftLegBox = new THREE.BoxGeometry(4, 12, 4, 0, 0, 0); leftLegBox = new THREE.BoxGeometry(4, 12, 4, 0, 0, 0);
leftLegBox.faceVertexUvs[0] = []; addVertices(leftLegBox,
leftLegBox.faceVertexUvs[0][0] = [leftLegRight[3], leftLegRight[0], leftLegRight[2]]; toSkinVertices(20, 48, 24, 52),
leftLegBox.faceVertexUvs[0][1] = [leftLegRight[0], leftLegRight[1], leftLegRight[2]]; toSkinVertices(24, 48, 28, 52),
leftLegBox.faceVertexUvs[0][2] = [leftLegLeft[3], leftLegLeft[0], leftLegLeft[2]]; toSkinVertices(16, 52, 20, 64),
leftLegBox.faceVertexUvs[0][3] = [leftLegLeft[0], leftLegLeft[1], leftLegLeft[2]]; toSkinVertices(20, 52, 24, 64),
leftLegBox.faceVertexUvs[0][4] = [leftLegTop[3], leftLegTop[0], leftLegTop[2]]; toSkinVertices(24, 52, 28, 64),
leftLegBox.faceVertexUvs[0][5] = [leftLegTop[0], leftLegTop[1], leftLegTop[2]]; toSkinVertices(28, 52, 32, 64)
leftLegBox.faceVertexUvs[0][6] = [leftLegBottom[0], leftLegBottom[3], leftLegBottom[1]]; );
leftLegBox.faceVertexUvs[0][7] = [leftLegBottom[3], leftLegBottom[2], leftLegBottom[1]];
leftLegBox.faceVertexUvs[0][8] = [leftLegFront[3], leftLegFront[0], leftLegFront[2]];
leftLegBox.faceVertexUvs[0][9] = [leftLegFront[0], leftLegFront[1], leftLegFront[2]];
leftLegBox.faceVertexUvs[0][10] = [leftLegBack[3], leftLegBack[0], leftLegBack[2]];
leftLegBox.faceVertexUvs[0][11] = [leftLegBack[0], leftLegBack[1], leftLegBack[2]];
leftLegMesh = new THREE.Mesh(leftLegBox, layer1Material); leftLegMesh = new THREE.Mesh(leftLegBox, layer1Material);
leftLegMesh.name = "leftLeg"; leftLegMesh.name = "leftLeg";
leftLegMesh.position.y = -22; leftLegMesh.position.y = -22;
@ -441,167 +230,55 @@ function SkinPreview3D(model, skinCanvas, capeCanvas, canvasW, canvasH, isSlim){
scene.add(leftLegMesh); scene.add(leftLegMesh);
// Head Overlay Parts // Head Overlay Parts
var head2Top = [
new THREE.Vector2(0.625, 0.875),
new THREE.Vector2(0.75, 0.875),
new THREE.Vector2(0.75, 1),
new THREE.Vector2(0.625, 1)
];
var head2Bottom = [
new THREE.Vector2(0.75, 0.875),
new THREE.Vector2(0.875, 0.875),
new THREE.Vector2(0.875, 1),
new THREE.Vector2(0.75, 1)
];
var head2Left = [
new THREE.Vector2(0.5, 0.75),
new THREE.Vector2(0.625, 0.75),
new THREE.Vector2(0.625, 0.875),
new THREE.Vector2(0.5, 0.875)
];
var head2Front = [
new THREE.Vector2(0.625, 0.75),
new THREE.Vector2(0.75, 0.75),
new THREE.Vector2(0.75, 0.875),
new THREE.Vector2(0.625, 0.875)
];
var head2Right = [
new THREE.Vector2(0.75, 0.75),
new THREE.Vector2(0.875, 0.75),
new THREE.Vector2(0.875, 0.875),
new THREE.Vector2(0.75, 0.875)
];
var head2Back = [
new THREE.Vector2(0.875, 0.75),
new THREE.Vector2(1, 0.75),
new THREE.Vector2(1, 0.875),
new THREE.Vector2(0.875, 0.875)
];
head2Box = new THREE.BoxGeometry(9, 9, 9, 0, 0, 0); head2Box = new THREE.BoxGeometry(9, 9, 9, 0, 0, 0);
head2Box.faceVertexUvs[0] = []; addVertices(head2Box,
head2Box.faceVertexUvs[0][0] = [head2Right[3], head2Right[0], head2Right[2]]; toSkinVertices(40, 0, 48, 8),
head2Box.faceVertexUvs[0][1] = [head2Right[0], head2Right[1], head2Right[2]]; toSkinVertices(48, 0, 56, 8),
head2Box.faceVertexUvs[0][2] = [head2Left[3], head2Left[0], head2Left[2]]; toSkinVertices(32, 8, 40, 16),
head2Box.faceVertexUvs[0][3] = [head2Left[0], head2Left[1], head2Left[2]]; toSkinVertices(40, 8, 48, 16),
head2Box.faceVertexUvs[0][4] = [head2Top[3], head2Top[0], head2Top[2]]; toSkinVertices(48, 8, 56, 16),
head2Box.faceVertexUvs[0][5] = [head2Top[0], head2Top[1], head2Top[2]]; toSkinVertices(56, 8, 64, 16)
head2Box.faceVertexUvs[0][6] = [head2Bottom[0], head2Bottom[3], head2Bottom[1]]; );
head2Box.faceVertexUvs[0][7] = [head2Bottom[3], head2Bottom[2], head2Bottom[1]];
head2Box.faceVertexUvs[0][8] = [head2Front[3], head2Front[0], head2Front[2]];
head2Box.faceVertexUvs[0][9] = [head2Front[0], head2Front[1], head2Front[2]];
head2Box.faceVertexUvs[0][10] = [head2Back[3], head2Back[0], head2Back[2]];
head2Box.faceVertexUvs[0][11] = [head2Back[0], head2Back[1], head2Back[2]];
head2Mesh = new THREE.Mesh(head2Box, layer2Material); head2Mesh = new THREE.Mesh(head2Box, layer2Material);
head2Mesh.name = "head2" head2Mesh.name = "head2"
scene.add(head2Mesh); scene.add(head2Mesh);
// Body Overlay Parts // Body Overlay Parts
var body2Top = [
new THREE.Vector2(0.3125, 0.4375),
new THREE.Vector2(0.4375, 0.4375),
new THREE.Vector2(0.4375, 0.5),
new THREE.Vector2(0.3125, 0.5)
];
var body2Bottom = [
new THREE.Vector2(0.4375, 0.4375),
new THREE.Vector2(0.5625, 0.4375),
new THREE.Vector2(0.5625, 0.5),
new THREE.Vector2(0.4375, 0.5)
];
var body2Left = [
new THREE.Vector2(0.25, 0.25),
new THREE.Vector2(0.3125, 0.25),
new THREE.Vector2(0.3125, 0.4375),
new THREE.Vector2(0.25, 0.4375)
];
var body2Front = [
new THREE.Vector2(0.3125, 0.25),
new THREE.Vector2(0.4375, 0.25),
new THREE.Vector2(0.4375, 0.4375),
new THREE.Vector2(0.3125, 0.4375)
];
var body2Right = [
new THREE.Vector2(0.4375, 0.25),
new THREE.Vector2(0.5, 0.25),
new THREE.Vector2(0.5, 0.4375),
new THREE.Vector2(0.4375, 0.4375)
];
var body2Back = [
new THREE.Vector2(0.5, 0.25),
new THREE.Vector2(0.625, 0.25),
new THREE.Vector2(0.625, 0.4375),
new THREE.Vector2(0.5, 0.4375)
];
body2Box = new THREE.BoxGeometry(9, 13.5, 4.5, 0, 0, 0); body2Box = new THREE.BoxGeometry(9, 13.5, 4.5, 0, 0, 0);
body2Box.faceVertexUvs[0] = []; addVertices(body2Box,
body2Box.faceVertexUvs[0][0] = [body2Right[3], body2Right[0], body2Right[2]]; toSkinVertices(20, 32, 28, 36),
body2Box.faceVertexUvs[0][1] = [body2Right[0], body2Right[1], body2Right[2]]; toSkinVertices(28, 32, 36, 36),
body2Box.faceVertexUvs[0][2] = [body2Left[3], body2Left[0], body2Left[2]]; toSkinVertices(16, 36, 20, 48),
body2Box.faceVertexUvs[0][3] = [body2Left[0], body2Left[1], body2Left[2]]; toSkinVertices(20, 36, 28, 48),
body2Box.faceVertexUvs[0][4] = [body2Top[3], body2Top[0], body2Top[2]]; toSkinVertices(28, 36, 32, 48),
body2Box.faceVertexUvs[0][5] = [body2Top[0], body2Top[1], body2Top[2]]; toSkinVertices(32, 36, 40, 48)
body2Box.faceVertexUvs[0][6] = [body2Bottom[0], body2Bottom[3], body2Bottom[1]]; );
body2Box.faceVertexUvs[0][7] = [body2Bottom[3], body2Bottom[2], body2Bottom[1]];
body2Box.faceVertexUvs[0][8] = [body2Front[3], body2Front[0], body2Front[2]];
body2Box.faceVertexUvs[0][9] = [body2Front[0], body2Front[1], body2Front[2]];
body2Box.faceVertexUvs[0][10] = [body2Back[3], body2Back[0], body2Back[2]];
body2Box.faceVertexUvs[0][11] = [body2Back[0], body2Back[1], body2Back[2]];
body2Mesh = new THREE.Mesh(body2Box, layer2Material); body2Mesh = new THREE.Mesh(body2Box, layer2Material);
body2Mesh.name = "body2"; body2Mesh.name = "body2";
body2Mesh.position.y = -10; body2Mesh.position.y = -10;
scene.add(body2Mesh); scene.add(body2Mesh);
// Right Arm Overlay Parts // Right Arm Overlay Parts
var rightArm2Top = [ rightArm2Box = new THREE.BoxGeometry(isSlim?3.375:4.5, 13.5, 4.5, 0, 0, 0);
new THREE.Vector2(0.6875, 0.4375), if (isSlim) {
new THREE.Vector2(0.75, 0.4375), addVertices(rightArm2Box,
new THREE.Vector2(0.75, 0.5), toSkinVertices(44, 32, 47, 36),
new THREE.Vector2(0.6875, 0.5), toSkinVertices(47, 32, 50, 36),
]; toSkinVertices(40, 36, 44, 48),
var rightArm2Bottom = [ toSkinVertices(44, 36, 47, 48),
new THREE.Vector2(0.75, 0.4375), toSkinVertices(47, 36, 51, 48),
new THREE.Vector2(0.8125, 0.4375), toSkinVertices(51, 36, 54, 48)
new THREE.Vector2(0.8125, 0.5), );
new THREE.Vector2(0.75, 0.5) } else {
]; addVertices(rightArm2Box,
var rightArm2Left = [ toSkinVertices(44, 32, 48, 36),
new THREE.Vector2(0.625, 0.25), toSkinVertices(48, 32, 52, 36),
new THREE.Vector2(0.6875, 0.25), toSkinVertices(40, 36, 44, 48),
new THREE.Vector2(0.6875, 0.4375), toSkinVertices(44, 36, 48, 48),
new THREE.Vector2(0.625, 0.4375) toSkinVertices(48, 36, 52, 48),
]; toSkinVertices(52, 36, 56, 48)
var rightArm2Front = [ );
new THREE.Vector2(0.6875, 0.25), }
new THREE.Vector2(0.75, 0.25),
new THREE.Vector2(0.75, 0.4375),
new THREE.Vector2(0.6875, 0.4375)
];
var rightArm2Right = [
new THREE.Vector2(0.75, 0.25),
new THREE.Vector2(0.8125, 0.25),
new THREE.Vector2(0.8125, 0.4375),
new THREE.Vector2(0.75, 0.4375)
];
var rightArm2Back = [
new THREE.Vector2(0.8125, 0.25),
new THREE.Vector2(0.875, 0.25),
new THREE.Vector2(0.875, 0.4375),
new THREE.Vector2(0.8125, 0.4375)
];
rightArm2Box = new THREE.BoxGeometry(4.5, 13.5, 4.5, 0, 0, 0);
rightArm2Box.faceVertexUvs[0] = [];
rightArm2Box.faceVertexUvs[0][0] = [rightArm2Right[3], rightArm2Right[0], rightArm2Right[2]];
rightArm2Box.faceVertexUvs[0][1] = [rightArm2Right[0], rightArm2Right[1], rightArm2Right[2]];
rightArm2Box.faceVertexUvs[0][2] = [rightArm2Left[3], rightArm2Left[0], rightArm2Left[2]];
rightArm2Box.faceVertexUvs[0][3] = [rightArm2Left[0], rightArm2Left[1], rightArm2Left[2]];
rightArm2Box.faceVertexUvs[0][4] = [rightArm2Top[3], rightArm2Top[0], rightArm2Top[2]];
rightArm2Box.faceVertexUvs[0][5] = [rightArm2Top[0], rightArm2Top[1], rightArm2Top[2]];
rightArm2Box.faceVertexUvs[0][6] = [rightArm2Bottom[0], rightArm2Bottom[3], rightArm2Bottom[1]];
rightArm2Box.faceVertexUvs[0][7] = [rightArm2Bottom[3], rightArm2Bottom[2], rightArm2Bottom[1]];
rightArm2Box.faceVertexUvs[0][8] = [rightArm2Front[3], rightArm2Front[0], rightArm2Front[2]];
rightArm2Box.faceVertexUvs[0][9] = [rightArm2Front[0], rightArm2Front[1], rightArm2Front[2]];
rightArm2Box.faceVertexUvs[0][10] = [rightArm2Back[3], rightArm2Back[0], rightArm2Back[2]];
rightArm2Box.faceVertexUvs[0][11] = [rightArm2Back[0], rightArm2Back[1], rightArm2Back[2]];
rightArm2Mesh = new THREE.Mesh(rightArm2Box, layer2Material); rightArm2Mesh = new THREE.Mesh(rightArm2Box, layer2Material);
rightArm2Mesh.name = "rightArm2"; rightArm2Mesh.name = "rightArm2";
rightArm2Mesh.position.y = -10; rightArm2Mesh.position.y = -10;
@ -609,57 +286,26 @@ function SkinPreview3D(model, skinCanvas, capeCanvas, canvasW, canvasH, isSlim){
scene.add(rightArm2Mesh); scene.add(rightArm2Mesh);
// Left Arm Overlay Parts // Left Arm Overlay Parts
var leftArm2Top = [ leftArm2Box = new THREE.BoxGeometry(isSlim?3.375:4.5, 13.5, 4.5, 0, 0, 0);
new THREE.Vector2(0.8125, 0.1875), if (isSlim) {
new THREE.Vector2(0.875, 0.1875), addVertices(leftArm2Box,
new THREE.Vector2(0.875, 0.25), toSkinVertices(52, 48, 55, 52),
new THREE.Vector2(0.8125, 0.25), toSkinVertices(55, 48, 58, 52),
]; toSkinVertices(48, 52, 52, 64),
var leftArm2Bottom = [ toSkinVertices(52, 52, 55, 64),
new THREE.Vector2(0.875, 0.1875), toSkinVertices(55, 52, 59, 64),
new THREE.Vector2(0.9375, 0.1875), toSkinVertices(59, 52, 62, 64)
new THREE.Vector2(0.9375, 0.25), );
new THREE.Vector2(0.875, 0.25) } else {
]; addVertices(leftArm2Box,
var leftArm2Left = [ toSkinVertices(52, 48, 56, 52),
new THREE.Vector2(0.75, 0), toSkinVertices(56, 48, 60, 52),
new THREE.Vector2(0.8125, 0), toSkinVertices(48, 52, 52, 64),
new THREE.Vector2(0.8125, 0.1875), toSkinVertices(52, 52, 56, 64),
new THREE.Vector2(0.75, 0.1875) toSkinVertices(56, 52, 60, 64),
]; toSkinVertices(60, 52, 64, 64)
var leftArm2Front = [ );
new THREE.Vector2(0.8125, 0), }
new THREE.Vector2(0.875, 0),
new THREE.Vector2(0.875, 0.1875),
new THREE.Vector2(0.8125, 0.1875)
];
var leftArm2Right = [
new THREE.Vector2(0.875, 0),
new THREE.Vector2(0.9375, 0),
new THREE.Vector2(0.9375, 0.1875),
new THREE.Vector2(0.875, 0.1875)
];
var leftArm2Back = [
new THREE.Vector2(0.9375, 0),
new THREE.Vector2(1, 0),
new THREE.Vector2(1, 0.1875),
new THREE.Vector2(0.9375, 0.1875)
];
leftArm2Box = new THREE.BoxGeometry(4.5, 13.5, 4.5, 0, 0, 0);
leftArm2Box.faceVertexUvs[0] = [];
leftArm2Box.faceVertexUvs[0][0] = [leftArm2Right[3], leftArm2Right[0], leftArm2Right[2]];
leftArm2Box.faceVertexUvs[0][1] = [leftArm2Right[0], leftArm2Right[1], leftArm2Right[2]];
leftArm2Box.faceVertexUvs[0][2] = [leftArm2Left[3], leftArm2Left[0], leftArm2Left[2]];
leftArm2Box.faceVertexUvs[0][3] = [leftArm2Left[0], leftArm2Left[1], leftArm2Left[2]];
leftArm2Box.faceVertexUvs[0][4] = [leftArm2Top[3], leftArm2Top[0], leftArm2Top[2]];
leftArm2Box.faceVertexUvs[0][5] = [leftArm2Top[0], leftArm2Top[1], leftArm2Top[2]];
leftArm2Box.faceVertexUvs[0][6] = [leftArm2Bottom[0], leftArm2Bottom[3], leftArm2Bottom[1]];
leftArm2Box.faceVertexUvs[0][7] = [leftArm2Bottom[3], leftArm2Bottom[2], leftArm2Bottom[1]];
leftArm2Box.faceVertexUvs[0][8] = [leftArm2Front[3], leftArm2Front[0], leftArm2Front[2]];
leftArm2Box.faceVertexUvs[0][9] = [leftArm2Front[0], leftArm2Front[1], leftArm2Front[2]];
leftArm2Box.faceVertexUvs[0][10] = [leftArm2Back[3], leftArm2Back[0], leftArm2Back[2]];
leftArm2Box.faceVertexUvs[0][11] = [leftArm2Back[0], leftArm2Back[1], leftArm2Back[2]];
leftArm2Mesh = new THREE.Mesh(leftArm2Box, layer2Material); leftArm2Mesh = new THREE.Mesh(leftArm2Box, layer2Material);
leftArm2Mesh.name = "leftArm2"; leftArm2Mesh.name = "leftArm2";
leftArm2Mesh.position.y = -10; leftArm2Mesh.position.y = -10;
@ -668,57 +314,15 @@ function SkinPreview3D(model, skinCanvas, capeCanvas, canvasW, canvasH, isSlim){
scene.add(leftArm2Mesh); scene.add(leftArm2Mesh);
// Right Leg Overlay Parts // Right Leg Overlay Parts
var rightLeg2Top = [
new THREE.Vector2(0.0625, 0.4375),
new THREE.Vector2(0.125, 0.4375),
new THREE.Vector2(0.125, 0.5),
new THREE.Vector2(0.0625, 0.5),
];
var rightLeg2Bottom = [
new THREE.Vector2(0.125, 0.4375),
new THREE.Vector2(0.1875, 0.4375),
new THREE.Vector2(0.1875, 0.5),
new THREE.Vector2(0.125, 0.5)
];
var rightLeg2Left = [
new THREE.Vector2(0, 0.25),
new THREE.Vector2(0.0625, 0.25),
new THREE.Vector2(0.0625, 0.4375),
new THREE.Vector2(0, 0.4375)
];
var rightLeg2Front = [
new THREE.Vector2(0.0625, 0.25),
new THREE.Vector2(0.125, 0.25),
new THREE.Vector2(0.125, 0.4375),
new THREE.Vector2(0.0625, 0.4375)
];
var rightLeg2Right = [
new THREE.Vector2(0.125, 0.25),
new THREE.Vector2(0.1875, 0.25),
new THREE.Vector2(0.1875, 0.4375),
new THREE.Vector2(0.125, 0.4375)
];
var rightLeg2Back = [
new THREE.Vector2(0.1875, 0.25),
new THREE.Vector2(0.25, 0.25),
new THREE.Vector2(0.25, 0.4375),
new THREE.Vector2(0.1875, 0.4375)
];
rightLeg2Box = new THREE.BoxGeometry(4.5, 13.5, 4.5, 0, 0, 0); rightLeg2Box = new THREE.BoxGeometry(4.5, 13.5, 4.5, 0, 0, 0);
rightLeg2Box.faceVertexUvs[0] = []; addVertices(rightLeg2Box,
rightLeg2Box.faceVertexUvs[0][0] = [rightLeg2Right[3], rightLeg2Right[0], rightLeg2Right[2]]; toSkinVertices(4, 32, 8, 36),
rightLeg2Box.faceVertexUvs[0][1] = [rightLeg2Right[0], rightLeg2Right[1], rightLeg2Right[2]]; toSkinVertices(8, 32, 12, 36),
rightLeg2Box.faceVertexUvs[0][2] = [rightLeg2Left[3], rightLeg2Left[0], rightLeg2Left[2]]; toSkinVertices(0, 36, 4, 48),
rightLeg2Box.faceVertexUvs[0][3] = [rightLeg2Left[0], rightLeg2Left[1], rightLeg2Left[2]]; toSkinVertices(4, 36, 8, 48),
rightLeg2Box.faceVertexUvs[0][4] = [rightLeg2Top[3], rightLeg2Top[0], rightLeg2Top[2]]; toSkinVertices(8, 36, 12, 48),
rightLeg2Box.faceVertexUvs[0][5] = [rightLeg2Top[0], rightLeg2Top[1], rightLeg2Top[2]]; toSkinVertices(12, 36, 16, 48)
rightLeg2Box.faceVertexUvs[0][6] = [rightLeg2Bottom[0], rightLeg2Bottom[3], rightLeg2Bottom[1]]; );
rightLeg2Box.faceVertexUvs[0][7] = [rightLeg2Bottom[3], rightLeg2Bottom[2], rightLeg2Bottom[1]];
rightLeg2Box.faceVertexUvs[0][8] = [rightLeg2Front[3], rightLeg2Front[0], rightLeg2Front[2]];
rightLeg2Box.faceVertexUvs[0][9] = [rightLeg2Front[0], rightLeg2Front[1], rightLeg2Front[2]];
rightLeg2Box.faceVertexUvs[0][10] = [rightLeg2Back[3], rightLeg2Back[0], rightLeg2Back[2]];
rightLeg2Box.faceVertexUvs[0][11] = [rightLeg2Back[0], rightLeg2Back[1], rightLeg2Back[2]];
rightLeg2Mesh = new THREE.Mesh(rightLeg2Box, layer2Material); rightLeg2Mesh = new THREE.Mesh(rightLeg2Box, layer2Material);
rightLeg2Mesh.name = "rightLeg2" rightLeg2Mesh.name = "rightLeg2"
rightLeg2Mesh.position.y = -22; rightLeg2Mesh.position.y = -22;
@ -726,56 +330,15 @@ function SkinPreview3D(model, skinCanvas, capeCanvas, canvasW, canvasH, isSlim){
scene.add(rightLeg2Mesh); scene.add(rightLeg2Mesh);
// Left Leg Overlay Parts // Left Leg Overlay Parts
var leftLeg2Top = [
new THREE.Vector2(0.0625, 0.1875),
new THREE.Vector2(0.125, 0.1875),
new THREE.Vector2(0.125, 0.25),
new THREE.Vector2(0.0625, 0.25),
];
var leftLeg2Bottom = [
new THREE.Vector2(0.125, 0.1875),
new THREE.Vector2(0.1875, 0.1875),
new THREE.Vector2(0.1875, 0.25),
new THREE.Vector2(0.125, 0.25)
];
var leftLeg2Left = [
new THREE.Vector2(0, 0),
new THREE.Vector2(0.0625, 0),
new THREE.Vector2(0.0625, 0.1875),
new THREE.Vector2(0, 0.1875)
];
var leftLeg2Front = [
new THREE.Vector2(0.0625, 0),
new THREE.Vector2(0.125, 0),
new THREE.Vector2(0.125, 0.1875),
new THREE.Vector2(0.0625, 0.1875)
];
var leftLeg2Right = [
new THREE.Vector2(0.125, 0),
new THREE.Vector2(0.1875, 0),
new THREE.Vector2(0.1875, 0.1875),
new THREE.Vector2(0.125, 0.1875)
];
var leftLeg2Back = [
new THREE.Vector2(0.1875, 0),
new THREE.Vector2(0.25, 0),
new THREE.Vector2(0.25, 0.1875),
new THREE.Vector2(0.1875, 0.1875)
];
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] = []; addVertices(leftLeg2Box,
leftLeg2Box.faceVertexUvs[0][0] = [leftLeg2Right[3], leftLeg2Right[0], leftLeg2Right[2]]; toSkinVertices(4, 48, 8, 52),
leftLeg2Box.faceVertexUvs[0][1] = [leftLeg2Right[0], leftLeg2Right[1], leftLeg2Right[2]]; toSkinVertices(8, 48, 12, 52),
leftLeg2Box.faceVertexUvs[0][2] = [leftLeg2Left[3], leftLeg2Left[0], leftLeg2Left[2]]; toSkinVertices(0, 52, 4, 64),
leftLeg2Box.faceVertexUvs[0][3] = [leftLeg2Left[0], leftLeg2Left[1], leftLeg2Left[2]]; toSkinVertices(4, 52, 8, 64),
leftLeg2Box.faceVertexUvs[0][4] = [leftLeg2Top[3], leftLeg2Top[0], leftLeg2Top[2]]; toSkinVertices(8, 52, 12, 64),
leftLeg2Box.faceVertexUvs[0][5] = [leftLeg2Top[0], leftLeg2Top[1], leftLeg2Top[2]]; toSkinVertices(12, 52, 16, 64)
leftLeg2Box.faceVertexUvs[0][6] = [leftLeg2Bottom[0], leftLeg2Bottom[3], leftLeg2Bottom[1]]; );
leftLeg2Box.faceVertexUvs[0][7] = [leftLeg2Bottom[3], leftLeg2Bottom[2], leftLeg2Bottom[1]];
leftLeg2Box.faceVertexUvs[0][8] = [leftLeg2Front[3], leftLeg2Front[0], leftLeg2Front[2]];
leftLeg2Box.faceVertexUvs[0][9] = [leftLeg2Front[0], leftLeg2Front[1], leftLeg2Front[2]];
leftLeg2Box.faceVertexUvs[0][10] = [leftLeg2Back[3], leftLeg2Back[0], leftLeg2Back[2]];
leftLeg2Box.faceVertexUvs[0][11] = [leftLeg2Back[0], leftLeg2Back[1], leftLeg2Back[2]];
leftLeg2Mesh = new THREE.Mesh(leftLeg2Box, layer2Material); leftLeg2Mesh = new THREE.Mesh(leftLeg2Box, layer2Material);
leftLeg2Mesh.name = "leftLeg2"; leftLeg2Mesh.name = "leftLeg2";
leftLeg2Mesh.position.y = -22; leftLeg2Mesh.position.y = -22;
@ -783,66 +346,24 @@ function SkinPreview3D(model, skinCanvas, capeCanvas, canvasW, canvasH, isSlim){
scene.add(leftLeg2Mesh); scene.add(leftLeg2Mesh);
// Cape Parts // Cape Parts
var capeTop = [ // back = outside
new THREE.Vector2(1/22, 21/17), // front = inside
new THREE.Vector2(11/22, 21/17),
new THREE.Vector2(11/22, 22/17),
new THREE.Vector2(1/22, 22/17),
];
var capeBottom = [
new THREE.Vector2(11/22, 16/17),
new THREE.Vector2(21/22, 16/17),
new THREE.Vector2(21/22, 16/17),
new THREE.Vector2(11/22, 16/17)
];
var capeLeft = [
new THREE.Vector2(11/22, 0/17),
new THREE.Vector2(12/22, 0/17),
new THREE.Vector2(12/22, 16/17),
new THREE.Vector2(11/22, 16/17)
];
var capeFront = [
new THREE.Vector2(12/22, 0/17),
new THREE.Vector2(1, 0/17),
new THREE.Vector2(1, 16/17),
new THREE.Vector2(12/22, 16/17)
];
var capeRight = [
new THREE.Vector2(0, 0/17),
new THREE.Vector2(1/22, 0/17),
new THREE.Vector2(1/22, 16/17),
new THREE.Vector2(0, 16/17)
];
var capeBack = [
new THREE.Vector2(1/22, 0/17),
new THREE.Vector2(11/22, 0/17),
new THREE.Vector2(11/22, 16/17),
new THREE.Vector2(1/22, 16/17)
];
capeBox = new THREE.BoxGeometry(10, 16, 1, 0, 0, 0); capeBox = new THREE.BoxGeometry(10, 16, 1, 0, 0, 0);
capeBox.faceVertexUvs[0] = []; addVertices(capeBox,
capeBox.faceVertexUvs[0][0] = [capeRight[3], capeRight[0], capeRight[2]]; toCapeVertices(1, 0, 11, 0),
capeBox.faceVertexUvs[0][1] = [capeRight[0], capeRight[1], capeRight[2]]; toCapeVertices(11, 0, 21, 0),
capeBox.faceVertexUvs[0][2] = [capeLeft[3], capeLeft[0], capeLeft[2]]; toCapeVertices(11, 1, 11, 17),
capeBox.faceVertexUvs[0][3] = [capeLeft[0], capeLeft[1], capeLeft[2]]; toCapeVertices(12, 1, 22, 17),
capeBox.faceVertexUvs[0][4] = [capeTop[3], capeTop[0], capeTop[2]]; toCapeVertices(0, 1, 0, 17),
capeBox.faceVertexUvs[0][5] = [capeTop[0], capeTop[1], capeTop[2]]; toCapeVertices(1, 1, 11, 17)
capeBox.faceVertexUvs[0][6] = [capeBottom[0], capeBottom[3], capeBottom[1]]; );
capeBox.faceVertexUvs[0][7] = [capeBottom[3], capeBottom[2], capeBottom[1]];
capeBox.faceVertexUvs[0][8] = [capeFront[3], capeFront[0], capeFront[2]];
capeBox.faceVertexUvs[0][9] = [capeFront[0], capeFront[1], capeFront[2]];
capeBox.faceVertexUvs[0][10] = [capeBack[3], capeBack[0], capeBack[2]];
capeBox.faceVertexUvs[0][11] = [capeBack[0], capeBack[1], capeBack[2]];
capeMesh = new THREE.Mesh(capeBox, capeMaterial); capeMesh = new THREE.Mesh(capeBox, capeMaterial);
capeMesh.name = "cape"; capeMesh.name = "cape";
capePivot = new THREE.Group();
scene.add(capePivot);
capeMesh.position.y = -12.75; capeMesh.position.y = -12.75;
capeMesh.position.z = -0.55; capeMesh.position.z = -0.55;
capePivot = new THREE.Group();
capePivot.rotation.x = 25 * (Math.PI/180); capePivot.rotation.x = 25 * (Math.PI/180);
scene.add(capePivot);
renderer = new THREE.WebGLRenderer({angleRot: true, alpha: true, antialias: false}); renderer = new THREE.WebGLRenderer({angleRot: true, alpha: true, antialias: false});
renderer.setSize(canvasW, canvasH); renderer.setSize(canvasW, canvasH);
@ -852,7 +373,7 @@ function SkinPreview3D(model, skinCanvas, capeCanvas, canvasW, canvasH, isSlim){
} }
var startTime = Date.now(); var startTime = Date.now();
function drawSkin() { var drawSkin = () => {
requestAnimationFrame(drawSkin); requestAnimationFrame(drawSkin);
var time = (Date.now() - startTime)/1000; var time = (Date.now() - startTime)/1000;
if(!mouseDown && !isPaused){ if(!mouseDown && !isPaused){