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

refactor

This commit is contained in:
yushijinhun 2017-08-29 19:43:35 +08:00
parent fc129b92dc
commit 30cf976800
No known key found for this signature in database
GPG Key ID: 5BC167F73EA558E4
5 changed files with 133 additions and 241 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
Vagrantfile vendored
View File

@ -1,23 +0,0 @@
VAGRANTFILE_API_VERSION = "2"
Vagrant.configure(VAGRANTFILE_API_VERSION) do |config|
config.vm.box = "ubuntu/trusty64"
config.vm.synced_folder ".", "/var/www", type: "nfs"
config.vm.hostname = "skinpreview3d"
config.vm.network "forwarded_port", guest: 80, host: 80
config.vm.provider "virtualbox" do |v|
v.memory = 2048
v.cpus = 2
v.customize ["modifyvm", :id, "--natdnshostresolver1", "on"]
v.customize ["modifyvm", :id, "--natdnsproxy1", "on"]
end
# Shell provisioning
config.vm.provision "shell" do |s|
s.path = "config/init.sh"
end
end

10
config/init.sh
View File

@ -1,10 +0,0 @@
#!/bin/bash
apt-get update > /dev/null
apt-get install nginx -y > /dev/null
echo "nginx Config files"
rm -rf /etc/nginx/sites-available/default
rm -rf /etc/nginx/sites-enabled/default
ln -s /var/www/config/nginx_vhost /etc/nginx/sites-enabled/
service nginx restart

10
config/nginx_vhost
View File

@ -1,10 +0,0 @@
server {
listen 80;
root /var/www;
index example.html;
server_name localhost;
sendfile off; #needed for nfs
}

36
example.html
View File

@ -7,43 +7,29 @@
display: none; display: none;
} }
#canvas_container{
width: 470px;
background: #000;
}
</style> </style>
</head> </head>
<body> <body>
<div id="canvas_container"> <div id="canvas_container">
<canvas id="canvas" width="64" height="64"></canvas> <canvas id="canvas"></canvas>
<canvas id="cape" width="22" height="17"></canvas> <canvas id="cape"></canvas>
</div> </div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
<script type="text/javascript" src="/js/skinpreview3d.js"></script> <script type="text/javascript" src="js/skinpreview3d.js"></script>
<script> <script>
$(function() { $(function() {
$("#canvas_container").skinPreview3D({ $("#canvas_container").skinPreview3D({
skinUrl: "/img/Dinnerbone.png", skinUrl: "img/Dinnerbone.png",
capeUrl: "/img/cape.png", capeUrl: "img/cape.png",
canvasID: "canvas" skinCanvas: $('#canvas'),
}); capeCanvas: $('#cape')
});
}); });
</script> </script>
<label>
<input id="head2" class="toggle-head" type="checkbox" checked> Head
</label>
<label>
<input class="toggle-layer2" type="checkbox" checked> Second Layer
</label>
<label>
<input class="toggle-cape" type="checkbox" checked> Cape
</label>
</body> </body>
</html> </html>

295
js/skinpreview3d.js
View File

