Minecraftt JavaScript Skin Animation

animation.js

/**
 * Code by djazz as part of his Minecraft Skin Viewer
 * http://djazz.mine.nu/apps/MinecraftSkin/
 */
var MSP = (function (global, undefined) {
    'use strict';
    // shim layer with setTimeout fallback
    window.requestAnimFrame = (function () {
        return  window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function (/* function */ callback, /* DOMElement */ element) {
                window.setTimeout(callback, 1000 / 60);
            };
    })();

    var supportWebGL = !!global.WebGLRenderingContext && (!!global.document.createElement('canvas').getContext('experimental-webgl') || !!global.document.createElement('canvas').getContext('webgl'));

    var container = global.document.querySelector('#skinpreview');

    var cw = 400, ch = 550;
    var tileUvWidth = 1 / 64;
    var tileUvHeight = 1 / 32;


    var skinBig = global.document.createElement('canvas');
    var sbc = skinBig.getContext('2d');
    var sizeRatio = 8;
    skinBig.width = 64 * sizeRatio;
    skinBig.height = 32 * sizeRatio;

    var skincanvas = global.document.createElement('canvas');
    var skinc = skincanvas.getContext('2d');
    skincanvas.width = 64;
    skincanvas.height = 32;
    var capecanvas = global.document.createElement('canvas');
    var capec = capecanvas.getContext('2d');
    capecanvas.width = 64;
    capecanvas.height = 32;

    var isRotating = true;
    var isPaused = false;
    var isYfreezed = false;
    var isFunnyRunning = false;

    var getMaterial = function (img, trans) {
        var material = new THREE.MeshBasicMaterial({
            map: new THREE.Texture(
                THREE.ImageUtils.loadTexture('images/minecraftskinpurple.png'),
                new THREE.UVMapping(),
                THREE.ClampToEdgeWrapping,
                THREE.ClampToEdgeWrapping,
                THREE.NearestFilter,
                THREE.NearestFilter,
                (trans ? THREE.RGBAFormat : THREE.RGBFormat)
            ),
            transparent: trans
        });
        material.map.needsUpdate = true;
        return material;
    };
    var uvmap = function (mesh, face, x, y, w, h, rotateBy) {
        if (!rotateBy) rotateBy = 0;
        var uvs = mesh.geometry.faceVertexUvs[0][face];
        var tileU = x;
        var tileV = y;

        /*uvs[ (0 + rotateBy) % 4 ].u = tileU * tileUvWidth;
         uvs[ (0 + rotateBy) % 4 ].v = tileV * tileUvHeight;
         uvs[ (1 + rotateBy) % 4 ].u = tileU * tileUvWidth;
         uvs[ (1 + rotateBy) % 4 ].v = tileV * tileUvHeight + h * tileUvHeight;
         uvs[ (2 + rotateBy) % 4 ].u = tileU * tileUvWidth + w * tileUvWidth;
         uvs[ (2 + rotateBy) % 4 ].v = tileV * tileUvHeight + h * tileUvHeight;
         uvs[ (3 + rotateBy) % 4 ].u = tileU * tileUvWidth + w * tileUvWidth;
         uvs[ (3 + rotateBy) % 4 ].v = tileV * tileUvHeight;*/
    };
    var cubeFromPlanes = function (size, mat) {
        var cube = new THREE.Object3D();
        var meshes = [];
        for (var i = 0; i < 6; i++) {
            var mesh = new THREE.Mesh(new THREE.PlaneGeometry(size, size), mat);
            mesh.doubleSided = true;
            cube.add(mesh);
            meshes.push(mesh);
        }
        // Front
        meshes[0].rotation.x = Math.PI / 2;
        meshes[0].rotation.z = -Math.PI / 2;
        meshes[0].position.x = size / 2;

        // Back
        meshes[1].rotation.x = Math.PI / 2;
        meshes[1].rotation.z = Math.PI / 2;
        meshes[1].position.x = -size / 2;

        // Top
        meshes[2].position.y = size / 2;

        // Bottom
        meshes[3].rotation.y = Math.PI;
        meshes[3].rotation.z = Math.PI;
        meshes[3].position.y = -size / 2;

        // Left
        meshes[4].rotation.x = Math.PI / 2;
        meshes[4].position.z = size / 2;

        // Right
        meshes[5].rotation.x = -Math.PI / 2;
        meshes[5].rotation.y = Math.PI;
        meshes[5].position.z = -size / 2;

        return cube;
    };


    var charMaterial = getMaterial(skincanvas, false);
    var charMaterialTrans = getMaterial(skincanvas, true);
    var capeMaterial = getMaterial(capecanvas, false);

    var camera = new THREE.PerspectiveCamera(35, cw / ch, 1, 1000);
    camera.position.z = 50;
    //camera.target.position.y = -2;
    var scene = new THREE.Scene();
    scene.add(camera);

    var headgroup = new THREE.Object3D();
    var upperbody = new THREE.Object3D();

    // Left leg
    var leftleggeo = new THREE.CubeGeometry(4, 12, 4);
    for (var i = 0; i < 8; i += 1) {
        leftleggeo.vertices[i].y -= 6;
    }
    var leftleg = new THREE.Mesh(leftleggeo, charMaterial);
    leftleg.position.z = -2;
    leftleg.position.y = -6;
    uvmap(leftleg, 0, 8, 20, -4, 12);
    uvmap(leftleg, 1, 16, 20, -4, 12);
    uvmap(leftleg, 2, 4, 16, 4, 4, 3);
    uvmap(leftleg, 3, 8, 20, 4, -4, 1);
    uvmap(leftleg, 4, 12, 20, -4, 12);
    uvmap(leftleg, 5, 4, 20, -4, 12);


    // Right leg
    var rightleggeo = new THREE.CubeGeometry(4, 12, 4);
    for (var i = 0; i < 8; i += 1) {
        rightleggeo.vertices[i].y -= 6;
    }
    var rightleg = new THREE.Mesh(rightleggeo, charMaterial);
    rightleg.position.z = 2;
    rightleg.position.y = -6;
    uvmap(rightleg, 0, 4, 20, 4, 12);
    uvmap(rightleg, 1, 12, 20, 4, 12);
    uvmap(rightleg, 2, 8, 16, -4, 4, 3);
    uvmap(rightleg, 3, 12, 20, -4, -4, 1);
    uvmap(rightleg, 4, 0, 20, 4, 12);
    uvmap(rightleg, 5, 8, 20, 4, 12);


    // Body
    var bodygeo = new THREE.CubeGeometry(4, 12, 8);
    var bodymesh = new THREE.Mesh(bodygeo, charMaterial);
    uvmap(bodymesh, 0, 20, 20, 8, 12);
    uvmap(bodymesh, 1, 32, 20, 8, 12);
    uvmap(bodymesh, 2, 20, 16, 8, 4, 1);
    uvmap(bodymesh, 3, 28, 16, 8, 4, 3);
    uvmap(bodymesh, 4, 16, 20, 4, 12);
    uvmap(bodymesh, 5, 28, 20, 4, 12);
    upperbody.add(bodymesh);


    // Left arm
    var leftarmgeo = new THREE.CubeGeometry(4, 12, 4);
    for (var i = 0; i < 8; i += 1) {
        leftarmgeo.vertices[i].y -= 4;
    }
    var leftarm = new THREE.Mesh(leftarmgeo, charMaterial);
    leftarm.position.z = -6;
    leftarm.position.y = 4;
    leftarm.rotation.x = Math.PI / 32;
    uvmap(leftarm, 0, 48, 20, -4, 12);
    uvmap(leftarm, 1, 56, 20, -4, 12);
    uvmap(leftarm, 2, 48, 16, -4, 4, 1);
    uvmap(leftarm, 3, 52, 16, -4, 4, 3);
    uvmap(leftarm, 4, 52, 20, -4, 12);
    uvmap(leftarm, 5, 44, 20, -4, 12);
    upperbody.add(leftarm);

    // Right arm
    var rightarmgeo = new THREE.CubeGeometry(4, 12, 4);
    for (var i = 0; i < 8; i += 1) {
        rightarmgeo.vertices[i].y -= 4;
    }
    var rightarm = new THREE.Mesh(rightarmgeo, charMaterial);
    rightarm.position.z = 6;
    rightarm.position.y = 4;
    rightarm.rotation.x = -Math.PI / 32;
    uvmap(rightarm, 0, 44, 20, 4, 12);
    uvmap(rightarm, 1, 52, 20, 4, 12);
    uvmap(rightarm, 2, 44, 16, 4, 4, 1);
    uvmap(rightarm, 3, 48, 16, 4, 4, 3);
    uvmap(rightarm, 4, 40, 20, 4, 12);
    uvmap(rightarm, 5, 48, 20, 4, 12);
    upperbody.add(rightarm);

    //Head
    var headgeo = new THREE.CubeGeometry(8, 8, 8);
    var headmesh = new THREE.Mesh(headgeo, charMaterial);
    headmesh.position.y = 2;
    uvmap(headmesh, 0, 8, 8, 8, 8);
    uvmap(headmesh, 1, 24, 8, 8, 8);

    uvmap(headmesh, 2, 8, 0, 8, 8, 1);
    uvmap(headmesh, 3, 16, 0, 8, 8, 3);

    uvmap(headmesh, 4, 0, 8, 8, 8);
    uvmap(headmesh, 5, 16, 8, 8, 8);
    headgroup.add(headmesh);

    // Helmet/hat
    /*var helmetgeo = new THREE.CubeGeometry(9, 9, 9);
     var helmetmesh = new THREE.Mesh(helmetgeo, charMaterialTrans);
     helmetmesh.doubleSided = true;
     helmetmesh.position.y = 2;
     uvmap(helmetmesh, 0, 32+8, 8, 8, 8);
     uvmap(helmetmesh, 1, 32+24, 8, 8, 8);

     uvmap(helmetmesh, 2, 32+8, 0, 8, 8, 1);
     uvmap(helmetmesh, 3, 32+16, 0, 8, 8, 3);

     uvmap(helmetmesh, 4, 32+0, 8, 8, 8);
     uvmap(helmetmesh, 5, 32+16, 8, 8, 8);*/
    //headgroup.add(helmetmesh);

    var helmet = cubeFromPlanes(9, charMaterialTrans);
    helmet.position.y = 2;
    uvmap(helmet.children[0], 0, 32 + 8, 8, 8, 8);
    uvmap(helmet.children[1], 0, 32 + 24, 8, 8, 8);
    uvmap(helmet.children[2], 0, 32 + 8, 0, 8, 8, 1);
    uvmap(helmet.children[3], 0, 32 + 16, 0, 8, 8, 3);
    uvmap(helmet.children[4], 0, 32 + 0, 8, 8, 8);
    uvmap(helmet.children[5], 0, 32 + 16, 8, 8, 8);

    headgroup.add(helmet);

    var ears = new THREE.Object3D();

    var eargeo = new THREE.CubeGeometry(1, (9 / 8) * 6, (9 / 8) * 6);
    var leftear = new THREE.Mesh(eargeo, charMaterial);
    var rightear = new THREE.Mesh(eargeo, charMaterial);

    leftear.position.y = 2 + (9 / 8) * 5;
    rightear.position.y = 2 + (9 / 8) * 5;
    leftear.position.z = -(9 / 8) * 5;
    rightear.position.z = (9 / 8) * 5;

    // Right ear share same geometry, same uv-maps

    uvmap(leftear, 0, 25, 1, 6, 6); // Front side
    uvmap(leftear, 1, 32, 1, 6, 6); // Back side

    uvmap(leftear, 2, 25, 0, 6, 1, 1); // Top edge
    uvmap(leftear, 3, 31, 0, 6, 1, 1); // Bottom edge

    uvmap(leftear, 4, 24, 1, 1, 6); // Left edge
    uvmap(leftear, 5, 31, 1, 1, 6); // Right edge

    ears.add(leftear);
    ears.add(rightear);

    leftear.visible = rightear.visible = false;

    headgroup.add(ears);
    headgroup.position.y = 8;

    var capeOrigo = new THREE.Object3D();
    var capegeo = new THREE.CubeGeometry(1, 16, 10);
    var capemesh = new THREE.Mesh(capegeo, capeMaterial);
    capemesh.position.y = -8;
    capemesh.visible = false;

    uvmap(capemesh, 0, 1, 1, 10, 16); // Front side
    uvmap(capemesh, 1, 12, 1, 10, 16); // Back side

    uvmap(capemesh, 2, 1, 0, 10, 1); // Top edge
    uvmap(capemesh, 3, 11, 0, 10, 1, 1); // Bottom edge

    uvmap(capemesh, 4, 0, 1, 1, 16); // Left edge
    uvmap(capemesh, 5, 11, 1, 1, 16); // Right edge


    capeOrigo.rotation.y = Math.PI;

    capeOrigo.position.x = -2;
    capeOrigo.position.y = 6;

    capeOrigo.add(capemesh);


    var playerModel = new THREE.Object3D();

    playerModel.add(leftleg);
    playerModel.add(rightleg);

    playerModel.add(upperbody);
    playerModel.add(headgroup);

    playerModel.add(capeOrigo);

    playerModel.position.y = 6;


    var playerGroup = new THREE.Object3D();

    playerGroup.add(playerModel);


    scene.add(playerGroup);


    var mouseX = 0;
    var mouseY = 0.1;
    var originMouseX = 0;
    var originMouseY = 0;

    var rad = 0;

    var isMouseOver = false;
    var isMouseDown = false;

    var counter = 0;
    var firstRender = true;

    var startTime = Date.now();
    var pausedTime = 0;

    var render = function () {
        requestAnimFrame(render, renderer.domElement);
        var oldRad = rad;

        var time = (Date.now() - startTime) / 1000;

        if (!isMouseDown) {
            //mouseX*=0.95;
            if (!isYfreezed) {
                mouseY *= 0.97;
            }
            if (isRotating) {
                rad += 2;
            }
        }
        else {
            rad = mouseX;
        }
        if (mouseY > 500) {
            mouseY = 500;
        }
        else if (mouseY < -500) {
            mouseY = -500;
        }
        camera.position.x = -Math.cos(rad / (cw / 2) + (Math.PI / 0.9));
        camera.position.z = -Math.sin(rad / (cw / 2) + (Math.PI / 0.9));
        camera.position.y = (mouseY / (ch / 2)) * 1.5 + 0.2;
        camera.position.setLength(70);
        camera.lookAt(new THREE.Vector3(0, 1.5, 0));


        if (!isPaused) {
            counter += 0.01;
            headgroup.rotation.y = Math.sin(time * 1.5) / 5;
            headgroup.rotation.z = Math.sin(time) / 6;

            if (isFunnyRunning) {

                rightarm.rotation.z = 2 * Math.cos(0.6662 * time * 10 + Math.PI);
                rightarm.rotation.x = 1 * (Math.cos(0.2812 * time * 10) - 1);
                leftarm.rotation.z = 2 * Math.cos(0.6662 * time * 10);
                leftarm.rotation.x = 1 * (Math.cos(0.2312 * time * 10) + 1);

                rightleg.rotation.z = 1.4 * Math.cos(0.6662 * time * 10);
                leftleg.rotation.z = 1.4 * Math.cos(0.6662 * time * 10 + Math.PI);

                playerGroup.position.y = -6 + 1 * Math.cos(0.6662 * time * 10 * 2); // Jumping
                playerGroup.position.z = 0.15 * Math.cos(0.6662 * time * 10); // Dodging when running
                playerGroup.rotation.x = 0.01 * Math.cos(0.6662 * time * 10 + Math.PI); // Slightly tilting when running

                capeOrigo.rotation.z = 0.1 * Math.sin(0.6662 * time * 10 * 2) + Math.PI / 2.5;

            }
            else {
                leftarm.rotation.z = -Math.sin(time * 3) / 2;
                leftarm.rotation.x = (Math.cos(time * 3) + Math.PI / 2) / 30;
                rightarm.rotation.z = Math.sin(time * 3) / 2;
                rightarm.rotation.x = -(Math.cos(time * 3) + Math.PI / 2) / 30;

                leftleg.rotation.z = Math.sin(time * 3) / 3;
                rightleg.rotation.z = -Math.sin(time * 3) / 3;
                capeOrigo.rotation.z = Math.sin(time * 2) / 15 + Math.PI / 15;

                playerGroup.position.y = -6; // Not jumping
            }

        }

        renderer.render(scene, camera);
    };
    if (supportWebGL) {
        var renderer = new THREE.WebGLRenderer({antialias: true});
    }
    else {
        renderer = new THREE.CanvasRenderer({antialias: true});
    }
    var threecanvas = renderer.domElement;
    renderer.setSize(cw, ch);
    //renderer.setClearColorHex(0x000000, 0.25);
    container.appendChild(threecanvas);

    var onMouseMove = function (e) {
        if (isMouseDown) {
            mouseX = (e.pageX - threecanvas.offsetLeft - originMouseX);
            mouseY = (e.pageY - threecanvas.offsetTop - originMouseY);
        }
    };

    threecanvas.addEventListener('mousedown', function (e) {
        e.preventDefault();
        originMouseX = (e.pageX - threecanvas.offsetLeft) - rad;
        originMouseY = (e.pageY - threecanvas.offsetTop) - mouseY;
        isMouseDown = true;
        isMouseOver = true;
        onMouseMove(e);
    }, false);
    global.addEventListener('mouseup', function (e) {
        isMouseDown = false;
    }, false);
    global.addEventListener('mousemove', onMouseMove, false);
    threecanvas.addEventListener('mouseout', function (e) {
        isMouseOver = false;
    }, false);


    container.appendChild(global.document.createElement('br'));

    var spinBox = global.document.createElement('input');
    spinBox.type = 'checkbox';
    spinBox.checked = false;
    spinBox.id = 'msp_spinbox';
    var spinBoxLabel = global.document.createElement('label');
    spinBoxLabel.textContent = "Freeze rotating";
    spinBoxLabel.setAttribute('for', spinBox.id);
    container.appendChild(spinBox);
    container.appendChild(spinBoxLabel);

    spinBox.addEventListener('change', function () {
        isRotating = !spinBox.checked;
    }, false);

    container.appendChild(global.document.createElement('br'));

    var moveBox = global.document.createElement('input');
    moveBox.type = 'checkbox';
    moveBox.checked = false;
    moveBox.id = 'msp_movebox';
    var moveBoxLabel = global.document.createElement('label');
    moveBoxLabel.textContent = "Freeze movements";
    moveBoxLabel.setAttribute('for', moveBox.id);
    container.appendChild(moveBox);
    container.appendChild(moveBoxLabel);

    moveBox.addEventListener('change', function () {

        isPaused = moveBox.checked;

        // \o/
        if (isPaused) {
            pausedTime = Date.now() - startTime;
        }
        else {
            startTime = Date.now() - pausedTime;
        }
    }, false);

    container.appendChild(global.document.createElement('br'));

    var yFreezeBox = global.document.createElement('input');
    yFreezeBox.type = 'checkbox';
    yFreezeBox.checked = false;
    yFreezeBox.id = 'msp_yfreezebox';
    var yFreezeBoxLabel = global.document.createElement('label');
    yFreezeBoxLabel.textContent = "Freeze camera";
    yFreezeBoxLabel.setAttribute('for', yFreezeBox.id);
    container.appendChild(yFreezeBox);
    container.appendChild(yFreezeBoxLabel);

    yFreezeBox.addEventListener('change', function () {
        isYfreezed = yFreezeBox.checked;
    }, false);

    container.appendChild(global.document.createElement('br'));

    var capeBox = global.document.createElement('input');
    capeBox.type = 'checkbox';
    capeBox.checked = true;
    capeBox.id = 'msp_capebox';
    var capeBoxLabel = global.document.createElement('label');
    capeBoxLabel.textContent = "Show capes";
    capeBoxLabel.setAttribute('for', capeBox.id);
    container.appendChild(capeBox);
    container.appendChild(capeBoxLabel);

    capeBox.addEventListener('change', function () {
        if (capeBox.checked) {
            capeOrigo.add(capemesh);
        }
        else {
            capeOrigo.remove(capemesh);
        }
    }, false);

    container.appendChild(global.document.createElement('br'));

    var runBox = global.document.createElement('input');
    runBox.type = 'checkbox';
    runBox.checked = false;
    runBox.id = 'msp_runbox';
    var runBoxLabel = global.document.createElement('label');
    runBoxLabel.textContent = "Classic running";
    runBoxLabel.setAttribute('for', runBox.id);
    container.appendChild(runBox);
    container.appendChild(runBoxLabel);

    runBox.addEventListener('change', function () {
        isFunnyRunning = runBox.checked;
    }, false);

    container.appendChild(global.document.createElement('br'));

    container.appendChild(skinBig);

    render();

    var skin = new Image();

    skin.onload = function () {

        skinc.clearRect(0, 0, 64, 32);

        skinc.drawImage(skin, 0, 0);

        var imgdata = skinc.getImageData(0, 0, 64, 32);
        var pixels = imgdata.data;


        sbc.clearRect(0, 0, skinBig.width, skinBig.height);
        sbc.save();

        var isOnecolor = true;

        var colorCheckAgainst = [40, 0];
        var colorIndex = (colorCheckAgainst[0] + colorCheckAgainst[1] * 64) * 4;

        var isPixelDifferent = function (x, y) {
            if (pixels[(x + y * 64) * 4 + 0] !== pixels[colorIndex + 0] || pixels[(x + y * 64) * 4 + 1] !== pixels[colorIndex + 1] || pixels[(x + y * 64) * 4 + 2] !== pixels[colorIndex + 2] || pixels[(x + y * 64) * 4 + 3] !== pixels[colorIndex + 3]) {
                return true;
            }
            return false;
        };

        // Check if helmet/hat is a solid color
        // Bottom row
        for (var i = 32; i < 64; i += 1) {
            for (var j = 8; j < 16; j += 1) {
                if (isPixelDifferent(i, j)) {
                    isOnecolor = false;
                    break;
                }
            }
            if (!isOnecolor) {
                break;
            }
        }
        if (!isOnecolor) {
            // Top row
            for (var i = 40; i < 56; i += 1) {
                for (var j = 0; j < 8; j += 1) {
                    if (isPixelDifferent(i, j)) {
                        isOnecolor = false;
                        break;
                    }
                }
                if (!isOnecolor) {
                    break;
                }

            }
        }

        for (var i = 0; i < 64; i += 1) {
            for (var j = 0; j < 32; j += 1) {

                if (isOnecolor && ((i >= 32 && i < 64 && j >= 8 && j < 16) || (i >= 40 && i < 56 && j >= 0 && j < 8))) {
                    pixels[(i + j * 64) * 4 + 3] = 0;
                }
                sbc.fillStyle = 'rgba(' + pixels[(i + j * 64) * 4 + 0] + ', ' + pixels[(i + j * 64) * 4 + 1] + ', ' + pixels[(i + j * 64) * 4 + 2] + ', ' + pixels[(i + j * 64) * 4 + 3] / 255 + ')';
                sbc.fillRect(i * sizeRatio, j * sizeRatio, sizeRatio, sizeRatio);
            }
        }
        sbc.restore();

        skinc.putImageData(imgdata, 0, 0);

        charMaterial.map.needsUpdate = true;
        charMaterialTrans.map.needsUpdate = true;
    };

    var cape = new Image();

    cape.onload = function () {

        capec.clearRect(0, 0, 64, 32);

        capec.drawImage(cape, 0, 0);

        capeMaterial.map.needsUpdate = true;
        capemesh.visible = true;
    };
    cape.onerror = function () {
        capemesh.visible = false;
    };

    var defaultImages = [
        'simon.png',
        'char.png',
        'link.png',
        'DefMenge.png',
        'cod.png'
    ];

    skin.src = defaultImages[Math.floor(Math.random() * defaultImages.length)];

    var handleFiles = function (files) {
        if (files.length > 0) {
            var file = files[0];
            if (file.type === 'image/png') {
                var fr = new FileReader();
                fr.onload = function (e) {
                    var img = new Image();
                    img.onload = function () {
                        if (this.width === 64 && this.height === 32) {
                            skin.src = img.src;
                        }
                        else {
                            alert("Error: The image must be 64x32 pixels!");
                        }
                    };
                    img.onerror = function () {
                        alert("Error: Not an image or unknown file format");
                    };
                    img.src = this.result;
                };
                fr.readAsDataURL(file);
            }
            else {
                alert("Error: This is not a PNG image!");
            }
        }
    };

    threecanvas.addEventListener('dragenter', function (e) {
        e.stopPropagation();
        e.preventDefault();
        threecanvas.className = "dragenter";
    }, false);
    threecanvas.addEventListener('dragleave', function (e) {
        e.stopPropagation();
        e.preventDefault();
        threecanvas.className = "";
    }, false);
    threecanvas.addEventListener('dragover', function (e) {
        e.stopPropagation();
        e.preventDefault();
    }, false);
    threecanvas.addEventListener('drop', function (e) {
        e.stopPropagation();
        e.preventDefault();
        threecanvas.className = "";

        var dt = e.dataTransfer;
        var files = dt.files;
        handleFiles(files);
    }, false);

    global.document.forms.imageform.fileinput.addEventListener('change', function () {
        var files = this.files;
        handleFiles(files);
    }, false);

    return {
        changeSkin: function (url) {
            skin.src = url;
        },
        changeCape: function (url) {
            cape.src = url;
        },
        setEars: function (val) {
            leftear.visible = rightear.visible = val;
        }
    };
}(this));