@ -11,7 +11,7 @@ function SkinUtil(){
this.copyImage(context, 4, 20, 4, 12, 20, 52, true); // Front 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, 8, 20, 4, 12, 16, 52, true); // Inner Leg
this.copyImage(context, 12, 20, 4, 12, 28, 52, true); // Back 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, 44, 16, 4, 4, 36, 48, true); // Top Arm
this.copyImage(context, 48, 16, 4, 4, 40, 48, true); // Bottom 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, 40, 20, 4, 12, 40, 52, true); // Outer Arm
@ -22,7 +22,7 @@ function SkinUtil(){
this.copyImage = function(context, sX, sY, w, h, dX, dY, flipHorizontal) { this.copyImage = function(context, sX, sY, w, h, dX, dY, flipHorizontal) {
var imgData = context.getImageData(sX, sY, w, h); var imgData = context.getImageData(sX, sY, w, h);
if(flipHorizontal){ if(flipHorizontal){
for(y = 0; y < h; y++) { for(y = 0; y < h; y++) {
for(x = 0; x < (w / 2); x++) { for(x = 0; x < (w / 2); x++) {
@ -32,17 +32,17 @@ function SkinUtil(){
var pA2 = imgData.data[index+1]; var pA2 = imgData.data[index+1];
var pA3 = imgData.data[index+2]; var pA3 = imgData.data[index+2];
var pA4 = imgData.data[index+3]; var pA4 = imgData.data[index+3];
var pB1 = imgData.data[index2]; var pB1 = imgData.data[index2];
var pB2 = imgData.data[index2+1]; var pB2 = imgData.data[index2+1];
var pB3 = imgData.data[index2+2]; var pB3 = imgData.data[index2+2];
var pB4 = imgData.data[index2+3]; var pB4 = imgData.data[index2+3];
imgData.data[index] = pB1; imgData.data[index] = pB1;
imgData.data[index+1] = pB2; imgData.data[index+1] = pB2;
imgData.data[index+2] = pB3; imgData.data[index+2] = pB3;
imgData.data[index+3] = pB4; imgData.data[index+3] = pB4;
imgData.data[index2] = pA1; imgData.data[index2] = pA1;
imgData.data[index2+1] = pA2; imgData.data[index2+1] = pA2;
imgData.data[index2+2] = pA3; imgData.data[index2+2] = pA3;
@ -50,10 +50,10 @@ function SkinUtil(){
} }
} }
} }
context.putImageData(imgData,dX,dY); context.putImageData(imgData,dX,dY);
} }
this.fixOverlay = function(context) { this.fixOverlay = function(context) {
this.fixHead2(context); this.fixHead2(context);
this.fixBody2(context); this.fixBody2(context);
@ -66,14 +66,14 @@ function SkinUtil(){
this.fixHead2 = function(context) { this.fixHead2 = function(context) {
// Front // Front
if(this.hasTransparency(context, 40, 8, 8, 8)) return; if(this.hasTransparency(context, 40, 8, 8, 8)) return;
// Top, Bottom, Right, Left, Back // Top, Bottom, Right, Left, Back
if(this.hasTransparency(context, 40, 0, 8, 8)) return; if(this.hasTransparency(context, 40, 0, 8, 8)) return;
if(this.hasTransparency(context, 48, 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, 32, 8, 8, 8)) return;
if(this.hasTransparency(context, 48, 8, 8, 8)) return; if(this.hasTransparency(context, 48, 8, 8, 8)) return;
if(this.hasTransparency(context, 56, 8, 8, 8)) return; if(this.hasTransparency(context, 56, 8, 8, 8)) return;
// Didn't have transparency, clearing the head overlay area. // Didn't have transparency, clearing the head overlay area.
context.clearRect(40, 0, 8, 8); context.clearRect(40, 0, 8, 8);
context.clearRect(48, 0, 8, 8); context.clearRect(48, 0, 8, 8);
@ -86,14 +86,14 @@ function SkinUtil(){
this.fixBody2 = function(context) { this.fixBody2 = function(context) {
// Front // Front
if(this.hasTransparency(context, 20, 36, 8, 12)) return; if(this.hasTransparency(context, 20, 36, 8, 12)) return;
// Top, Bottom, Right, Left, Back // Top, Bottom, Right, Left, Back
if(this.hasTransparency(context, 20, 32, 8, 4)) return; if(this.hasTransparency(context, 20, 32, 8, 4)) return;
if(this.hasTransparency(context, 28, 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, 16, 36, 4, 12)) return;
if(this.hasTransparency(context, 28, 36, 4, 12)) return; if(this.hasTransparency(context, 28, 36, 4, 12)) return;
if(this.hasTransparency(context, 32, 36, 8, 12)) return; if(this.hasTransparency(context, 32, 36, 8, 12)) return;
// Didn't have transparency, clearing the body overlay area. // Didn't have transparency, clearing the body overlay area.
context.clearRect(20, 32, 8, 4); context.clearRect(20, 32, 8, 4);
context.clearRect(28, 32, 8, 4); context.clearRect(28, 32, 8, 4);
@ -106,14 +106,14 @@ function SkinUtil(){
this.fixRightArm2 = function(context) { this.fixRightArm2 = function(context) {
// Front // Front
if(this.hasTransparency(context, 44, 36, 4, 12)) return; if(this.hasTransparency(context, 44, 36, 4, 12)) return;
// Top, Bottom, Right, Left, Back // Top, Bottom, Right, Left, Back
if(this.hasTransparency(context, 44, 32, 4, 4)) return; if(this.hasTransparency(context, 44, 32, 4, 4)) return;
if(this.hasTransparency(context, 48, 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, 40, 36, 4, 12)) return;
if(this.hasTransparency(context, 48, 36, 4, 12)) return; if(this.hasTransparency(context, 48, 36, 4, 12)) return;
if(this.hasTransparency(context, 52, 36, 4, 12)) return; if(this.hasTransparency(context, 52, 36, 4, 12)) return;
// Didn't have transparency, clearing the right arm overlay area. // Didn't have transparency, clearing the right arm overlay area.
context.clearRect(44, 32, 4, 4); context.clearRect(44, 32, 4, 4);
context.clearRect(48, 32, 4, 4); context.clearRect(48, 32, 4, 4);
@ -126,14 +126,14 @@ function SkinUtil(){
this.fixLeftArm2 = function(context) { this.fixLeftArm2 = function(context) {
// Front // Front
if(this.hasTransparency(context, 52, 52, 4, 12)) return; if(this.hasTransparency(context, 52, 52, 4, 12)) return;
// Top, Bottom, Right, Left, Back // Top, Bottom, Right, Left, Back
if(this.hasTransparency(context, 52, 48, 4, 4)) return; if(this.hasTransparency(context, 52, 48, 4, 4)) return;
if(this.hasTransparency(context, 56, 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, 48, 52, 4, 12)) return;
if(this.hasTransparency(context, 56, 52, 4, 12)) return; if(this.hasTransparency(context, 56, 52, 4, 12)) return;
if(this.hasTransparency(context, 60, 52, 4, 12)) return; if(this.hasTransparency(context, 60, 52, 4, 12)) return;
// Didn't have transparency, clearing the left arm overlay area. // Didn't have transparency, clearing the left arm overlay area.
context.clearRect(52, 48, 4, 4); context.clearRect(52, 48, 4, 4);
context.clearRect(56, 48, 4, 4); context.clearRect(56, 48, 4, 4);
@ -146,14 +146,14 @@ function SkinUtil(){
this.fixRightLeg2 = function(context) { this.fixRightLeg2 = function(context) {
// Front // Front
if(this.hasTransparency(context, 4, 36, 4, 12)) return; if(this.hasTransparency(context, 4, 36, 4, 12)) return;
// Top, Bottom, Right, Left, Back // Top, Bottom, Right, Left, Back
if(this.hasTransparency(context, 4, 32, 4, 4)) return; if(this.hasTransparency(context, 4, 32, 4, 4)) return;
if(this.hasTransparency(context, 8, 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, 0, 36, 4, 12)) return;
if(this.hasTransparency(context, 8, 36, 4, 12)) return; if(this.hasTransparency(context, 8, 36, 4, 12)) return;
if(this.hasTransparency(context, 12, 36, 4, 12)) return; if(this.hasTransparency(context, 12, 36, 4, 12)) return;
// Didn't have transparency, clearing the right leg overlay area. // Didn't have transparency, clearing the right leg overlay area.
context.clearRect(4, 32, 4, 4); context.clearRect(4, 32, 4, 4);
context.clearRect(8, 32, 4, 4); context.clearRect(8, 32, 4, 4);
@ -166,14 +166,14 @@ function SkinUtil(){
this.fixLeftLeg2 = function(context) { this.fixLeftLeg2 = function(context) {
// Front // Front
if(this.hasTransparency(context, 4, 52, 4, 12)) return; if(this.hasTransparency(context, 4, 52, 4, 12)) return;
// Top, Bottom, Right, Left, Back // Top, Bottom, Right, Left, Back
if(this.hasTransparency(context, 4, 48, 4, 4)) return; if(this.hasTransparency(context, 4, 48, 4, 4)) return;
if(this.hasTransparency(context, 8, 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, 0, 52, 4, 12)) return;
if(this.hasTransparency(context, 8, 52, 4, 12)) return; if(this.hasTransparency(context, 8, 52, 4, 12)) return;
if(this.hasTransparency(context, 12, 52, 4, 12)) return; if(this.hasTransparency(context, 12, 52, 4, 12)) return;
// Didn't have transparency, clearing the left leg overlay area. // Didn't have transparency, clearing the left leg overlay area.
context.clearRect(4, 48, 4, 4); context.clearRect(4, 48, 4, 4);
context.clearRect(8, 48, 4, 4); context.clearRect(8, 48, 4, 4);
@ -193,7 +193,7 @@ function SkinUtil(){
context.clearRect(36, 16, 8, 4); context.clearRect(36, 16, 8, 4);
context.clearRect(52, 16, 4, 4); context.clearRect(52, 16, 4, 4);
context.clearRect(56, 16, 8, 32); context.clearRect(56, 16, 8, 32);
// 64x64 skin parts // 64x64 skin parts
context.clearRect(0, 32, 4, 4); context.clearRect(0, 32, 4, 4);
context.clearRect(12, 32, 8, 4); context.clearRect(12, 32, 8, 4);
@ -208,14 +208,14 @@ function SkinUtil(){
this.hasTransparency = function(context, x, y, w, h) { this.hasTransparency = function(context, x, y, w, h) {
var imgData = context.getImageData(x, y, w, h); var imgData = context.getImageData(x, y, w, h);
for(y = 0; y < h; y++) { for(y = 0; y < h; y++) {
for(x = 0; x < w; x++) { for(x = 0; x < w; x++) {
var index = (x + y * w) * 4; var index = (x + y * w) * 4;
if(imgData.data[index + 3] == 0) return true; // Has transparency if(imgData.data[index + 3] == 0) return true; // Has transparency
} }
} }
return false; return false;
} }
@ -224,21 +224,19 @@ function SkinUtil(){
(function ($) { (function ($) {
'use strict'; 'use strict';
$.fn.skinPreview3D = function (options) { $.fn.skinPreview3D = function (options) {
var sp = new SkinPreview3D(this, options.canvasID, options.capeUrl); var sp = new SkinPreview3D(this, options.skinCanvas.get(0), options.capeCanvas.get(0));
sp.setSkin(options.skinUrl); sp.setSkin(options.skinUrl);
if(options.capeUrl!=null){
if(options.capeUrl){
sp.setCape(options.capeUrl); sp.setCape(options.capeUrl);
} }
}; };
} (window.jQuery)); } (window.jQuery));
function SkinPreview3D(model, canvasID, hasCape){ function SkinPreview3D(model, skinCanvas, capeCanvas){
var scene, camera, renderer; var scene, camera, renderer;
var geometry, material, mesh; var geometry, mesh;
var rightLeg2Box, leftLeg2Box; var rightLeg2Box, leftLeg2Box;
@ -246,14 +244,14 @@ function SkinPreview3D(model, canvasID, hasCape){
var canvasW = 470; var canvasW = 470;
var canvasH = 620; var canvasH = 620;
var isPaused = false; var isPaused = false;
var originMouseX = 0; var originMouseX = 0;
var rotating = false; var rotating = false;
var modelRot = 0; var modelRot = 0;
var angleRot = 0; var angleRot = 0;
var mouseDown = false; var mouseDown = false;
var util = new SkinUtil(); var util = new SkinUtil();
camera = new THREE.PerspectiveCamera(75, canvasW / canvasH, 1, 10000); camera = new THREE.PerspectiveCamera(75, canvasW / canvasH, 1, 10000);
@ -261,86 +259,74 @@ function SkinPreview3D(model, canvasID, hasCape){
scene = new THREE.Scene(); scene = new THREE.Scene();
canvas = document.getElementById(canvasID); skinCanvas.width = 64;
canvas.width = 64; skinCanvas.height = 64;
canvas.height = 64; var skinContext = skinCanvas.getContext("2d");
var context = canvas.getContext("2d");
//Cape Part //Cape Part
var canvas2 = document.getElementById('cape'); capeCanvas.width = 22;
canvas2.width = 22; capeCanvas.height = 17;
canvas2.height = 17; var capeContext = capeCanvas.getContext("2d");
var context2 = canvas2.getContext("2d"); var capeTexture = new THREE.Texture(capeCanvas);
var capeTexture = new THREE.Texture(canvas2);
capeTexture.magFilter = THREE.NearestFilter; capeTexture.magFilter = THREE.NearestFilter;
capeTexture.minFilter = THREE.NearestMipMapNearestFilter; capeTexture.minFilter = THREE.NearestMipMapNearestFilter;
var skinTexture = new THREE.Texture(canvas); var skinTexture = new THREE.Texture(skinCanvas);
skinTexture.magFilter = THREE.NearestFilter; skinTexture.magFilter = THREE.NearestFilter;
skinTexture.minFilter = THREE.NearestMipMapNearestFilter; skinTexture.minFilter = THREE.NearestMipMapNearestFilter;
material = new THREE.MeshBasicMaterial({map: skinTexture, side: THREE.FrontSide}); layer1Material = new THREE.MeshBasicMaterial({map: skinTexture, side: THREE.FrontSide});
material2 = new THREE.MeshBasicMaterial({map: skinTexture, transparent: true, opacity: 1, angleRotTest: 0.5, side: THREE.DoubleSide}); layer2Material = new THREE.MeshBasicMaterial({map: skinTexture, transparent: true, opacity: 1, angleRotTest: 0.5, side: THREE.DoubleSide});
capeMaterial = new THREE.MeshBasicMaterial({map: capeTexture});
// Get the texture for the cape var skinImg = new Image();
material3 = new THREE.MeshBasicMaterial({map: capeTexture}); skinImg.crossOrigin = '';
var img = new Image();
img.crossOrigin = '';
var hasAnimate = false; var hasAnimate = false;
img.onload = function() { skinImg.onload = () => {
skinContext.clearRect(0, 0, 64, 64);
skinContext.drawImage(skinImg, 0, 0);
if(skinImg.height == 32) util.convert6432To6464(skinContext);
context.clearRect(0, 0, 64, 64);
context.drawImage(img, 0, 0);
if(img.height == 32) util.convert6432To6464(context);
//these need work //these need work
//util.fixNonVisible(context); //util.fixNonVisible(skinContext);
//util.fixOverlay(context); //util.fixOverlay(skinContext);
skinTexture.needsUpdate = true; skinTexture.needsUpdate = true;
material.needsUpdate = true; layer1Material.needsUpdate = true;
material2.needsUpdate = true; layer2Material.needsUpdate = true;
if(!hasAnimate) if(!hasAnimate) {
{
initializeSkin(); initializeSkin();
hasAnimate = true; hasAnimate = true;
drawSkin(); drawSkin();
} }
} };
img.onerror = function() {
console.log("Failed loading " + img.src);
}
var img2=new Image(); skinImg.onerror = () => console.log("Failed loading " + skinImg.src);
img2.crossOrigin = '';
img2.onload = function() { var capeImg=new Image();
capeImg.crossOrigin = '';
capeImg.onload = () => {
capePivot.add(capeMesh);
console.log("Loaded Cape");
// Erase what was on the canvas before // Erase what was on the canvas before
context2.clearRect(0, 0, canvas2.width, canvas2.height); capeContext.clearRect(0, 0, capeCanvas.width, capeCanvas.height);
// Draw the image to the canvas // Draw the image to the canvas
context2.drawImage(img2, 0, 0); capeContext.drawImage(capeImg, 0, 0);
capeTexture.needsUpdate = true; capeTexture.needsUpdate = true;
material3.needsUpdate = true; capeMaterial.needsUpdate = true;
capeLoaded=true; capeLoaded=true;
} };
capeImg.onerror = () => console.log("Failed loading " + capeImg.src);
this.setSkin = function(url){
img.src = url; this.setSkin = url => skinImg.src = url;
} this.setCape = url => capeImg.src = url;
this.setCape = function(url){
img2.src = url;
}
function initializeSkin() { function initializeSkin() {
// Head Parts // Head Parts
@ -380,7 +366,7 @@ function SkinPreview3D(model, canvasID, hasCape){
new THREE.Vector2(0.5, 0.875), new THREE.Vector2(0.5, 0.875),
new THREE.Vector2(0.375, 0.875) new THREE.Vector2(0.375, 0.875)
]; ];
headBox = new THREE.BoxGeometry(8, 8, 8, 0, 0, 0); headBox = new THREE.BoxGeometry(8, 8, 8, 0, 0, 0);
headBox.faceVertexUvs[0] = []; headBox.faceVertexUvs[0] = [];
headBox.faceVertexUvs[0][0] = [headRight[3], headRight[0], headRight[2]]; headBox.faceVertexUvs[0][0] = [headRight[3], headRight[0], headRight[2]];
@ -395,10 +381,10 @@ function SkinPreview3D(model, canvasID, hasCape){
headBox.faceVertexUvs[0][9] = [headFront[0], headFront[1], 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][10] = [headBack[3], headBack[0], headBack[2]];
headBox.faceVertexUvs[0][11] = [headBack[0], headBack[1], headBack[2]]; headBox.faceVertexUvs[0][11] = [headBack[0], headBack[1], headBack[2]];
headMesh = new THREE.Mesh(headBox, material); headMesh = new THREE.Mesh(headBox, layer1Material);
headMesh.name = "head"; headMesh.name = "head";
scene.add(headMesh); scene.add(headMesh);
// Body Parts // Body Parts
var bodyTop = [ var bodyTop = [
new THREE.Vector2(0.3125, 0.6875), new THREE.Vector2(0.3125, 0.6875),
@ -436,7 +422,7 @@ function SkinPreview3D(model, canvasID, hasCape){
new THREE.Vector2(0.625, 0.6875), new THREE.Vector2(0.625, 0.6875),
new THREE.Vector2(0.5, 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] = []; bodyBox.faceVertexUvs[0] = [];
bodyBox.faceVertexUvs[0][0] = [bodyRight[3], bodyRight[0], bodyRight[2]]; bodyBox.faceVertexUvs[0][0] = [bodyRight[3], bodyRight[0], bodyRight[2]];
@ -451,11 +437,11 @@ function SkinPreview3D(model, canvasID, hasCape){
bodyBox.faceVertexUvs[0][9] = [bodyFront[0], bodyFront[1], 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][10] = [bodyBack[3], bodyBack[0], bodyBack[2]];
bodyBox.faceVertexUvs[0][11] = [bodyBack[0], bodyBack[1], bodyBack[2]]; bodyBox.faceVertexUvs[0][11] = [bodyBack[0], bodyBack[1], bodyBack[2]];
bodyMesh = new THREE.Mesh(bodyBox, material); 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 = [ var rightArmTop = [
new THREE.Vector2(0.6875, 0.6875), new THREE.Vector2(0.6875, 0.6875),
@ -493,7 +479,7 @@ function SkinPreview3D(model, canvasID, hasCape){
new THREE.Vector2(0.875, 0.6875), new THREE.Vector2(0.875, 0.6875),
new THREE.Vector2(0.8125, 0.6875) new THREE.Vector2(0.8125, 0.6875)
]; ];
rightArmBox = new THREE.BoxGeometry(4, 12, 4, 0, 0, 0); rightArmBox = new THREE.BoxGeometry(4, 12, 4, 0, 0, 0);
rightArmBox.faceVertexUvs[0] = []; rightArmBox.faceVertexUvs[0] = [];
rightArmBox.faceVertexUvs[0][0] = [rightArmRight[3], rightArmRight[0], rightArmRight[2]]; rightArmBox.faceVertexUvs[0][0] = [rightArmRight[3], rightArmRight[0], rightArmRight[2]];
@ -508,12 +494,12 @@ function SkinPreview3D(model, canvasID, hasCape){
rightArmBox.faceVertexUvs[0][9] = [rightArmFront[0], rightArmFront[1], 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][10] = [rightArmBack[3], rightArmBack[0], rightArmBack[2]];
rightArmBox.faceVertexUvs[0][11] = [rightArmBack[0], rightArmBack[1], rightArmBack[2]]; rightArmBox.faceVertexUvs[0][11] = [rightArmBack[0], rightArmBack[1], rightArmBack[2]];
rightArmMesh = new THREE.Mesh(rightArmBox, material); 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 = -6;
scene.add(rightArmMesh); scene.add(rightArmMesh);
// Left Arm Parts // Left Arm Parts
var leftArmTop = [ var leftArmTop = [
new THREE.Vector2(0.5625, 0.1875), new THREE.Vector2(0.5625, 0.1875),
@ -551,7 +537,7 @@ function SkinPreview3D(model, canvasID, hasCape){
new THREE.Vector2(0.75, 0.1875), new THREE.Vector2(0.75, 0.1875),
new THREE.Vector2(0.6875, 0.1875) new THREE.Vector2(0.6875, 0.1875)
]; ];
leftArmBox = new THREE.BoxGeometry(4, 12, 4, 0, 0, 0); leftArmBox = new THREE.BoxGeometry(4, 12, 4, 0, 0, 0);
leftArmBox.faceVertexUvs[0] = []; leftArmBox.faceVertexUvs[0] = [];
leftArmBox.faceVertexUvs[0][0] = [leftArmRight[3], leftArmRight[0], leftArmRight[2]]; leftArmBox.faceVertexUvs[0][0] = [leftArmRight[3], leftArmRight[0], leftArmRight[2]];
@ -566,12 +552,12 @@ function SkinPreview3D(model, canvasID, hasCape){
leftArmBox.faceVertexUvs[0][9] = [leftArmFront[0], leftArmFront[1], 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][10] = [leftArmBack[3], leftArmBack[0], leftArmBack[2]];
leftArmBox.faceVertexUvs[0][11] = [leftArmBack[0], leftArmBack[1], leftArmBack[2]]; leftArmBox.faceVertexUvs[0][11] = [leftArmBack[0], leftArmBack[1], leftArmBack[2]];
leftArmMesh = new THREE.Mesh(leftArmBox, material); 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 = 6;
scene.add(leftArmMesh); scene.add(leftArmMesh);
// Right Leg Parts // Right Leg Parts
var rightLegTop = [ var rightLegTop = [
new THREE.Vector2(0.0625, 0.6875), new THREE.Vector2(0.0625, 0.6875),
@ -609,7 +595,7 @@ function SkinPreview3D(model, canvasID, hasCape){
new THREE.Vector2(0.25, 0.6875), new THREE.Vector2(0.25, 0.6875),
new THREE.Vector2(0.1875, 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] = []; rightLegBox.faceVertexUvs[0] = [];
rightLegBox.faceVertexUvs[0][0] = [rightLegRight[3], rightLegRight[0], rightLegRight[2]]; rightLegBox.faceVertexUvs[0][0] = [rightLegRight[3], rightLegRight[0], rightLegRight[2]];
@ -624,12 +610,12 @@ function SkinPreview3D(model, canvasID, hasCape){
rightLegBox.faceVertexUvs[0][9] = [rightLegFront[0], rightLegFront[1], 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][10] = [rightLegBack[3], rightLegBack[0], rightLegBack[2]];
rightLegBox.faceVertexUvs[0][11] = [rightLegBack[0], rightLegBack[1], rightLegBack[2]]; rightLegBox.faceVertexUvs[0][11] = [rightLegBack[0], rightLegBack[1], rightLegBack[2]];
rightLegMesh = new THREE.Mesh(rightLegBox, material); rightLegMesh = new THREE.Mesh(rightLegBox, layer1Material);
rightLegMesh.name = "rightLeg" rightLegMesh.name = "rightLeg"
rightLegMesh.position.y = -22; rightLegMesh.position.y = -22;
rightLegMesh.position.x = -2; rightLegMesh.position.x = -2;
scene.add(rightLegMesh); scene.add(rightLegMesh);
// Left Leg Parts // Left Leg Parts
var leftLegTop = [ var leftLegTop = [
new THREE.Vector2(0.3125, 0.1875), new THREE.Vector2(0.3125, 0.1875),
@ -681,12 +667,12 @@ function SkinPreview3D(model, canvasID, hasCape){
leftLegBox.faceVertexUvs[0][9] = [leftLegFront[0], leftLegFront[1], 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][10] = [leftLegBack[3], leftLegBack[0], leftLegBack[2]];
leftLegBox.faceVertexUvs[0][11] = [leftLegBack[0], leftLegBack[1], leftLegBack[2]]; leftLegBox.faceVertexUvs[0][11] = [leftLegBack[0], leftLegBack[1], leftLegBack[2]];
leftLegMesh = new THREE.Mesh(leftLegBox, material); leftLegMesh = new THREE.Mesh(leftLegBox, layer1Material);
leftLegMesh.name = "leftLeg"; leftLegMesh.name = "leftLeg";
leftLegMesh.position.y = -22; leftLegMesh.position.y = -22;
leftLegMesh.position.x = 2; leftLegMesh.position.x = 2;
scene.add(leftLegMesh); scene.add(leftLegMesh);
// Head Overlay Parts // Head Overlay Parts
var head2Top = [ var head2Top = [
new THREE.Vector2(0.625, 0.875), new THREE.Vector2(0.625, 0.875),
@ -738,10 +724,10 @@ function SkinPreview3D(model, canvasID, hasCape){
head2Box.faceVertexUvs[0][9] = [head2Front[0], head2Front[1], 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][10] = [head2Back[3], head2Back[0], head2Back[2]];
head2Box.faceVertexUvs[0][11] = [head2Back[0], head2Back[1], head2Back[2]]; head2Box.faceVertexUvs[0][11] = [head2Back[0], head2Back[1], head2Back[2]];
head2Mesh = new THREE.Mesh(head2Box, material2); 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 = [ var body2Top = [
new THREE.Vector2(0.3125, 0.4375), new THREE.Vector2(0.3125, 0.4375),
@ -793,11 +779,11 @@ function SkinPreview3D(model, canvasID, hasCape){
body2Box.faceVertexUvs[0][9] = [body2Front[0], body2Front[1], 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][10] = [body2Back[3], body2Back[0], body2Back[2]];
body2Box.faceVertexUvs[0][11] = [body2Back[0], body2Back[1], body2Back[2]]; body2Box.faceVertexUvs[0][11] = [body2Back[0], body2Back[1], body2Back[2]];
body2Mesh = new THREE.Mesh(body2Box, material2); 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 = [ var rightArm2Top = [
new THREE.Vector2(0.6875, 0.4375), new THREE.Vector2(0.6875, 0.4375),
@ -849,12 +835,12 @@ function SkinPreview3D(model, canvasID, hasCape){
rightArm2Box.faceVertexUvs[0][9] = [rightArm2Front[0], rightArm2Front[1], 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][10] = [rightArm2Back[3], rightArm2Back[0], rightArm2Back[2]];
rightArm2Box.faceVertexUvs[0][11] = [rightArm2Back[0], rightArm2Back[1], rightArm2Back[2]]; rightArm2Box.faceVertexUvs[0][11] = [rightArm2Back[0], rightArm2Back[1], rightArm2Back[2]];
rightArm2Mesh = new THREE.Mesh(rightArm2Box, material2); rightArm2Mesh = new THREE.Mesh(rightArm2Box, layer2Material);
rightArm2Mesh.name = "rightArm2"; rightArm2Mesh.name = "rightArm2";
rightArm2Mesh.position.y = -10; rightArm2Mesh.position.y = -10;
rightArm2Mesh.position.x = -6; rightArm2Mesh.position.x = -6;
scene.add(rightArm2Mesh); scene.add(rightArm2Mesh);
// Left Arm Overlay Parts // Left Arm Overlay Parts
var leftArm2Top = [ var leftArm2Top = [
new THREE.Vector2(0.8125, 0.1875), new THREE.Vector2(0.8125, 0.1875),
@ -892,7 +878,7 @@ function SkinPreview3D(model, canvasID, hasCape){
new THREE.Vector2(1, 0.1875), new THREE.Vector2(1, 0.1875),
new THREE.Vector2(0.9375, 0.1875) new THREE.Vector2(0.9375, 0.1875)
]; ];
leftArm2Box = new THREE.BoxGeometry(4.5, 13.5, 4.5, 0, 0, 0); leftArm2Box = new THREE.BoxGeometry(4.5, 13.5, 4.5, 0, 0, 0);
leftArm2Box.faceVertexUvs[0] = []; leftArm2Box.faceVertexUvs[0] = [];
leftArm2Box.faceVertexUvs[0][0] = [leftArm2Right[3], leftArm2Right[0], leftArm2Right[2]]; leftArm2Box.faceVertexUvs[0][0] = [leftArm2Right[3], leftArm2Right[0], leftArm2Right[2]];
@ -907,13 +893,13 @@ function SkinPreview3D(model, canvasID, hasCape){
leftArm2Box.faceVertexUvs[0][9] = [leftArm2Front[0], leftArm2Front[1], 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][10] = [leftArm2Back[3], leftArm2Back[0], leftArm2Back[2]];
leftArm2Box.faceVertexUvs[0][11] = [leftArm2Back[0], leftArm2Back[1], leftArm2Back[2]]; leftArm2Box.faceVertexUvs[0][11] = [leftArm2Back[0], leftArm2Back[1], leftArm2Back[2]];
leftArm2Mesh = new THREE.Mesh(leftArm2Box, material2); leftArm2Mesh = new THREE.Mesh(leftArm2Box, layer2Material);
leftArm2Mesh.name = "leftArm2"; leftArm2Mesh.name = "leftArm2";
leftArm2Mesh.position.y = -10; leftArm2Mesh.position.y = -10;
leftArm2Mesh.position.x = 6; leftArm2Mesh.position.x = 6;
// leftArm2Mesh.visible = true; // leftArm2Mesh.visible = true;
scene.add(leftArm2Mesh); scene.add(leftArm2Mesh);
// Right Leg Overlay Parts // Right Leg Overlay Parts
var rightLeg2Top = [ var rightLeg2Top = [
new THREE.Vector2(0.0625, 0.4375), new THREE.Vector2(0.0625, 0.4375),
@ -951,7 +937,7 @@ function SkinPreview3D(model, canvasID, hasCape){
new THREE.Vector2(0.25, 0.4375), new THREE.Vector2(0.25, 0.4375),
new THREE.Vector2(0.1875, 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] = []; rightLeg2Box.faceVertexUvs[0] = [];
rightLeg2Box.faceVertexUvs[0][0] = [rightLeg2Right[3], rightLeg2Right[0], rightLeg2Right[2]]; rightLeg2Box.faceVertexUvs[0][0] = [rightLeg2Right[3], rightLeg2Right[0], rightLeg2Right[2]];
@ -966,12 +952,12 @@ function SkinPreview3D(model, canvasID, hasCape){
rightLeg2Box.faceVertexUvs[0][9] = [rightLeg2Front[0], rightLeg2Front[1], 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][10] = [rightLeg2Back[3], rightLeg2Back[0], rightLeg2Back[2]];
rightLeg2Box.faceVertexUvs[0][11] = [rightLeg2Back[0], rightLeg2Back[1], rightLeg2Back[2]]; rightLeg2Box.faceVertexUvs[0][11] = [rightLeg2Back[0], rightLeg2Back[1], rightLeg2Back[2]];
rightLeg2Mesh = new THREE.Mesh(rightLeg2Box, material2); rightLeg2Mesh = new THREE.Mesh(rightLeg2Box, layer2Material);
rightLeg2Mesh.name = "rightLeg2" rightLeg2Mesh.name = "rightLeg2"
rightLeg2Mesh.position.y = -22; rightLeg2Mesh.position.y = -22;
rightLeg2Mesh.position.x = -2; rightLeg2Mesh.position.x = -2;
scene.add(rightLeg2Mesh); scene.add(rightLeg2Mesh);
// Left Leg Overlay Parts // Left Leg Overlay Parts
var leftLeg2Top = [ var leftLeg2Top = [
new THREE.Vector2(0.0625, 0.1875), new THREE.Vector2(0.0625, 0.1875),
@ -1023,13 +1009,12 @@ function SkinPreview3D(model, canvasID, hasCape){
leftLeg2Box.faceVertexUvs[0][9] = [leftLeg2Front[0], leftLeg2Front[1], 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][10] = [leftLeg2Back[3], leftLeg2Back[0], leftLeg2Back[2]];
leftLeg2Box.faceVertexUvs[0][11] = [leftLeg2Back[0], leftLeg2Back[1], leftLeg2Back[2]]; leftLeg2Box.faceVertexUvs[0][11] = [leftLeg2Back[0], leftLeg2Back[1], leftLeg2Back[2]];
leftLeg2Mesh = new THREE.Mesh(leftLeg2Box, material2); leftLeg2Mesh = new THREE.Mesh(leftLeg2Box, layer2Material);
leftLeg2Mesh.name = "leftLeg2"; leftLeg2Mesh.name = "leftLeg2";
leftLeg2Mesh.position.y = -22; leftLeg2Mesh.position.y = -22;
leftLeg2Mesh.position.x = 2; leftLeg2Mesh.position.x = 2;
scene.add(leftLeg2Mesh); scene.add(leftLeg2Mesh);
// Cape Parts // Cape Parts
var capeTop = [ var capeTop = [
new THREE.Vector2(1/22, 21/17), new THREE.Vector2(1/22, 21/17),
@ -1081,27 +1066,23 @@ function SkinPreview3D(model, canvasID, hasCape){
capeBox.faceVertexUvs[0][9] = [capeFront[0], capeFront[1], 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][10] = [capeBack[3], capeBack[0], capeBack[2]];
capeBox.faceVertexUvs[0][11] = [capeBack[0], capeBack[1], capeBack[2]]; capeBox.faceVertexUvs[0][11] = [capeBack[0], capeBack[1], capeBack[2]];
capeMesh = new THREE.Mesh(capeBox, material3); capeMesh = new THREE.Mesh(capeBox, capeMaterial);
capeMesh.name = "cape"; capeMesh.name = "cape";
capePivot = new THREE.Group(); capePivot = new THREE.Group();
scene.add( capePivot ); scene.add( capePivot );
capeMesh.position.y = -12.75; capeMesh.position.y = -12.75;
capeMesh.position.z = -0.55; capeMesh.position.z = -0.55;
capePivot.rotation.x = 25 * (Math.PI/180); capePivot.rotation.x = 25 * (Math.PI/180);
if(hasCape != null){ renderer = new THREE.WebGLRenderer({angleRot: true, alpha: true});
capePivot.add(capeMesh);
}
renderer = new THREE.WebGLRenderer({angleRot: true});
renderer.setSize(canvasW, canvasH); renderer.setSize(canvasW, canvasH);
model.append(renderer.domElement); model.append(renderer.domElement);
} }
var startTime = Date.now(); var startTime = Date.now();
function drawSkin() { function drawSkin() {
requestAnimationFrame(drawSkin); requestAnimationFrame(drawSkin);
@ -1110,22 +1091,22 @@ function SkinPreview3D(model, canvasID, hasCape){
modelRot += 0.5; modelRot += 0.5;
angleRot += 0.01; angleRot += 0.01;
} }
var ang = -(modelRot * Math.PI / 180); var ang = -(modelRot * Math.PI / 180);
camera.rotation.y = ang; camera.rotation.y = ang;
camera.position.z = radius*Math.cos(ang); camera.position.z = radius*Math.cos(ang);
camera.position.x = radius*Math.sin(ang); camera.position.x = radius*Math.sin(ang);
var speed = 3; var speed = 3;
//Leg Swing //Leg Swing
leftLeg2Mesh.rotation.x = leftLegMesh.rotation.x = Math.cos(angleRot*speed); leftLeg2Mesh.rotation.x = leftLegMesh.rotation.x = Math.cos(angleRot*speed);
leftLeg2Mesh.position.z = leftLegMesh.position.z = 0 - 6*Math.sin(leftLegMesh.rotation.x); leftLeg2Mesh.position.z = leftLegMesh.position.z = 0 - 6*Math.sin(leftLegMesh.rotation.x);
leftLeg2Mesh.position.y = leftLegMesh.position.y = -16 - 6*Math.abs(Math.cos(leftLegMesh.rotation.x)); leftLeg2Mesh.position.y = leftLegMesh.position.y = -16 - 6*Math.abs(Math.cos(leftLegMesh.rotation.x));
rightLeg2Mesh.rotation.x = rightLegMesh.rotation.x = Math.cos(angleRot*speed + (Math.PI)); rightLeg2Mesh.rotation.x = rightLegMesh.rotation.x = Math.cos(angleRot*speed + (Math.PI));
rightLeg2Mesh.position.z = rightLegMesh.position.z = 0 - 6*Math.sin(rightLegMesh.rotation.x); rightLeg2Mesh.position.z = rightLegMesh.position.z = 0 - 6*Math.sin(rightLegMesh.rotation.x);
rightLeg2Mesh.position.y = rightLegMesh.position.y = -16 - 6*Math.abs(Math.cos(rightLegMesh.rotation.x)); rightLeg2Mesh.position.y = rightLegMesh.position.y = -16 - 6*Math.abs(Math.cos(rightLegMesh.rotation.x));
//Arm Swing //Arm Swing
leftArm2Mesh.rotation.x = leftArmMesh.rotation.x = Math.cos(angleRot*speed + (Math.PI)); leftArm2Mesh.rotation.x = leftArmMesh.rotation.x = Math.cos(angleRot*speed + (Math.PI));
leftArm2Mesh.position.z = leftArmMesh.position.z = 0 - 6*Math.sin(leftArmMesh.rotation.x); leftArm2Mesh.position.z = leftArmMesh.position.z = 0 - 6*Math.sin(leftArmMesh.rotation.x);
@ -1134,15 +1115,14 @@ function SkinPreview3D(model, canvasID, hasCape){
rightArm2Mesh.position.z = rightArmMesh.position.z = 0 - 6*Math.sin(rightArmMesh.rotation.x); rightArm2Mesh.position.z = rightArmMesh.position.z = 0 - 6*Math.sin(rightArmMesh.rotation.x);
rightArm2Mesh.position.y = rightArmMesh.position.y = -4 - 6*Math.abs(Math.cos(rightArmMesh.rotation.x)); rightArm2Mesh.position.y = rightArmMesh.position.y = -4 - 6*Math.abs(Math.cos(rightArmMesh.rotation.x));
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;
@ -1160,37 +1140,6 @@ function SkinPreview3D(model, canvasID, hasCape){
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;
var y = e.pageY - this.offsetTop; modelRot = x;
modelRot = x;
}); });
}
//checkbox control logic
$(".toggle-head").click(function(){
var checked = $(this)[0].checked;
var part = scene.getObjectByName("head2", false);
part.visible = !part.visible;
});
var layer2parts = [
"head2", "leftArm2", "body2", "rightArm2", "leftLeg2", "rightLeg2"
];
$(".toggle-cape").click(function(){
var part = scene.getObjectByName("cape", false);
part.visible = !part.visible;
});
$(".toggle-layer2").click(function(){
var head = scene.getObjectByName("head2", false);
$("#head2").prop("checked", !head.visible);
var checked = $(this)[0].checked;
for(var i=0; i<layer2parts.length; i++){
var part = scene.getObjectByName(layer2parts[i], false);
part.visible = !part.visible;
}
});
}