skinview3d - npm Package Compare versions

Comparing version 1.1.0-alpha.3 to 1.1.0-alpha.4

build/skinview3d.js

@@ -94,3 +94,3 @@ /**
 
-	function addVertices(box, top, bottom, left, front, right, back) {
+	function setVertices(box, top, bottom, left, front, right, back) {
 		box.faceVertexUvs[0] = [];
@@ -116,3 +116,3 @@ box.faceVertexUvs[0][0] = [right[3], right[0], right[2]];
 
-		function SkinObject(slim, layer1Material, layer2Material) {
+		function SkinObject(layer1Material, layer2Material) {
 			classCallCheck(this, SkinObject);
@@ -122,3 +122,3 @@
 
-			_this.slim = slim;
+			_this.modelListeners = []; // called when model(slim property) is changed
 
@@ -129,3 +129,3 @@ // Head
 			var headBox = new THREE.BoxGeometry(8, 8, 8, 0, 0, 0);
-			addVertices(headBox, toSkinVertices(8, 0, 16, 8), toSkinVertices(16, 0, 24, 8), toSkinVertices(0, 8, 8, 16), toSkinVertices(8, 8, 16, 16), toSkinVertices(16, 8, 24, 16), toSkinVertices(24, 8, 32, 16));
+			setVertices(headBox, toSkinVertices(8, 0, 16, 8), toSkinVertices(16, 0, 24, 8), toSkinVertices(0, 8, 8, 16), toSkinVertices(8, 8, 16, 16), toSkinVertices(16, 8, 24, 16), toSkinVertices(24, 8, 32, 16));
 			var headMesh = new THREE.Mesh(headBox, layer1Material);
@@ -135,3 +135,3 @@ _this.head.add(headMesh);
 			var head2Box = new THREE.BoxGeometry(9, 9, 9, 0, 0, 0);
-			addVertices(head2Box, toSkinVertices(40, 0, 48, 8), toSkinVertices(48, 0, 56, 8), toSkinVertices(32, 8, 40, 16), toSkinVertices(40, 8, 48, 16), toSkinVertices(48, 8, 56, 16), toSkinVertices(56, 8, 64, 16));
+			setVertices(head2Box, toSkinVertices(40, 0, 48, 8), toSkinVertices(48, 0, 56, 8), toSkinVertices(32, 8, 40, 16), toSkinVertices(40, 8, 48, 16), toSkinVertices(48, 8, 56, 16), toSkinVertices(56, 8, 64, 16));
 			var head2Mesh = new THREE.Mesh(head2Box, layer2Material);
@@ -147,3 +147,3 @@ head2Mesh.renderOrder = -1;
 			var bodyBox = new THREE.BoxGeometry(8, 12, 4, 0, 0, 0);
-			addVertices(bodyBox, toSkinVertices(20, 16, 28, 20), toSkinVertices(28, 16, 36, 20), toSkinVertices(16, 20, 20, 32), toSkinVertices(20, 20, 28, 32), toSkinVertices(28, 20, 32, 32), toSkinVertices(32, 20, 40, 32));
+			setVertices(bodyBox, toSkinVertices(20, 16, 28, 20), toSkinVertices(28, 16, 36, 20), toSkinVertices(16, 20, 20, 32), toSkinVertices(20, 20, 28, 32), toSkinVertices(28, 20, 32, 32), toSkinVertices(32, 20, 40, 32));
 			var bodyMesh = new THREE.Mesh(bodyBox, layer1Material);
@@ -153,3 +153,3 @@ _this.body.add(bodyMesh);
 			var body2Box = new THREE.BoxGeometry(9, 13.5, 4.5, 0, 0, 0);
-			addVertices(body2Box, toSkinVertices(20, 32, 28, 36), toSkinVertices(28, 32, 36, 36), toSkinVertices(16, 36, 20, 48), toSkinVertices(20, 36, 28, 48), toSkinVertices(28, 36, 32, 48), toSkinVertices(32, 36, 40, 48));
+			setVertices(body2Box, toSkinVertices(20, 32, 28, 36), toSkinVertices(28, 32, 36, 36), toSkinVertices(16, 36, 20, 48), toSkinVertices(20, 36, 28, 48), toSkinVertices(28, 36, 32, 48), toSkinVertices(32, 36, 40, 48));
 			var body2Mesh = new THREE.Mesh(body2Box, layer2Material);
@@ -165,20 +165,34 @@ _this.body.add(body2Mesh);
 
-			var rightArmBox = new THREE.BoxGeometry((slim ? 3 : 4) - esp, 12 - esp, 4 - esp, 0, 0, 0);
-			if (slim) {
-				addVertices(rightArmBox, toSkinVertices(44, 16, 47, 20), toSkinVertices(47, 16, 50, 20), toSkinVertices(40, 20, 44, 32), toSkinVertices(44, 20, 47, 32), toSkinVertices(47, 20, 51, 32), toSkinVertices(51, 20, 54, 32));
-			} else {
-				addVertices(rightArmBox, toSkinVertices(44, 16, 48, 20), toSkinVertices(48, 16, 52, 20), toSkinVertices(40, 20, 44, 32), toSkinVertices(44, 20, 48, 32), toSkinVertices(48, 20, 52, 32), toSkinVertices(52, 20, 56, 32));
-			}
+			var rightArmBox = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
 			var rightArmMesh = new THREE.Mesh(rightArmBox, layer1Material);
 			rightArmPivot.add(rightArmMesh);
+			_this.modelListeners.push(function () {
+				rightArmMesh.scale.x = (_this.slim ? 3 : 4) - esp;
+				rightArmMesh.scale.y = 12 - esp;
+				rightArmMesh.scale.z = 4 - esp;
+				if (_this.slim) {
+					setVertices(rightArmBox, toSkinVertices(44, 16, 47, 20), toSkinVertices(47, 16, 50, 20), toSkinVertices(40, 20, 44, 32), toSkinVertices(44, 20, 47, 32), toSkinVertices(47, 20, 51, 32), toSkinVertices(51, 20, 54, 32));
+				} else {
+					setVertices(rightArmBox, toSkinVertices(44, 16, 48, 20), toSkinVertices(48, 16, 52, 20), toSkinVertices(40, 20, 44, 32), toSkinVertices(44, 20, 48, 32), toSkinVertices(48, 20, 52, 32), toSkinVertices(52, 20, 56, 32));
+				}
+				rightArmBox.uvsNeedUpdate = true;
+				rightArmBox.elementsNeedUpdate = true;
+			});
 
-			var rightArm2Box = new THREE.BoxGeometry((slim ? 3.375 : 4.5) - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0);
-			if (slim) {
-				addVertices(rightArm2Box, toSkinVertices(44, 32, 47, 36), toSkinVertices(47, 32, 50, 36), toSkinVertices(40, 36, 44, 48), toSkinVertices(44, 36, 47, 48), toSkinVertices(47, 36, 51, 48), toSkinVertices(51, 36, 54, 48));
-			} else {
-				addVertices(rightArm2Box, toSkinVertices(44, 32, 48, 36), toSkinVertices(48, 32, 52, 36), toSkinVertices(40, 36, 44, 48), toSkinVertices(44, 36, 48, 48), toSkinVertices(48, 36, 52, 48), toSkinVertices(52, 36, 56, 48));
-			}
+			var rightArm2Box = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
 			var rightArm2Mesh = new THREE.Mesh(rightArm2Box, layer2Material);
 			rightArm2Mesh.renderOrder = 1;
 			rightArmPivot.add(rightArm2Mesh);
+			_this.modelListeners.push(function () {
+				rightArm2Mesh.scale.x = (_this.slim ? 3.375 : 4.5) - esp;
+				rightArm2Mesh.scale.y = 13.5 - esp;
+				rightArm2Mesh.scale.z = 4.5 - esp;
+				if (_this.slim) {
+					setVertices(rightArm2Box, toSkinVertices(44, 32, 47, 36), toSkinVertices(47, 32, 50, 36), toSkinVertices(40, 36, 44, 48), toSkinVertices(44, 36, 47, 48), toSkinVertices(47, 36, 51, 48), toSkinVertices(51, 36, 54, 48));
+				} else {
+					setVertices(rightArm2Box, toSkinVertices(44, 32, 48, 36), toSkinVertices(48, 32, 52, 36), toSkinVertices(40, 36, 44, 48), toSkinVertices(44, 36, 48, 48), toSkinVertices(48, 36, 52, 48), toSkinVertices(52, 36, 56, 48));
+				}
+				rightArm2Box.uvsNeedUpdate = true;
+				rightArm2Box.elementsNeedUpdate = true;
+			});
 
@@ -188,3 +202,5 @@ rightArmPivot.position.y = -6;
 			_this.rightArm.position.y = -4;
-			_this.rightArm.position.x = slim ? -5.5 : -6;
+			_this.modelListeners.push(function () {
+				_this.rightArm.position.x = _this.slim ? -5.5 : -6;
+			});
 			_this.add(_this.rightArm);
@@ -196,20 +212,34 @@
 
-			var leftArmBox = new THREE.BoxGeometry((slim ? 3 : 4) - esp, 12 - esp, 4 - esp, 0, 0, 0);
-			if (slim) {
-				addVertices(leftArmBox, toSkinVertices(36, 48, 39, 52), toSkinVertices(39, 48, 42, 52), toSkinVertices(32, 52, 36, 64), toSkinVertices(36, 52, 39, 64), toSkinVertices(39, 52, 43, 64), toSkinVertices(43, 52, 46, 64));
-			} else {
-				addVertices(leftArmBox, toSkinVertices(36, 48, 40, 52), toSkinVertices(40, 48, 44, 52), toSkinVertices(32, 52, 36, 64), toSkinVertices(36, 52, 40, 64), toSkinVertices(40, 52, 44, 64), toSkinVertices(44, 52, 48, 64));
-			}
+			var leftArmBox = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
 			var leftArmMesh = new THREE.Mesh(leftArmBox, layer1Material);
 			leftArmPivot.add(leftArmMesh);
+			_this.modelListeners.push(function () {
+				leftArmMesh.scale.x = (_this.slim ? 3 : 4) - esp;
+				leftArmMesh.scale.y = 12 - esp;
+				leftArmMesh.scale.z = 4 - esp;
+				if (_this.slim) {
+					setVertices(leftArmBox, toSkinVertices(36, 48, 39, 52), toSkinVertices(39, 48, 42, 52), toSkinVertices(32, 52, 36, 64), toSkinVertices(36, 52, 39, 64), toSkinVertices(39, 52, 43, 64), toSkinVertices(43, 52, 46, 64));
+				} else {
+					setVertices(leftArmBox, toSkinVertices(36, 48, 40, 52), toSkinVertices(40, 48, 44, 52), toSkinVertices(32, 52, 36, 64), toSkinVertices(36, 52, 40, 64), toSkinVertices(40, 52, 44, 64), toSkinVertices(44, 52, 48, 64));
+				}
+				leftArmBox.uvsNeedUpdate = true;
+				leftArmBox.elementsNeedUpdate = true;
+			});
 
-			var leftArm2Box = new THREE.BoxGeometry((slim ? 3.375 : 4.5) - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0);
-			if (slim) {
-				addVertices(leftArm2Box, toSkinVertices(52, 48, 55, 52), toSkinVertices(55, 48, 58, 52), toSkinVertices(48, 52, 52, 64), toSkinVertices(52, 52, 55, 64), toSkinVertices(55, 52, 59, 64), toSkinVertices(59, 52, 62, 64));
-			} else {
-				addVertices(leftArm2Box, toSkinVertices(52, 48, 56, 52), toSkinVertices(56, 48, 60, 52), toSkinVertices(48, 52, 52, 64), toSkinVertices(52, 52, 56, 64), toSkinVertices(56, 52, 60, 64), toSkinVertices(60, 52, 64, 64));
-			}
+			var leftArm2Box = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
 			var leftArm2Mesh = new THREE.Mesh(leftArm2Box, layer2Material);
 			leftArm2Mesh.renderOrder = 1;
 			leftArmPivot.add(leftArm2Mesh);
+			_this.modelListeners.push(function () {
+				leftArm2Mesh.scale.x = (_this.slim ? 3.375 : 4.5) - esp;
+				leftArm2Mesh.scale.y = 13.5 - esp;
+				leftArm2Mesh.scale.z = 4.5 - esp;
+				if (_this.slim) {
+					setVertices(leftArm2Box, toSkinVertices(52, 48, 55, 52), toSkinVertices(55, 48, 58, 52), toSkinVertices(48, 52, 52, 64), toSkinVertices(52, 52, 55, 64), toSkinVertices(55, 52, 59, 64), toSkinVertices(59, 52, 62, 64));
+				} else {
+					setVertices(leftArm2Box, toSkinVertices(52, 48, 56, 52), toSkinVertices(56, 48, 60, 52), toSkinVertices(48, 52, 52, 64), toSkinVertices(52, 52, 56, 64), toSkinVertices(56, 52, 60, 64), toSkinVertices(60, 52, 64, 64));
+				}
+				leftArm2Box.uvsNeedUpdate = true;
+				leftArm2Box.elementsNeedUpdate = true;
+			});
 
@@ -219,3 +249,5 @@ leftArmPivot.position.y = -6;
 			_this.leftArm.position.y = -4;
-			_this.leftArm.position.x = slim ? 5.5 : 6;
+			_this.modelListeners.push(function () {
+				_this.leftArm.position.x = _this.slim ? 5.5 : 6;
+			});
 			_this.add(_this.leftArm);
@@ -228,3 +260,3 @@
 			var rightLegBox = new THREE.BoxGeometry(4 - esp, 12 - esp, 4 - esp, 0, 0, 0);
-			addVertices(rightLegBox, toSkinVertices(4, 16, 8, 20), toSkinVertices(8, 16, 12, 20), toSkinVertices(0, 20, 4, 32), toSkinVertices(4, 20, 8, 32), toSkinVertices(8, 20, 12, 32), toSkinVertices(12, 20, 16, 32));
+			setVertices(rightLegBox, toSkinVertices(4, 16, 8, 20), toSkinVertices(8, 16, 12, 20), toSkinVertices(0, 20, 4, 32), toSkinVertices(4, 20, 8, 32), toSkinVertices(8, 20, 12, 32), toSkinVertices(12, 20, 16, 32));
 			var rightLegMesh = new THREE.Mesh(rightLegBox, layer1Material);
@@ -234,3 +266,3 @@ rightLegPivot.add(rightLegMesh);
 			var rightLeg2Box = new THREE.BoxGeometry(4.5 - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0);
-			addVertices(rightLeg2Box, toSkinVertices(4, 32, 8, 36), toSkinVertices(8, 32, 12, 36), toSkinVertices(0, 36, 4, 48), toSkinVertices(4, 36, 8, 48), toSkinVertices(8, 36, 12, 48), toSkinVertices(12, 36, 16, 48));
+			setVertices(rightLeg2Box, toSkinVertices(4, 32, 8, 36), toSkinVertices(8, 32, 12, 36), toSkinVertices(0, 36, 4, 48), toSkinVertices(4, 36, 8, 48), toSkinVertices(8, 36, 12, 48), toSkinVertices(12, 36, 16, 48));
 			var rightLeg2Mesh = new THREE.Mesh(rightLeg2Box, layer2Material);
@@ -251,3 +283,3 @@ rightLeg2Mesh.renderOrder = 1;
 			var leftLegBox = new THREE.BoxGeometry(4 - esp, 12 - esp, 4 - esp, 0, 0, 0);
-			addVertices(leftLegBox, toSkinVertices(20, 48, 24, 52), toSkinVertices(24, 48, 28, 52), toSkinVertices(16, 52, 20, 64), toSkinVertices(20, 52, 24, 64), toSkinVertices(24, 52, 28, 64), toSkinVertices(28, 52, 32, 64));
+			setVertices(leftLegBox, toSkinVertices(20, 48, 24, 52), toSkinVertices(24, 48, 28, 52), toSkinVertices(16, 52, 20, 64), toSkinVertices(20, 52, 24, 64), toSkinVertices(24, 52, 28, 64), toSkinVertices(28, 52, 32, 64));
 			var leftLegMesh = new THREE.Mesh(leftLegBox, layer1Material);
@@ -257,3 +289,3 @@ leftLegPivot.add(leftLegMesh);
 			var leftLeg2Box = new THREE.BoxGeometry(4.5 - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0);
-			addVertices(leftLeg2Box, toSkinVertices(4, 48, 8, 52), toSkinVertices(8, 48, 12, 52), toSkinVertices(0, 52, 4, 64), toSkinVertices(4, 52, 8, 64), toSkinVertices(8, 52, 12, 64), toSkinVertices(12, 52, 16, 64));
+			setVertices(leftLeg2Box, toSkinVertices(4, 48, 8, 52), toSkinVertices(8, 48, 12, 52), toSkinVertices(0, 52, 4, 64), toSkinVertices(4, 52, 8, 64), toSkinVertices(8, 52, 12, 64), toSkinVertices(12, 52, 16, 64));
 			var leftLeg2Mesh = new THREE.Mesh(leftLeg2Box, layer2Material);
@@ -268,5 +300,21 @@ leftLeg2Mesh.renderOrder = 1;
 			_this.add(_this.leftLeg);
+
+			_this.slim = false;
 			return _this;
 		}
 
+		createClass(SkinObject, [{
+			key: "slim",
+			get: function get$$1() {
+				return this._slim;
+			},
+			set: function set$$1(value) {
+				if (this._slim !== value) {
+					this._slim = value;
+					this.modelListeners.forEach(function (listener) {
+						return listener();
+					});
+				}
+			}
+		}]);
 		return SkinObject;
@@ -286,3 +334,3 @@ }(THREE.Group);
 			var capeBox = new THREE.BoxGeometry(10, 16, 1, 0, 0, 0);
-			addVertices(capeBox, toCapeVertices(1, 0, 11, 1), toCapeVertices(11, 0, 21, 1), toCapeVertices(11, 1, 12, 17), toCapeVertices(12, 1, 22, 17), toCapeVertices(0, 1, 1, 17), toCapeVertices(1, 1, 11, 17));
+			setVertices(capeBox, toCapeVertices(1, 0, 11, 1), toCapeVertices(11, 0, 21, 1), toCapeVertices(11, 1, 12, 17), toCapeVertices(12, 1, 22, 17), toCapeVertices(0, 1, 1, 17), toCapeVertices(1, 1, 11, 17));
 			_this2.cape = new THREE.Mesh(capeBox, capeMaterial);
@@ -301,3 +349,3 @@ _this2.cape.position.y = -8;
 
-		function PlayerObject(slim, layer1Material, layer2Material, capeMaterial) {
+		function PlayerObject(layer1Material, layer2Material, capeMaterial) {
 			classCallCheck(this, PlayerObject);
@@ -307,3 +355,3 @@
 
-			_this3.skin = new SkinObject(slim, layer1Material, layer2Material);
+			_this3.skin = new SkinObject(layer1Material, layer2Material);
 			_this3.skin.visible = false;
@@ -500,22 +548,168 @@ _this3.add(_this3.skin);
 
+	function hasTransparency(context, x0, y0, w, h) {
+		var imgData = context.getImageData(x0, y0, w, h);
+		for (var x = 0; x < w; x++) {
+			for (var y = 0; y < h; y++) {
+				var offset = (x + y * w) * 4;
+				if (imgData.data[offset + 3] !== 0xff) {
+					return true;
+				}
+			}
+		}
+		return false;
+	}
+
+	function computeSkinScale(width) {
+		return width / 64.0;
+	}
+
+	function fixOpaqueSkin(context, width) {
+		// Some ancient skins don't have transparent pixels (nor have helm).
+		// We have to make the helm area transparent, otherwise it will be rendered as black.
+		if (!hasTransparency(context, 0, 0, width, width / 2)) {
+			var scale = computeSkinScale(width);
+			var clearArea = function clearArea(x, y, w, h) {
+				return context.clearRect(x * scale, y * scale, w * scale, h * scale);
+			};
+			clearArea(40, 0, 8, 8); // Helm Top
+			clearArea(48, 0, 8, 8); // Helm Bottom
+			clearArea(32, 8, 8, 8); // Helm Right
+			clearArea(40, 8, 8, 8); // Helm Front
+			clearArea(48, 8, 8, 8); // Helm Left
+			clearArea(56, 8, 8, 8); // Helm Back
+		}
+	}
+
 	function convertSkinTo1_8(context, width) {
-		var scale = width / 64.0;
-		var copySkin = function copySkin(context, sX, sY, w, h, dX, dY, flipHorizontal) {
+		var scale = computeSkinScale(width);
+		var copySkin = function copySkin(sX, sY, w, h, dX, dY, flipHorizontal) {
 			return copyImage(context, sX * scale, sY * scale, w * scale, h * scale, dX * scale, dY * scale, flipHorizontal);
 		};
 
-		copySkin(context, 4, 16, 4, 4, 20, 48, true); // Top Leg
-		copySkin(context, 8, 16, 4, 4, 24, 48, true); // Bottom Leg
-		copySkin(context, 0, 20, 4, 12, 24, 52, true); // Outer Leg
-		copySkin(context, 4, 20, 4, 12, 20, 52, true); // Front Leg
-		copySkin(context, 8, 20, 4, 12, 16, 52, true); // Inner Leg
-		copySkin(context, 12, 20, 4, 12, 28, 52, true); // Back Leg
-		copySkin(context, 44, 16, 4, 4, 36, 48, true); // Top Arm
-		copySkin(context, 48, 16, 4, 4, 40, 48, true); // Bottom Arm
-		copySkin(context, 40, 20, 4, 12, 40, 52, true); // Outer Arm
-		copySkin(context, 44, 20, 4, 12, 36, 52, true); // Front Arm
-		copySkin(context, 48, 20, 4, 12, 32, 52, true); // Inner Arm
-		copySkin(context, 52, 20, 4, 12, 44, 52, true); // Back Arm
+		fixOpaqueSkin(context, width);
+
+		copySkin(4, 16, 4, 4, 20, 48, true); // Top Leg
+		copySkin(8, 16, 4, 4, 24, 48, true); // Bottom Leg
+		copySkin(0, 20, 4, 12, 24, 52, true); // Outer Leg
+		copySkin(4, 20, 4, 12, 20, 52, true); // Front Leg
+		copySkin(8, 20, 4, 12, 16, 52, true); // Inner Leg
+		copySkin(12, 20, 4, 12, 28, 52, true); // Back Leg
+		copySkin(44, 16, 4, 4, 36, 48, true); // Top Arm
+		copySkin(48, 16, 4, 4, 40, 48, true); // Bottom Arm
+		copySkin(40, 20, 4, 12, 40, 52, true); // Outer Arm
+		copySkin(44, 20, 4, 12, 36, 52, true); // Front Arm
+		copySkin(48, 20, 4, 12, 32, 52, true); // Inner Arm
+		copySkin(52, 20, 4, 12, 44, 52, true); // Back Arm
 	}
 
+	function loadSkinToCanvas(canvas, image) {
+		var isOldFormat = false;
+		if (image.width !== image.height) {
+			if (image.width === 2 * image.height) {
+				isOldFormat = true;
+			} else {
+				throw "Bad skin size: " + image.width + "x" + image.height;
+			}
+		}
+
+		var context = canvas.getContext("2d");
+		if (isOldFormat) {
+			var sideLength = image.width;
+			canvas.width = sideLength;
+			canvas.height = sideLength;
+			context.clearRect(0, 0, sideLength, sideLength);
+			context.drawImage(image, 0, 0, sideLength, sideLength / 2.0);
+			convertSkinTo1_8(context, sideLength);
+		} else {
+			canvas.width = image.width;
+			canvas.height = image.height;
+			context.clearRect(0, 0, image.width, image.height);
+			context.drawImage(image, 0, 0, canvas.width, canvas.height);
+		}
+	}
+
+	function loadCapeToCanvas(canvas, image) {
+		var isOldFormat = false;
+		if (image.width !== 2 * image.height) {
+			if (image.width * 17 == image.height * 22) {
+				// width/height = 22/17
+				isOldFormat = true;
+			} else {
+				throw "Bad cape size: " + image.width + "x" + image.height;
+			}
+		}
+
+		var context = canvas.getContext("2d");
+		if (isOldFormat) {
+			var width = image.width * 64 / 22;
+			canvas.width = width;
+			canvas.height = width / 2;
+		} else {
+			canvas.width = image.width;
+			canvas.height = image.height;
+		}
+		context.clearRect(0, 0, canvas.width, canvas.height);
+		context.drawImage(image, 0, 0, image.width, image.height);
+	}
+
+	function isSlimSkin(canvasOrImage) {
+		// Detects whether the skin is default or slim.
+		//
+		// The right arm area of *default* skins:
+		// (44,16)->*-------*-------*
+		// (40,20)  |top    |bottom |
+		// \|/      |4x4    |4x4    |
+		//  *-------*-------*-------*-------*
+		//  |right  |front  |left   |back   |
+		//  |4x12   |4x12   |4x12   |4x12   |
+		//  *-------*-------*-------*-------*
+		// The right arm area of *slim* skins:
+		// (44,16)->*------*------*-*
+		// (40,20)  |top   |bottom| |<----[x0=50,y0=16,w=2,h=4]
+		// \|/      |3x4   |3x4   | |
+		//  *-------*------*------***-----*-*
+		//  |right  |front |left   |back  | |<----[x0=54,y0=20,w=2,h=12]
+		//  |4x12   |3x12  |4x12   |3x12  | |
+		//  *-------*------*-------*------*-*
+		// Compared with default right arms, slim right arms have 2 unused areas.
+		//
+		// The same is true for left arm:
+		// The left arm area of *default* skins:
+		// (36,48)->*-------*-------*
+		// (32,52)  |top    |bottom |
+		// \|/      |4x4    |4x4    |
+		//  *-------*-------*-------*-------*
+		//  |right  |front  |left   |back   |
+		//  |4x12   |4x12   |4x12   |4x12   |
+		//  *-------*-------*-------*-------*
+		// The left arm area of *slim* skins:
+		// (36,48)->*------*------*-*
+		// (32,52)  |top   |bottom| |<----[x0=42,y0=48,w=2,h=4]
+		// \|/      |3x4   |3x4   | |
+		//  *-------*------*------***-----*-*
+		//  |right  |front |left   |back  | |<----[x0=46,y0=52,w=2,h=12]
+		//  |4x12   |3x12  |4x12   |3x12  | |
+		//  *-------*------*-------*------*-*
+		//
+		// If there is a transparent pixel in any of the 4 unused areas, the skin must be slim,
+		// as transparent pixels are not allowed in the first layer.
+
+		if (canvasOrImage instanceof HTMLCanvasElement) {
+			var canvas = canvasOrImage;
+			var scale = computeSkinScale(canvas.width);
+			var context = canvas.getContext("2d");
+			var checkArea = function checkArea(x, y, w, h) {
+				return hasTransparency(context, x * scale, y * scale, w * scale, h * scale);
+			};
+			return checkArea(50, 16, 2, 4) || checkArea(54, 20, 2, 12) || checkArea(42, 48, 2, 4) || checkArea(46, 52, 2, 12);
+		} else if (canvasOrImage instanceof HTMLImageElement) {
+			var image = canvasOrImage;
+			var _canvas = document.createElement("canvas");
+			loadSkinToCanvas(_canvas, image);
+			return isSlimSkin(_canvas);
+		} else {
+			throw "Illegal argument: " + canvasOrImage;
+		}
+	}
+
 	var SkinViewer = function () {
@@ -529,2 +723,3 @@ function SkinViewer(options) {
 			this.animation = options.animation || null;
+			this.detectModel = options.animation !== false; // true by default
 			this.animationPaused = false;
@@ -566,3 +761,3 @@ this.animationTime = 0;
 
-			this.playerObject = new PlayerObject(options.slim === true, this.layer1Material, this.layer2Material, this.capeMaterial);
+			this.playerObject = new PlayerObject(this.layer1Material, this.layer2Material, this.capeMaterial);
 			this.scene.add(this.playerObject);
@@ -576,25 +771,6 @@
 			this.skinImg.onload = function () {
-				var isOldFormat = false;
-				if (_this.skinImg.width !== _this.skinImg.height) {
-					if (_this.skinImg.width === 2 * _this.skinImg.height) {
-						isOldFormat = true;
-					} else {
-						console.error("Bad skin size");
-						return;
-					}
-				}
+				loadSkinToCanvas(_this.skinCanvas, _this.skinImg);
 
-				var skinContext = _this.skinCanvas.getContext("2d");
-				if (isOldFormat) {
-					var width = _this.skinImg.width;
-					_this.skinCanvas.width = width;
-					_this.skinCanvas.height = width;
-					skinContext.clearRect(0, 0, width, width);
-					skinContext.drawImage(_this.skinImg, 0, 0, width, width / 2.0);
-					convertSkinTo1_8(skinContext, width);
-				} else {
-					_this.skinCanvas.width = _this.skinImg.width;
-					_this.skinCanvas.height = _this.skinImg.height;
-					skinContext.clearRect(0, 0, _this.skinCanvas.width, _this.skinCanvas.height);
-					skinContext.drawImage(_this.skinImg, 0, 0, _this.skinCanvas.width, _this.skinCanvas.height);
+				if (_this.detectModel) {
+					_this.playerObject.skin.slim = isSlimSkin(_this.skinCanvas);
 				}
@@ -614,25 +790,4 @@
 			this.capeImg.onload = function () {
-				var isOldFormat = false;
-				if (_this.capeImg.width !== 2 * _this.capeImg.height) {
-					if (_this.capeImg.width * 17 == _this.capeImg.height * 22) {
-						// width/height = 22/17
-						isOldFormat = true;
-					} else {
-						console.error("Bad cape size");
-						return;
-					}
-				}
+				loadCapeToCanvas(_this.capeCanvas, _this.capeImg);
 
-				var capeContext = _this.capeCanvas.getContext("2d");
-				if (isOldFormat) {
-					var width = _this.capeImg.width * 64 / 22;
-					_this.capeCanvas.width = width;
-					_this.capeCanvas.height = width / 2;
-				} else {
-					_this.capeCanvas.width = _this.capeImg.width;
-					_this.capeCanvas.height = _this.capeImg.height;
-				}
-				capeContext.clearRect(0, 0, _this.capeCanvas.width, _this.capeCanvas.height);
-				capeContext.drawImage(_this.capeImg, 0, 0, _this.capeImg.width, _this.capeImg.height);
-
 				_this.capeTexture.needsUpdate = true;
@@ -1304,2 +1459,3 @@ _this.capeMaterial.needsUpdate = true;
 	exports.RotatingAnimation = RotatingAnimation;
+	exports.isSlimSkin = isSlimSkin;
 
@@ -1306,0 +1462,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

build/skinview3d.min.js

@@ -28,3 +28,3 @@ /**
 
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("three")):"function"==typeof define&&define.amd?define(["exports","three"],t):t(e.skinview3d={},e.THREE)}(this,function(e,t){"use strict";var n=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},a=function(){function e(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}return function(t,n,a){return n&&e(t.prototype,n),a&&e(t,a),t}}(),i=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},o=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t};function r(e,n,a,i,o,r){return[new t.Vector2(e/o,1-i/r),new t.Vector2(a/o,1-i/r),new t.Vector2(a/o,1-n/r),new t.Vector2(e/o,1-n/r)]}function s(e,t,n,a){return r(e,t,n,a,64,64)}function c(e,t,n,a){return r(e,t,n,a,64,32)}function h(e,t,n,a,i,o,r){e.faceVertexUvs[0]=[],e.faceVertexUvs[0][0]=[o[3],o[0],o[2]],e.faceVertexUvs[0][1]=[o[0],o[1],o[2]],e.faceVertexUvs[0][2]=[a[3],a[0],a[2]],e.faceVertexUvs[0][3]=[a[0],a[1],a[2]],e.faceVertexUvs[0][4]=[t[3],t[0],t[2]],e.faceVertexUvs[0][5]=[t[0],t[1],t[2]],e.faceVertexUvs[0][6]=[n[0],n[3],n[1]],e.faceVertexUvs[0][7]=[n[3],n[2],n[1]],e.faceVertexUvs[0][8]=[i[3],i[0],i[2]],e.faceVertexUvs[0][9]=[i[0],i[1],i[2]],e.faceVertexUvs[0][10]=[r[3],r[0],r[2]],e.faceVertexUvs[0][11]=[r[0],r[1],r[2]]}var d=.002,u=function(e){function a(e,i,r){n(this,a);var c=o(this,(a.__proto__||Object.getPrototypeOf(a)).call(this));c.slim=e,c.head=new t.Group;var u=new t.BoxGeometry(8,8,8,0,0,0);h(u,s(8,0,16,8),s(16,0,24,8),s(0,8,8,16),s(8,8,16,16),s(16,8,24,16),s(24,8,32,16));var m=new t.Mesh(u,i);c.head.add(m);var p=new t.BoxGeometry(9,9,9,0,0,0);h(p,s(40,0,48,8),s(48,0,56,8),s(32,8,40,16),s(40,8,48,16),s(48,8,56,16),s(56,8,64,16));var l=new t.Mesh(p,r);l.renderOrder=-1,c.head.add(l),c.add(c.head),c.body=new t.Group;var f=new t.BoxGeometry(8,12,4,0,0,0);h(f,s(20,16,28,20),s(28,16,36,20),s(16,20,20,32),s(20,20,28,32),s(28,20,32,32),s(32,20,40,32));var g=new t.Mesh(f,i);c.body.add(g);var v=new t.BoxGeometry(9,13.5,4.5,0,0,0);h(v,s(20,32,28,36),s(28,32,36,36),s(16,36,20,48),s(20,36,28,48),s(28,36,32,48),s(32,36,40,48));var b=new t.Mesh(v,r);c.body.add(b),c.body.position.y=-10,c.add(c.body),c.rightArm=new t.Group;var w=new t.Group,y=new t.BoxGeometry((e?3:4)-d,12-d,4-d,0,0,0);e?h(y,s(44,16,47,20),s(47,16,50,20),s(40,20,44,32),s(44,20,47,32),s(47,20,51,32),s(51,20,54,32)):h(y,s(44,16,48,20),s(48,16,52,20),s(40,20,44,32),s(44,20,48,32),s(48,20,52,32),s(52,20,56,32));var x=new t.Mesh(y,i);w.add(x);var M=new t.BoxGeometry((e?3.375:4.5)-d,13.5-d,4.5-d,0,0,0);e?h(M,s(44,32,47,36),s(47,32,50,36),s(40,36,44,48),s(44,36,47,48),s(47,36,51,48),s(51,36,54,48)):h(M,s(44,32,48,36),s(48,32,52,36),s(40,36,44,48),s(44,36,48,48),s(48,36,52,48),s(52,36,56,48));var k=new t.Mesh(M,r);k.renderOrder=1,w.add(k),w.position.y=-6,c.rightArm.add(w),c.rightArm.position.y=-4,c.rightArm.position.x=e?-5.5:-6,c.add(c.rightArm),c.leftArm=new t.Group;var E=new t.Group,O=new t.BoxGeometry((e?3:4)-d,12-d,4-d,0,0,0);e?h(O,s(36,48,39,52),s(39,48,42,52),s(32,52,36,64),s(36,52,39,64),s(39,52,43,64),s(43,52,46,64)):h(O,s(36,48,40,52),s(40,48,44,52),s(32,52,36,64),s(36,52,40,64),s(40,52,44,64),s(44,52,48,64));var I=new t.Mesh(O,i);E.add(I);var P=new t.BoxGeometry((e?3.375:4.5)-d,13.5-d,4.5-d,0,0,0);e?h(P,s(52,48,55,52),s(55,48,58,52),s(48,52,52,64),s(52,52,55,64),s(55,52,59,64),s(59,52,62,64)):h(P,s(52,48,56,52),s(56,48,60,52),s(48,52,52,64),s(52,52,56,64),s(56,52,60,64),s(60,52,64,64));var j=new t.Mesh(P,r);j.renderOrder=1,E.add(j),E.position.y=-6,c.leftArm.add(E),c.leftArm.position.y=-4,c.leftArm.position.x=e?5.5:6,c.add(c.leftArm),c.rightLeg=new t.Group;var C=new t.Group,T=new t.BoxGeometry(4-d,12-d,4-d,0,0,0);h(T,s(4,16,8,20),s(8,16,12,20),s(0,20,4,32),s(4,20,8,32),s(8,20,12,32),s(12,20,16,32));var A=new t.Mesh(T,i);C.add(A);var L=new t.BoxGeometry(4.5-d,13.5-d,4.5-d,0,0,0);h(L,s(4,32,8,36),s(8,32,12,36),s(0,36,4,48),s(4,36,8,48),s(8,36,12,48),s(12,36,16,48));var _=new t.Mesh(L,r);_.renderOrder=1,C.add(_),C.position.y=-6,c.rightLeg.add(C),c.rightLeg.position.y=-16,c.rightLeg.position.x=-2,c.add(c.rightLeg),c.leftLeg=new t.Group;var V=new t.Group,N=new t.BoxGeometry(4-d,12-d,4-d,0,0,0);h(N,s(20,48,24,52),s(24,48,28,52),s(16,52,20,64),s(20,52,24,64),s(24,52,28,64),s(28,52,32,64));var S=new t.Mesh(N,i);V.add(S);var U=new t.BoxGeometry(4.5-d,13.5-d,4.5-d,0,0,0);h(U,s(4,48,8,52),s(8,48,12,52),s(0,52,4,64),s(4,52,8,64),s(8,52,12,64),s(12,52,16,64));var z=new t.Mesh(U,r);return z.renderOrder=1,V.add(z),V.position.y=-6,c.leftLeg.add(V),c.leftLeg.position.y=-16,c.leftLeg.position.x=2,c.add(c.leftLeg),c}return i(a,e),a}(t.Group),m=function(e){function a(e){n(this,a);var i=o(this,(a.__proto__||Object.getPrototypeOf(a)).call(this)),r=new t.BoxGeometry(10,16,1,0,0,0);return h(r,c(1,0,11,1),c(11,0,21,1),c(11,1,12,17),c(12,1,22,17),c(0,1,1,17),c(1,1,11,17)),i.cape=new t.Mesh(r,e),i.cape.position.y=-8,i.cape.position.z=-.5,i.add(i.cape),i}return i(a,e),a}(t.Group),p=function(e){function t(e,a,i,r){n(this,t);var s=o(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));return s.skin=new u(e,a,i),s.skin.visible=!1,s.add(s.skin),s.cape=new m(r),s.cape.position.z=-2,s.cape.position.y=-4,s.cape.rotation.x=25*Math.PI/180,s.cape.visible=!1,s.add(s.cape),s}return i(t,e),t}(t.Group);function l(e,t,n){if(e instanceof g)e.play(t,n);else{if(!(e instanceof Function))throw"Not an animation: "+e;e(t,n)}}var f=function(){function e(t){n(this,e),this.animation=t,this.paused=this._paused=!1,this.speed=this._speed=1,this._lastChange=null,this._lastChangeX=null}return a(e,[{key:"play",value:function(e,t){if(null===this._lastChange)this._lastChange=t,this._lastChangeX=0;else if(this.paused!==this._paused||this.speed!==this._speed){var n=t-this._lastChange;!1===this._paused&&(this._lastChangeX+=n*this._speed),this._paused=this.paused,this._speed=this.speed,this._lastChange=t}if(!1===this.paused){var a=t-this._lastChange,i=this._lastChangeX+this.speed*a;l(this.animation,e,i)}}},{key:"reset",value:function(){this._lastChange=null}}]),e}(),g=function(){function e(){n(this,e),this.handles=new Set}return a(e,[{key:"add",value:function(e){var t=this,n=new f(e);return n.remove=function(){return t.handles.delete(n)},this.handles.add(n),n}},{key:"play",value:function(e,t){this.handles.forEach(function(n){return n.play(e,t)})}}]),e}();var v=function(){function e(a){var i=this;n(this,e),this.domElement=a.domElement,this.animation=a.animation||null,this.animationPaused=!1,this.animationTime=0,this.disposed=!1,this.skinImg=new Image,this.skinCanvas=document.createElement("canvas"),this.skinTexture=new t.Texture(this.skinCanvas),this.skinTexture.magFilter=t.NearestFilter,this.skinTexture.minFilter=t.NearestFilter,this.capeImg=new Image,this.capeCanvas=document.createElement("canvas"),this.capeTexture=new t.Texture(this.capeCanvas),this.capeTexture.magFilter=t.NearestFilter,this.capeTexture.minFilter=t.NearestFilter,this.layer1Material=new t.MeshBasicMaterial({map:this.skinTexture,side:t.FrontSide}),this.layer2Material=new t.MeshBasicMaterial({map:this.skinTexture,transparent:!0,opacity:1,side:t.DoubleSide,alphaTest:.5}),this.capeMaterial=new t.MeshBasicMaterial({map:this.capeTexture,transparent:!0,opacity:1,side:t.DoubleSide,alphaTest:.5}),this.scene=new t.Scene,this.camera=new t.PerspectiveCamera(40),this.camera.position.y=-12,this.camera.position.z=60,this.renderer=new t.WebGLRenderer({angleRot:!0,alpha:!0,antialias:!1}),this.renderer.setSize(300,300),this.renderer.context.getShaderInfoLog=function(){return""},this.domElement.appendChild(this.renderer.domElement),this.playerObject=new p(!0===a.slim,this.layer1Material,this.layer2Material,this.capeMaterial),this.scene.add(this.playerObject),this.skinImg.crossOrigin="anonymous",this.skinImg.onerror=function(){return console.error("Failed loading "+i.skinImg.src)},this.skinImg.onload=function(){var e=!1;if(i.skinImg.width!==i.skinImg.height){if(i.skinImg.width!==2*i.skinImg.height)return void console.error("Bad skin size");e=!0}var t=i.skinCanvas.getContext("2d");if(e){var n=i.skinImg.width;i.skinCanvas.width=n,i.skinCanvas.height=n,t.clearRect(0,0,n,n),t.drawImage(i.skinImg,0,0,n,n/2),function(e,t){var n=t/64,a=function(e,t,a,i,o,r,s,c){return function(e,t,n,a,i,o,r,s){var c=e.getImageData(t,n,a,i);if(s)for(var h=0;h<i;h++)for(var d=0;d<a/2;d++){var u=4*(d+h*a),m=4*(a-d-1+h*a),p=c.data[u],l=c.data[u+1],f=c.data[u+2],g=c.data[u+3],v=c.data[m],b=c.data[m+1],w=c.data[m+2],y=c.data[m+3];c.data[u]=v,c.data[u+1]=b,c.data[u+2]=w,c.data[u+3]=y,c.data[m]=p,c.data[m+1]=l,c.data[m+2]=f,c.data[m+3]=g}e.putImageData(c,o,r)}(e,t*n,a*n,i*n,o*n,r*n,s*n,c)};a(e,4,16,4,4,20,48,!0),a(e,8,16,4,4,24,48,!0),a(e,0,20,4,12,24,52,!0),a(e,4,20,4,12,20,52,!0),a(e,8,20,4,12,16,52,!0),a(e,12,20,4,12,28,52,!0),a(e,44,16,4,4,36,48,!0),a(e,48,16,4,4,40,48,!0),a(e,40,20,4,12,40,52,!0),a(e,44,20,4,12,36,52,!0),a(e,48,20,4,12,32,52,!0),a(e,52,20,4,12,44,52,!0)}(t,n)}else i.skinCanvas.width=i.skinImg.width,i.skinCanvas.height=i.skinImg.height,t.clearRect(0,0,i.skinCanvas.width,i.skinCanvas.height),t.drawImage(i.skinImg,0,0,i.skinCanvas.width,i.skinCanvas.height);i.skinTexture.needsUpdate=!0,i.layer1Material.needsUpdate=!0,i.layer2Material.needsUpdate=!0,i.playerObject.skin.visible=!0},this.capeImg.crossOrigin="anonymous",this.capeImg.onerror=function(){return console.error("Failed loading "+i.capeImg.src)},this.capeImg.onload=function(){var e=!1;if(i.capeImg.width!==2*i.capeImg.height){if(17*i.capeImg.width!=22*i.capeImg.height)return void console.error("Bad cape size");e=!0}var t=i.capeCanvas.getContext("2d");if(e){var n=64*i.capeImg.width/22;i.capeCanvas.width=n,i.capeCanvas.height=n/2}else i.capeCanvas.width=i.capeImg.width,i.capeCanvas.height=i.capeImg.height;t.clearRect(0,0,i.capeCanvas.width,i.capeCanvas.height),t.drawImage(i.capeImg,0,0,i.capeImg.width,i.capeImg.height),i.capeTexture.needsUpdate=!0,i.capeMaterial.needsUpdate=!0,i.playerObject.cape.visible=!0},a.skinUrl&&(this.skinUrl=a.skinUrl),a.capeUrl&&(this.capeUrl=a.capeUrl),a.width&&(this.width=a.width),a.height&&(this.height=a.height);!function e(){i.disposed||(window.requestAnimationFrame(e),i.animationPaused||(i.animationTime++,i.animation&&l(i.animation,i.playerObject,i.animationTime/100)),i.renderer.render(i.scene,i.camera))}()}return a(e,[{key:"setSize",value:function(e,t){this.camera.aspect=e/t,this.camera.updateProjectionMatrix(),this.renderer.setSize(e,t)}},{key:"dispose",value:function(){this.disposed=!0,this.domElement.removeChild(this.renderer.domElement),this.renderer.dispose(),this.skinTexture.dispose(),this.capeTexture.dispose()}},{key:"skinUrl",get:function(){return this.skinImg.src},set:function(e){this.skinImg.src=e}},{key:"capeUrl",get:function(){return this.capeImg.src},set:function(e){this.capeImg.src=e}},{key:"width",get:function(){return this.renderer.getSize().width},set:function(e){this.setSize(e,this.height)}},{key:"height",get:function(){return this.renderer.getSize().height},set:function(e){this.setSize(this.width,e)}}]),e}(),b=function(e){
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("three")):"function"==typeof define&&define.amd?define(["exports","three"],t):t(e.skinview3d={},e.THREE)}(this,function(e,Q){"use strict";var K=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},a=function(){function a(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}return function(e,t,n){return t&&a(e.prototype,t),n&&a(e,n),e}}(),t=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},J=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t};function i(e,t,n,a,i,o){return[new Q.Vector2(e/i,1-a/o),new Q.Vector2(n/i,1-a/o),new Q.Vector2(n/i,1-t/o),new Q.Vector2(e/i,1-t/o)]}function _(e,t,n,a){return i(e,t,n,a,64,64)}function o(e,t,n,a){return i(e,t,n,a,64,32)}function C(e,t,n,a,i,o,r){e.faceVertexUvs[0]=[],e.faceVertexUvs[0][0]=[o[3],o[0],o[2]],e.faceVertexUvs[0][1]=[o[0],o[1],o[2]],e.faceVertexUvs[0][2]=[a[3],a[0],a[2]],e.faceVertexUvs[0][3]=[a[0],a[1],a[2]],e.faceVertexUvs[0][4]=[t[3],t[0],t[2]],e.faceVertexUvs[0][5]=[t[0],t[1],t[2]],e.faceVertexUvs[0][6]=[n[0],n[3],n[1]],e.faceVertexUvs[0][7]=[n[3],n[2],n[1]],e.faceVertexUvs[0][8]=[i[3],i[0],i[2]],e.faceVertexUvs[0][9]=[i[0],i[1],i[2]],e.faceVertexUvs[0][10]=[r[3],r[0],r[2]],e.faceVertexUvs[0][11]=[r[0],r[1],r[2]]}var N=.002,r=function(e){function I(e,t){K(this,I);var n=J(this,(I.__proto__||Object.getPrototypeOf(I)).call(this));n.modelListeners=[],n.head=new Q.Group;var a=new Q.BoxGeometry(8,8,8,0,0,0);C(a,_(8,0,16,8),_(16,0,24,8),_(0,8,8,16),_(8,8,16,16),_(16,8,24,16),_(24,8,32,16));var i=new Q.Mesh(a,e);n.head.add(i);var o=new Q.BoxGeometry(9,9,9,0,0,0);C(o,_(40,0,48,8),_(48,0,56,8),_(32,8,40,16),_(40,8,48,16),_(48,8,56,16),_(56,8,64,16));var r=new Q.Mesh(o,t);r.renderOrder=-1,n.head.add(r),n.add(n.head),n.body=new Q.Group;var s=new Q.BoxGeometry(8,12,4,0,0,0);C(s,_(20,16,28,20),_(28,16,36,20),_(16,20,20,32),_(20,20,28,32),_(28,20,32,32),_(32,20,40,32));var c=new Q.Mesh(s,e);n.body.add(c);var h=new Q.BoxGeometry(9,13.5,4.5,0,0,0);C(h,_(20,32,28,36),_(28,32,36,36),_(16,36,20,48),_(20,36,28,48),_(28,36,32,48),_(32,36,40,48));var d=new Q.Mesh(h,t);n.body.add(d),n.body.position.y=-10,n.add(n.body),n.rightArm=new Q.Group;var u=new Q.Group,l=new Q.BoxGeometry(1,1,1,0,0,0),m=new Q.Mesh(l,e);u.add(m),n.modelListeners.push(function(){m.scale.x=(n.slim?3:4)-N,m.scale.y=12-N,m.scale.z=4-N,n.slim?C(l,_(44,16,47,20),_(47,16,50,20),_(40,20,44,32),_(44,20,47,32),_(47,20,51,32),_(51,20,54,32)):C(l,_(44,16,48,20),_(48,16,52,20),_(40,20,44,32),_(44,20,48,32),_(48,20,52,32),_(52,20,56,32)),l.uvsNeedUpdate=!0,l.elementsNeedUpdate=!0});var p=new Q.BoxGeometry(1,1,1,0,0,0),f=new Q.Mesh(p,t);f.renderOrder=1,u.add(f),n.modelListeners.push(function(){f.scale.x=(n.slim?3.375:4.5)-N,f.scale.y=13.498,f.scale.z=4.498,n.slim?C(p,_(44,32,47,36),_(47,32,50,36),_(40,36,44,48),_(44,36,47,48),_(47,36,51,48),_(51,36,54,48)):C(p,_(44,32,48,36),_(48,32,52,36),_(40,36,44,48),_(44,36,48,48),_(48,36,52,48),_(52,36,56,48)),p.uvsNeedUpdate=!0,p.elementsNeedUpdate=!0}),u.position.y=-6,n.rightArm.add(u),n.rightArm.position.y=-4,n.modelListeners.push(function(){n.rightArm.position.x=n.slim?-5.5:-6}),n.add(n.rightArm),n.leftArm=new Q.Group;var g=new Q.Group,v=new Q.BoxGeometry(1,1,1,0,0,0),b=new Q.Mesh(v,e);g.add(b),n.modelListeners.push(function(){b.scale.x=(n.slim?3:4)-N,b.scale.y=12-N,b.scale.z=4-N,n.slim?C(v,_(36,48,39,52),_(39,48,42,52),_(32,52,36,64),_(36,52,39,64),_(39,52,43,64),_(43,52,46,64)):C(v,_(36,48,40,52),_(40,48,44,52),_(32,52,36,64),_(36,52,40,64),_(40,52,44,64),_(44,52,48,64)),v.uvsNeedUpdate=!0,v.elementsNeedUpdate=!0});var w=new Q.BoxGeometry(1,1,1,0,0,0),y=new Q.Mesh(w,t);y.renderOrder=1,g.add(y),n.modelListeners.push(function(){y.scale.x=(n.slim?3.375:4.5)-N,y.scale.y=13.498,y.scale.z=4.498,n.slim?C(w,_(52,48,55,52),_(55,48,58,52),_(48,52,52,64),_(52,52,55,64),_(55,52,59,64),_(59,52,62,64)):C(w,_(52,48,56,52),_(56,48,60,52),_(48,52,52,64),_(52,52,56,64),_(56,52,60,64),_(60,52,64,64)),w.uvsNeedUpdate=!0,w.elementsNeedUpdate=!0}),g.position.y=-6,n.leftArm.add(g),n.leftArm.position.y=-4,n.modelListeners.push(function(){n.leftArm.position.x=n.slim?5.5:6}),n.add(n.leftArm),n.rightLeg=new Q.Group;var x=new Q.Group,M=new Q.BoxGeometry(4-N,12-N,4-N,0,0,0);C(M,_(4,16,8,20),_(8,16,12,20),_(0,20,4,32),_(4,20,8,32),_(8,20,12,32),_(12,20,16,32));var E=new Q.Mesh(M,e);x.add(E);var O=new Q.BoxGeometry(4.498,13.498,4.498,0,0,0);C(O,_(4,32,8,36),_(8,32,12,36),_(0,36,4,48),_(4,36,8,48),_(8,36,12,48),_(12,36,16,48));var k=new Q.Mesh(O,t);k.renderOrder=1,x.add(k),x.position.y=-6,n.rightLeg.add(x),n.rightLeg.position.y=-16,n.rightLeg.position.x=-2,n.add(n.rightLeg),n.leftLeg=new Q.Group;var P=new Q.Group,j=new Q.BoxGeometry(4-N,12-N,4-N,0,0,0);C(j,_(20,48,24,52),_(24,48,28,52),_(16,52,20,64),_(20,52,24,64),_(24,52,28,64),_(28,52,32,64));var L=new Q.Mesh(j,e);P.add(L);var T=new Q.BoxGeometry(4.498,13.498,4.498,0,0,0);C(T,_(4,48,8,52),_(8,48,12,52),_(0,52,4,64),_(4,52,8,64),_(8,52,12,64),_(12,52,16,64));var A=new Q.Mesh(T,t);return A.renderOrder=1,P.add(A),P.position.y=-6,n.leftLeg.add(P),n.leftLeg.position.y=-16,n.leftLeg.position.x=2,n.add(n.leftLeg),n.slim=!1,n}return t(I,e),a(I,[{key:"slim",get:function(){return this._slim},set:function(e){this._slim!==e&&(this._slim=e,this.modelListeners.forEach(function(e){return e()}))}}]),I}(Q.Group),s=function(e){function a(e){K(this,a);var t=J(this,(a.__proto__||Object.getPrototypeOf(a)).call(this)),n=new Q.BoxGeometry(10,16,1,0,0,0);return C(n,o(1,0,11,1),o(11,0,21,1),o(11,1,12,17),o(12,1,22,17),o(0,1,1,17),o(1,1,11,17)),t.cape=new Q.Mesh(n,e),t.cape.position.y=-8,t.cape.position.z=-.5,t.add(t.cape),t}return t(a,e),a}(Q.Group),c=function(e){function i(e,t,n){K(this,i);var a=J(this,(i.__proto__||Object.getPrototypeOf(i)).call(this));return a.skin=new r(e,t),a.skin.visible=!1,a.add(a.skin),a.cape=new s(n),a.cape.position.z=-2,a.cape.position.y=-4,a.cape.rotation.x=25*Math.PI/180,a.cape.visible=!1,a.add(a.cape),a}return t(i,e),i}(Q.Group);function h(e,t,n){if(e instanceof u)e.play(t,n);else{if(!(e instanceof Function))throw"Not an animation: "+e;e(t,n)}}var d=function(){function t(e){K(this,t),this.animation=e,this.paused=this._paused=!1,this.speed=this._speed=1,this._lastChange=null,this._lastChangeX=null}return a(t,[{key:"play",value:function(e,t){if(null===this._lastChange)this._lastChange=t,this._lastChangeX=0;else if(this.paused!==this._paused||this.speed!==this._speed){var n=t-this._lastChange;!1===this._paused&&(this._lastChangeX+=n*this._speed),this._paused=this.paused,this._speed=this.speed,this._lastChange=t}if(!1===this.paused){var a=t-this._lastChange,i=this._lastChangeX+this.speed*a;h(this.animation,e,i)}}},{key:"reset",value:function(){this._lastChange=null}}]),t}(),u=function(){function e(){K(this,e),this.handles=new Set}return a(e,[{key:"add",value:function(e){var t=this,n=new d(e);return n.remove=function(){return t.handles.delete(n)},this.handles.add(n),n}},{key:"play",value:function(t,n){this.handles.forEach(function(e){return e.play(t,n)})}}]),e}();function l(e,t,n,a,i){for(var o=e.getImageData(t,n,a,i),r=0;r<a;r++)for(var s=0;s<i;s++){var c=4*(r+s*a);if(255!==o.data[c+3])return!0}return!1}function m(e){return e/64}function p(s,e){var c=m(e),t=function(e,t,n,a,i,o,r){return function(e,t,n,a,i,o,r,s){var c=e.getImageData(t,n,a,i);if(s)for(var h=0;h<i;h++)for(var d=0;d<a/2;d++){var u=4*(d+h*a),l=4*(a-d-1+h*a),m=c.data[u],p=c.data[u+1],f=c.data[u+2],g=c.data[u+3],v=c.data[l],b=c.data[l+1],w=c.data[l+2],y=c.data[l+3];c.data[u]=v,c.data[u+1]=b,c.data[u+2]=w,c.data[u+3]=y,c.data[l]=m,c.data[l+1]=p,c.data[l+2]=f,c.data[l+3]=g}e.putImageData(c,o,r)}(s,e*c,t*c,n*c,a*c,i*c,o*c,r)};!function(i,e){if(!l(i,0,0,e,e/2)){var o=m(e),t=function(e,t,n,a){return i.clearRect(e*o,t*o,n*o,a*o)};t(40,0,8,8),t(48,0,8,8),t(32,8,8,8),t(40,8,8,8),t(48,8,8,8),t(56,8,8,8)}}(s,e),t(4,16,4,4,20,48,!0),t(8,16,4,4,24,48,!0),t(0,20,4,12,24,52,!0),t(4,20,4,12,20,52,!0),t(8,20,4,12,16,52,!0),t(12,20,4,12,28,52,!0),t(44,16,4,4,36,48,!0),t(48,16,4,4,40,48,!0),t(40,20,4,12,40,52,!0),t(44,20,4,12,36,52,!0),t(48,20,4,12,32,52,!0),t(52,20,4,12,44,52,!0)}function f(e,t){var n=!1;if(t.width!==t.height){if(t.width!==2*t.height)throw"Bad skin size: "+t.width+"x"+t.height;n=!0}var a=e.getContext("2d");if(n){var i=t.width;e.width=i,e.height=i,a.clearRect(0,0,i,i),a.drawImage(t,0,0,i,i/2),p(a,i)}else e.width=t.width,e.height=t.height,a.clearRect(0,0,t.width,t.height),a.drawImage(t,0,0,e.width,e.height)}function g(e){if(e instanceof HTMLCanvasElement){var t=e,i=m(t.width),o=t.getContext("2d"),n=function(e,t,n,a){return l(o,e*i,t*i,n*i,a*i)};return n(50,16,2,4)||n(54,20,2,12)||n(42,48,2,4)||n(46,52,2,12)}if(e instanceof HTMLImageElement){var a=e,r=document.createElement("canvas");return f(r,a),g(r)}throw"Illegal argument: "+e}var n=function(){function n(e){var t=this;K(this,n),this.domElement=e.domElement,this.animation=e.animation||null,this.detectModel=!1!==e.animation,this.animationPaused=!1,this.animationTime=0,this.disposed=!1,this.skinImg=new Image,this.skinCanvas=document.createElement("canvas"),this.skinTexture=new Q.Texture(this.skinCanvas),this.skinTexture.magFilter=Q.NearestFilter,this.skinTexture.minFilter=Q.NearestFilter,this.capeImg=new Image,this.capeCanvas=document.createElement("canvas"),this.capeTexture=new Q.Texture(this.capeCanvas),this.capeTexture.magFilter=Q.NearestFilter,this.capeTexture.minFilter=Q.NearestFilter,this.layer1Material=new Q.MeshBasicMaterial({map:this.skinTexture,side:Q.FrontSide}),this.layer2Material=new Q.MeshBasicMaterial({map:this.skinTexture,transparent:!0,opacity:1,side:Q.DoubleSide,alphaTest:.5}),this.capeMaterial=new Q.MeshBasicMaterial({map:this.capeTexture,transparent:!0,opacity:1,side:Q.DoubleSide,alphaTest:.5}),this.scene=new Q.Scene,this.camera=new Q.PerspectiveCamera(40),this.camera.position.y=-12,this.camera.position.z=60,this.renderer=new Q.WebGLRenderer({angleRot:!0,alpha:!0,antialias:!1}),this.renderer.setSize(300,300),this.renderer.context.getShaderInfoLog=function(){return""},this.domElement.appendChild(this.renderer.domElement),this.playerObject=new c(this.layer1Material,this.layer2Material,this.capeMaterial),this.scene.add(this.playerObject),this.skinImg.crossOrigin="anonymous",this.skinImg.onerror=function(){return console.error("Failed loading "+t.skinImg.src)},this.skinImg.onload=function(){f(t.skinCanvas,t.skinImg),t.detectModel&&(t.playerObject.skin.slim=g(t.skinCanvas)),t.skinTexture.needsUpdate=!0,t.layer1Material.needsUpdate=!0,t.layer2Material.needsUpdate=!0,t.playerObject.skin.visible=!0},this.capeImg.crossOrigin="anonymous",this.capeImg.onerror=function(){return console.error("Failed loading "+t.capeImg.src)},this.capeImg.onload=function(){!function(e,t){var n=!1;if(t.width!==2*t.height){if(17*t.width!=22*t.height)throw"Bad cape size: "+t.width+"x"+t.height;n=!0}var a=e.getContext("2d");if(n){var i=64*t.width/22;e.width=i,e.height=i/2}else e.width=t.width,e.height=t.height;a.clearRect(0,0,e.width,e.height),a.drawImage(t,0,0,t.width,t.height)}(t.capeCanvas,t.capeImg),t.capeTexture.needsUpdate=!0,t.capeMaterial.needsUpdate=!0,t.playerObject.cape.visible=!0},e.skinUrl&&(this.skinUrl=e.skinUrl),e.capeUrl&&(this.capeUrl=e.capeUrl),e.width&&(this.width=e.width),e.height&&(this.height=e.height);!function e(){t.disposed||(window.requestAnimationFrame(e),t.animationPaused||(t.animationTime++,t.animation&&h(t.animation,t.playerObject,t.animationTime/100)),t.renderer.render(t.scene,t.camera))}()}return a(n,[{key:"setSize",value:function(e,t){this.camera.aspect=e/t,this.camera.updateProjectionMatrix(),this.renderer.setSize(e,t)}},{key:"dispose",value:function(){this.disposed=!0,this.domElement.removeChild(this.renderer.domElement),this.renderer.dispose(),this.skinTexture.dispose(),this.capeTexture.dispose()}},{key:"skinUrl",get:function(){return this.skinImg.src},set:function(e){this.skinImg.src=e}},{key:"capeUrl",get:function(){return this.capeImg.src},set:function(e){this.capeImg.src=e}},{key:"width",get:function(){return this.renderer.getSize().width},set:function(e){this.setSize(e,this.height)}},{key:"height",get:function(){return this.renderer.getSize().height},set:function(e){this.setSize(this.width,e)}}]),n}(),v=function(e){
 /**
@@ -63,3 +63,3 @@ * @preserve
 	  */
-function a(e,i){n(this,a);var r,s,c,h,d,u=o(this,(a.__proto__||Object.getPrototypeOf(a)).call(this));u.object=e,u.domElement=void 0!==i?i:document,u.enabled=!0,u.target=new t.Vector3,u.minDistance=0,u.maxDistance=1/0,u.minZoom=0,u.maxZoom=1/0,u.minPolarAngle=0,u.maxPolarAngle=Math.PI,u.minAzimuthAngle=-1/0,u.maxAzimuthAngle=1/0,u.enableDamping=!1,u.dampingFactor=.25,u.enableZoom=!0,u.zoomSpeed=1,u.enableRotate=!0,u.rotateSpeed=1,u.enablePan=!0,u.keyPanSpeed=7,u.autoRotate=!1,u.autoRotateSpeed=2,u.enableKeys=!0,u.keys={LEFT:37,UP:38,RIGHT:39,BOTTOM:40},u.mouseButtons={ORBIT:t.MOUSE.LEFT,ZOOM:t.MOUSE.MIDDLE,PAN:t.MOUSE.RIGHT},u.target0=u.target.clone(),u.position0=u.object.position.clone(),u.zoom0=u.object.zoom,u.getPolarAngle=function(){return w.phi},u.getAzimuthalAngle=function(){return w.theta},u.saveState=function(){m.target0.copy(m.target),m.position0.copy(m.object.position),m.zoom0=m.object.zoom},u.reset=function(){m.target.copy(m.target0),m.object.position.copy(m.position0),m.object.zoom=m.zoom0,m.object.updateProjectionMatrix(),m.dispatchEvent(p),m.update(),v=g.NONE},u.update=(r=new t.Vector3,s=(new t.Quaternion).setFromUnitVectors(e.up,new t.Vector3(0,1,0)),c=s.clone().inverse(),h=new t.Vector3,d=new t.Quaternion,function(){var e=m.object.position;return r.copy(e).sub(m.target),r.applyQuaternion(s),w.setFromVector3(r),m.autoRotate&&v===g.NONE&&V(2*Math.PI/60/60*m.autoRotateSpeed),w.theta+=y.theta,w.phi+=y.phi,w.theta=Math.max(m.minAzimuthAngle,Math.min(m.maxAzimuthAngle,w.theta)),w.phi=Math.max(m.minPolarAngle,Math.min(m.maxPolarAngle,w.phi)),w.makeSafe(),w.radius*=x,w.radius=Math.max(m.minDistance,Math.min(m.maxDistance,w.radius)),m.target.add(M),r.setFromSpherical(w),r.applyQuaternion(c),e.copy(m.target).add(r),m.object.lookAt(m.target),!0===m.enableDamping?(y.theta*=1-m.dampingFactor,y.phi*=1-m.dampingFactor):y.set(0,0,0),x=1,M.set(0,0,0),!!(k||h.distanceToSquared(m.object.position)>b||8*(1-d.dot(m.object.quaternion))>b)&&(m.dispatchEvent(p),h.copy(m.object.position),d.copy(m.object.quaternion),k=!1,!0)}),u.dispose=function(){m.domElement.removeEventListener("contextmenu",Q,!1),m.domElement.removeEventListener("mousedown",D,!1),m.domElement.removeEventListener("wheel",H,!1),m.domElement.removeEventListener("touchstart",Z,!1),m.domElement.removeEventListener("touchend",q,!1),m.domElement.removeEventListener("touchmove",W,!1),document.removeEventListener("mousemove",F,!1),document.removeEventListener("mouseup",Y,!1),window.removeEventListener("keydown",X,!1)};var m=u,p={type:"change"},l={type:"start"},f={type:"end"},g={NONE:-1,ROTATE:0,DOLLY:1,PAN:2,TOUCH_ROTATE:3,TOUCH_DOLLY:4,TOUCH_PAN:5},v=g.NONE,b=1e-6,w=new t.Spherical,y=new t.Spherical,x=1,M=new t.Vector3,k=!1,E=new t.Vector2,O=new t.Vector2,I=new t.Vector2,P=new t.Vector2,j=new t.Vector2,C=new t.Vector2,T=new t.Vector2,A=new t.Vector2,L=new t.Vector2;function _(){return Math.pow(.95,m.zoomSpeed)}function V(e){y.theta-=e}function N(e){y.phi-=e}var S,U=(S=new t.Vector3,function(e,t){S.setFromMatrixColumn(t,0),S.multiplyScalar(-e),M.add(S)}),z=function(){var e=new t.Vector3;return function(t,n){e.setFromMatrixColumn(n,1),e.multiplyScalar(t),M.add(e)}}(),G=function(){var e=new t.Vector3;return function(n,a){var i=m.domElement===document?m.domElement.body:m.domElement;if(m.object instanceof t.PerspectiveCamera){var o=m.object.position;e.copy(o).sub(m.target);var r=e.length();r*=Math.tan(m.object.fov/2*Math.PI/180),U(2*n*r/i.clientHeight,m.object.matrix),z(2*a*r/i.clientHeight,m.object.matrix)}else m.object instanceof t.OrthographicCamera?(U(n*(m.object.right-m.object.left)/m.object.zoom/i.clientWidth,m.object.matrix),z(a*(m.object.top-m.object.bottom)/m.object.zoom/i.clientHeight,m.object.matrix)):(console.warn("WARNING: OrbitControls.js encountered an unknown camera type - pan disabled."),m.enablePan=!1)}}();function R(e){m.object instanceof t.PerspectiveCamera?x/=e:m.object instanceof t.OrthographicCamera?(m.object.zoom=Math.max(m.minZoom,Math.min(m.maxZoom,m.object.zoom*e)),m.object.updateProjectionMatrix(),k=!0):(console.warn("WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled."),m.enableZoom=!1)}function B(e){m.object instanceof t.PerspectiveCamera?x*=e:m.object instanceof t.OrthographicCamera?(m.object.zoom=Math.max(m.minZoom,Math.min(m.maxZoom,m.object.zoom/e)),m.object.updateProjectionMatrix(),k=!0):(console.warn("WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled."),m.enableZoom=!1)}function D(e){if(!1!==m.enabled){switch(e.button){case m.mouseButtons.ORBIT:if(!1===m.enableRotate)return;!function(e){E.set(e.clientX,e.clientY)}(e),v=g.ROTATE;break;case m.mouseButtons.ZOOM:if(!1===m.enableZoom)return;!function(e){T.set(e.clientX,e.clientY)}(e),v=g.DOLLY;break;case m.mouseButtons.PAN:if(!1===m.enablePan)return;!function(e){P.set(e.clientX,e.clientY)}(e),v=g.PAN}e.preventDefault(),v!==g.NONE&&(document.addEventListener("mousemove",F,!1),document.addEventListener("mouseup",Y,!1),m.dispatchEvent(l))}}function F(e){if(!1!==m.enabled){switch(v){case g.ROTATE:if(!1===m.enableRotate)return;!function(e){O.set(e.clientX,e.clientY),I.subVectors(O,E);var t=m.domElement===document?m.domElement.body:m.domElement;V(2*Math.PI*I.x/t.clientWidth*m.rotateSpeed),N(2*Math.PI*I.y/t.clientHeight*m.rotateSpeed),E.copy(O),m.update()}(e);break;case g.DOLLY:if(!1===m.enableZoom)return;!function(e){A.set(e.clientX,e.clientY),L.subVectors(A,T),L.y>0?R(_()):L.y<0&&B(_()),T.copy(A),m.update()}(e);break;case g.PAN:if(!1===m.enablePan)return;!function(e){j.set(e.clientX,e.clientY),C.subVectors(j,P),G(C.x,C.y),P.copy(j),m.update()}(e)}e.preventDefault()}}function Y(e){!1!==m.enabled&&(document.removeEventListener("mousemove",F,!1),document.removeEventListener("mouseup",Y,!1),m.dispatchEvent(f),v=g.NONE)}function H(e){!1===m.enabled||!1===m.enableZoom||v!==g.NONE&&v!==g.ROTATE||(e.preventDefault(),e.stopPropagation(),function(e){e.deltaY<0?B(_()):e.deltaY>0&&R(_()),m.update()}(e),m.dispatchEvent(l),m.dispatchEvent(f))}function X(e){!1!==m.enabled&&!1!==m.enableKeys&&!1!==m.enablePan&&function(e){switch(e.keyCode){case m.keys.UP:G(0,m.keyPanSpeed),m.update();break;case m.keys.BOTTOM:G(0,-m.keyPanSpeed),m.update();break;case m.keys.LEFT:G(m.keyPanSpeed,0),m.update();break;case m.keys.RIGHT:G(-m.keyPanSpeed,0),m.update()}}(e)}function Z(e){if(!1!==m.enabled){switch(e.touches.length){case 1:if(!1===m.enableRotate)return;!function(e){E.set(e.touches[0].pageX,e.touches[0].pageY)}(e),v=g.TOUCH_ROTATE;break;case 2:if(!1===m.enableZoom)return;!function(e){var t=e.touches[0].pageX-e.touches[1].pageX,n=e.touches[0].pageY-e.touches[1].pageY,a=Math.sqrt(t*t+n*n);T.set(0,a)}(e),v=g.TOUCH_DOLLY;break;case 3:if(!1===m.enablePan)return;!function(e){P.set(e.touches[0].pageX,e.touches[0].pageY)}(e),v=g.TOUCH_PAN;break;default:v=g.NONE}v!==g.NONE&&m.dispatchEvent(l)}}function W(e){if(!1!==m.enabled){switch(e.touches.length){case 1:if(!1===m.enableRotate)return;if(v!==g.TOUCH_ROTATE)return;!function(e){O.set(e.touches[0].pageX,e.touches[0].pageY),I.subVectors(O,E);var t=m.domElement===document?m.domElement.body:m.domElement;V(2*Math.PI*I.x/t.clientWidth*m.rotateSpeed),N(2*Math.PI*I.y/t.clientHeight*m.rotateSpeed),E.copy(O),m.update()}(e);break;case 2:if(!1===m.enableZoom)return;if(v!==g.TOUCH_DOLLY)return;!function(e){var t=e.touches[0].pageX-e.touches[1].pageX,n=e.touches[0].pageY-e.touches[1].pageY,a=Math.sqrt(t*t+n*n);A.set(0,a),L.subVectors(A,T),L.y>0?B(_()):L.y<0&&R(_()),T.copy(A),m.update()}(e);break;case 3:if(!1===m.enablePan)return;if(v!==g.TOUCH_PAN)return;!function(e){j.set(e.touches[0].pageX,e.touches[0].pageY),C.subVectors(j,P),G(C.x,C.y),P.copy(j),m.update()}(e);break;default:v=g.NONE}e.preventDefault(),e.stopPropagation()}}function q(e){!1!==m.enabled&&(m.dispatchEvent(f),v=g.NONE)}function Q(e){!1!==m.enabled&&!1!==m.enablePan&&e.preventDefault()}return m.domElement.addEventListener("contextmenu",Q,!1),m.domElement.addEventListener("mousedown",D,!1),m.domElement.addEventListener("wheel",H,!1),m.domElement.addEventListener("touchstart",Z,!1),m.domElement.addEventListener("touchend",q,!1),m.domElement.addEventListener("touchmove",W,!1),window.addEventListener("keydown",X,!1),u.update(),u}return i(a,e),a}(t.EventDispatcher);e.SkinObject=u,e.CapeObject=m,e.PlayerObject=p,e.SkinViewer=v,e.OrbitControls=b,e.createOrbitControls=function(e){var n=new b(e.camera,e.renderer.domElement);return n.enablePan=!1,n.target=new t.Vector3(0,-12,0),n.minDistance=10,n.maxDistance=256,n.update(),n},e.invokeAnimation=l,e.CompositeAnimation=g,e.WalkingAnimation=function(e,t){var n=e.skin;t*=8,n.leftLeg.rotation.x=.5*Math.sin(t),n.rightLeg.rotation.x=.5*Math.sin(t+Math.PI),n.leftArm.rotation.x=.5*Math.sin(t+Math.PI),n.rightArm.rotation.x=.5*Math.sin(t);var a=.02*Math.PI;n.leftArm.rotation.z=.03*Math.cos(t)+a,n.rightArm.rotation.z=.03*Math.cos(t+Math.PI)-a,n.head.rotation.y=.2*Math.sin(t/4),n.head.rotation.x=.1*Math.sin(t/5);var i=.06*Math.PI;e.cape.rotation.x=.06*Math.sin(t/1.5)+i},e.RunningAnimation=function(e,t){var n=e.skin;t*=15,n.leftLeg.rotation.x=1.3*Math.cos(t+Math.PI),n.rightLeg.rotation.x=1.3*Math.cos(t),n.leftArm.rotation.x=1.5*Math.cos(t),n.rightArm.rotation.x=1.5*Math.cos(t+Math.PI);var a=.1*Math.PI;n.leftArm.rotation.z=.1*Math.cos(t)+a,n.rightArm.rotation.z=.1*Math.cos(t+Math.PI)-a,e.position.y=Math.cos(2*t),e.position.x=.15*Math.cos(t),e.rotation.z=.01*Math.cos(t+Math.PI);var i=.3*Math.PI;e.cape.rotation.x=.1*Math.sin(2*t)+i},e.RotatingAnimation=function(e,t){e.rotation.y=t},Object.defineProperty(e,"__esModule",{value:!0})});
+function q(e,t){K(this,q);var n,a,i,o,r,s=J(this,(q.__proto__||Object.getPrototypeOf(q)).call(this));s.object=e,s.domElement=void 0!==t?t:document,s.enabled=!0,s.target=new Q.Vector3,s.minDistance=0,s.maxDistance=1/0,s.minZoom=0,s.maxZoom=1/0,s.minPolarAngle=0,s.maxPolarAngle=Math.PI,s.minAzimuthAngle=-1/0,s.maxAzimuthAngle=1/0,s.enableDamping=!1,s.dampingFactor=.25,s.enableZoom=!0,s.zoomSpeed=1,s.enableRotate=!0,s.rotateSpeed=1,s.enablePan=!0,s.keyPanSpeed=7,s.autoRotate=!1,s.autoRotateSpeed=2,s.enableKeys=!0,s.keys={LEFT:37,UP:38,RIGHT:39,BOTTOM:40},s.mouseButtons={ORBIT:Q.MOUSE.LEFT,ZOOM:Q.MOUSE.MIDDLE,PAN:Q.MOUSE.RIGHT},s.target0=s.target.clone(),s.position0=s.object.position.clone(),s.zoom0=s.object.zoom,s.getPolarAngle=function(){return f.phi},s.getAzimuthalAngle=function(){return f.theta},s.saveState=function(){c.target0.copy(c.target),c.position0.copy(c.object.position),c.zoom0=c.object.zoom},s.reset=function(){c.target.copy(c.target0),c.object.position.copy(c.position0),c.object.zoom=c.zoom0,c.object.updateProjectionMatrix(),c.dispatchEvent(h),c.update(),m=l.NONE},s.update=(n=new Q.Vector3,a=(new Q.Quaternion).setFromUnitVectors(e.up,new Q.Vector3(0,1,0)),i=a.clone().inverse(),o=new Q.Vector3,r=new Q.Quaternion,function(){var e=c.object.position;return n.copy(e).sub(c.target),n.applyQuaternion(a),f.setFromVector3(n),c.autoRotate&&m===l.NONE&&A(2*Math.PI/60/60*c.autoRotateSpeed),f.theta+=g.theta,f.phi+=g.phi,f.theta=Math.max(c.minAzimuthAngle,Math.min(c.maxAzimuthAngle,f.theta)),f.phi=Math.max(c.minPolarAngle,Math.min(c.maxPolarAngle,f.phi)),f.makeSafe(),f.radius*=v,f.radius=Math.max(c.minDistance,Math.min(c.maxDistance,f.radius)),c.target.add(b),n.setFromSpherical(f),n.applyQuaternion(i),e.copy(c.target).add(n),c.object.lookAt(c.target),!0===c.enableDamping?(g.theta*=1-c.dampingFactor,g.phi*=1-c.dampingFactor):g.set(0,0,0),v=1,b.set(0,0,0),!(!(w||o.distanceToSquared(c.object.position)>p||8*(1-r.dot(c.object.quaternion))>p)||(c.dispatchEvent(h),o.copy(c.object.position),r.copy(c.object.quaternion),w=!1))}),s.dispose=function(){c.domElement.removeEventListener("contextmenu",W,!1),c.domElement.removeEventListener("mousedown",G,!1),c.domElement.removeEventListener("wheel",F,!1),c.domElement.removeEventListener("touchstart",H,!1),c.domElement.removeEventListener("touchend",Z,!1),c.domElement.removeEventListener("touchmove",X,!1),document.removeEventListener("mousemove",D,!1),document.removeEventListener("mouseup",B,!1),window.removeEventListener("keydown",Y,!1)};var c=s,h={type:"change"},d={type:"start"},u={type:"end"},l={NONE:-1,ROTATE:0,DOLLY:1,PAN:2,TOUCH_ROTATE:3,TOUCH_DOLLY:4,TOUCH_PAN:5},m=l.NONE,p=1e-6,f=new Q.Spherical,g=new Q.Spherical,v=1,b=new Q.Vector3,w=!1,y=new Q.Vector2,x=new Q.Vector2,M=new Q.Vector2,E=new Q.Vector2,O=new Q.Vector2,k=new Q.Vector2,P=new Q.Vector2,j=new Q.Vector2,L=new Q.Vector2;function T(){return Math.pow(.95,c.zoomSpeed)}function A(e){g.theta-=e}function I(e){g.phi-=e}var _,C,N,U=(_=new Q.Vector3,function(e,t){_.setFromMatrixColumn(t,0),_.multiplyScalar(-e),b.add(_)}),V=(C=new Q.Vector3,function(e,t){C.setFromMatrixColumn(t,1),C.multiplyScalar(e),b.add(C)}),S=(N=new Q.Vector3,function(e,t){var n=c.domElement===document?c.domElement.body:c.domElement;if(c.object instanceof Q.PerspectiveCamera){var a=c.object.position;N.copy(a).sub(c.target);var i=N.length();i*=Math.tan(c.object.fov/2*Math.PI/180),U(2*e*i/n.clientHeight,c.object.matrix),V(2*t*i/n.clientHeight,c.object.matrix)}else c.object instanceof Q.OrthographicCamera?(U(e*(c.object.right-c.object.left)/c.object.zoom/n.clientWidth,c.object.matrix),V(t*(c.object.top-c.object.bottom)/c.object.zoom/n.clientHeight,c.object.matrix)):(console.warn("WARNING: OrbitControls.js encountered an unknown camera type - pan disabled."),c.enablePan=!1)});function z(e){c.object instanceof Q.PerspectiveCamera?v/=e:c.object instanceof Q.OrthographicCamera?(c.object.zoom=Math.max(c.minZoom,Math.min(c.maxZoom,c.object.zoom*e)),c.object.updateProjectionMatrix(),w=!0):(console.warn("WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled."),c.enableZoom=!1)}function R(e){c.object instanceof Q.PerspectiveCamera?v*=e:c.object instanceof Q.OrthographicCamera?(c.object.zoom=Math.max(c.minZoom,Math.min(c.maxZoom,c.object.zoom/e)),c.object.updateProjectionMatrix(),w=!0):(console.warn("WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled."),c.enableZoom=!1)}function G(e){if(!1!==c.enabled){switch(e.button){case c.mouseButtons.ORBIT:if(!1===c.enableRotate)return;a=e,y.set(a.clientX,a.clientY),m=l.ROTATE;break;case c.mouseButtons.ZOOM:if(!1===c.enableZoom)return;n=e,P.set(n.clientX,n.clientY),m=l.DOLLY;break;case c.mouseButtons.PAN:if(!1===c.enablePan)return;t=e,E.set(t.clientX,t.clientY),m=l.PAN}var t,n,a;e.preventDefault(),m!==l.NONE&&(document.addEventListener("mousemove",D,!1),document.addEventListener("mouseup",B,!1),c.dispatchEvent(d))}}function D(e){if(!1!==c.enabled){switch(m){case l.ROTATE:if(!1===c.enableRotate)return;!function(e){x.set(e.clientX,e.clientY),M.subVectors(x,y);var t=c.domElement===document?c.domElement.body:c.domElement;A(2*Math.PI*M.x/t.clientWidth*c.rotateSpeed),I(2*Math.PI*M.y/t.clientHeight*c.rotateSpeed),y.copy(x),c.update()}(e);break;case l.DOLLY:if(!1===c.enableZoom)return;n=e,j.set(n.clientX,n.clientY),L.subVectors(j,P),0<L.y?z(T()):L.y<0&&R(T()),P.copy(j),c.update();break;case l.PAN:if(!1===c.enablePan)return;t=e,O.set(t.clientX,t.clientY),k.subVectors(O,E),S(k.x,k.y),E.copy(O),c.update()}var t,n;e.preventDefault()}}function B(e){!1!==c.enabled&&(document.removeEventListener("mousemove",D,!1),document.removeEventListener("mouseup",B,!1),c.dispatchEvent(u),m=l.NONE)}function F(e){var t;!1===c.enabled||!1===c.enableZoom||m!==l.NONE&&m!==l.ROTATE||(e.preventDefault(),e.stopPropagation(),(t=e).deltaY<0?R(T()):0<t.deltaY&&z(T()),c.update(),c.dispatchEvent(d),c.dispatchEvent(u))}function Y(e){!1!==c.enabled&&!1!==c.enableKeys&&!1!==c.enablePan&&function(e){switch(e.keyCode){case c.keys.UP:S(0,c.keyPanSpeed),c.update();break;case c.keys.BOTTOM:S(0,-c.keyPanSpeed),c.update();break;case c.keys.LEFT:S(c.keyPanSpeed,0),c.update();break;case c.keys.RIGHT:S(-c.keyPanSpeed,0),c.update()}}(e)}function H(e){if(!1!==c.enabled){switch(e.touches.length){case 1:if(!1===c.enableRotate)return;r=e,y.set(r.touches[0].pageX,r.touches[0].pageY),m=l.TOUCH_ROTATE;break;case 2:if(!1===c.enableZoom)return;a=(n=e).touches[0].pageX-n.touches[1].pageX,i=n.touches[0].pageY-n.touches[1].pageY,o=Math.sqrt(a*a+i*i),P.set(0,o),m=l.TOUCH_DOLLY;break;case 3:if(!1===c.enablePan)return;t=e,E.set(t.touches[0].pageX,t.touches[0].pageY),m=l.TOUCH_PAN;break;default:m=l.NONE}var t,n,a,i,o,r;m!==l.NONE&&c.dispatchEvent(d)}}function X(e){if(!1!==c.enabled){switch(e.touches.length){case 1:if(!1===c.enableRotate)return;if(m!==l.TOUCH_ROTATE)return;!function(e){x.set(e.touches[0].pageX,e.touches[0].pageY),M.subVectors(x,y);var t=c.domElement===document?c.domElement.body:c.domElement;A(2*Math.PI*M.x/t.clientWidth*c.rotateSpeed),I(2*Math.PI*M.y/t.clientHeight*c.rotateSpeed),y.copy(x),c.update()}(e);break;case 2:if(!1===c.enableZoom)return;if(m!==l.TOUCH_DOLLY)return;a=(n=e).touches[0].pageX-n.touches[1].pageX,i=n.touches[0].pageY-n.touches[1].pageY,o=Math.sqrt(a*a+i*i),j.set(0,o),L.subVectors(j,P),0<L.y?R(T()):L.y<0&&z(T()),P.copy(j),c.update();break;case 3:if(!1===c.enablePan)return;if(m!==l.TOUCH_PAN)return;t=e,O.set(t.touches[0].pageX,t.touches[0].pageY),k.subVectors(O,E),S(k.x,k.y),E.copy(O),c.update();break;default:m=l.NONE}var t,n,a,i,o;e.preventDefault(),e.stopPropagation()}}function Z(e){!1!==c.enabled&&(c.dispatchEvent(u),m=l.NONE)}function W(e){!1!==c.enabled&&!1!==c.enablePan&&e.preventDefault()}return c.domElement.addEventListener("contextmenu",W,!1),c.domElement.addEventListener("mousedown",G,!1),c.domElement.addEventListener("wheel",F,!1),c.domElement.addEventListener("touchstart",H,!1),c.domElement.addEventListener("touchend",Z,!1),c.domElement.addEventListener("touchmove",X,!1),window.addEventListener("keydown",Y,!1),s.update(),s}return t(q,e),q}(Q.EventDispatcher);e.SkinObject=r,e.CapeObject=s,e.PlayerObject=c,e.SkinViewer=n,e.OrbitControls=v,e.createOrbitControls=function(e){var t=new v(e.camera,e.renderer.domElement);return t.enablePan=!1,t.target=new Q.Vector3(0,-12,0),t.minDistance=10,t.maxDistance=256,t.update(),t},e.invokeAnimation=h,e.CompositeAnimation=u,e.WalkingAnimation=function(e,t){var n=e.skin;t*=8,n.leftLeg.rotation.x=.5*Math.sin(t),n.rightLeg.rotation.x=.5*Math.sin(t+Math.PI),n.leftArm.rotation.x=.5*Math.sin(t+Math.PI),n.rightArm.rotation.x=.5*Math.sin(t);var a=.02*Math.PI;n.leftArm.rotation.z=.03*Math.cos(t)+a,n.rightArm.rotation.z=.03*Math.cos(t+Math.PI)-a,n.head.rotation.y=.2*Math.sin(t/4),n.head.rotation.x=.1*Math.sin(t/5);var i=.06*Math.PI;e.cape.rotation.x=.06*Math.sin(t/1.5)+i},e.RunningAnimation=function(e,t){var n=e.skin;t*=15,n.leftLeg.rotation.x=1.3*Math.cos(t+Math.PI),n.rightLeg.rotation.x=1.3*Math.cos(t),n.leftArm.rotation.x=1.5*Math.cos(t),n.rightArm.rotation.x=1.5*Math.cos(t+Math.PI);var a=.1*Math.PI;n.leftArm.rotation.z=.1*Math.cos(t)+a,n.rightArm.rotation.z=.1*Math.cos(t+Math.PI)-a,e.position.y=Math.cos(2*t),e.position.x=.15*Math.cos(t),e.rotation.z=.01*Math.cos(t+Math.PI);var i=.3*Math.PI;e.cape.rotation.x=.1*Math.sin(2*t)+i},e.RotatingAnimation=function(e,t){e.rotation.y=t},e.isSlimSkin=g,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=skinview3d.min.js.map

build/skinview3d.module.js

@@ -90,3 +90,3 @@ /**
 
-function addVertices(box, top, bottom, left, front, right, back) {
+function setVertices(box, top, bottom, left, front, right, back) {
 	box.faceVertexUvs[0] = [];
@@ -112,3 +112,3 @@ box.faceVertexUvs[0][0] = [right[3], right[0], right[2]];
 
-	function SkinObject(slim, layer1Material, layer2Material) {
+	function SkinObject(layer1Material, layer2Material) {
 		classCallCheck(this, SkinObject);
@@ -118,3 +118,3 @@
 
-		_this.slim = slim;
+		_this.modelListeners = []; // called when model(slim property) is changed
 
@@ -125,3 +125,3 @@ // Head
 		var headBox = new BoxGeometry(8, 8, 8, 0, 0, 0);
-		addVertices(headBox, toSkinVertices(8, 0, 16, 8), toSkinVertices(16, 0, 24, 8), toSkinVertices(0, 8, 8, 16), toSkinVertices(8, 8, 16, 16), toSkinVertices(16, 8, 24, 16), toSkinVertices(24, 8, 32, 16));
+		setVertices(headBox, toSkinVertices(8, 0, 16, 8), toSkinVertices(16, 0, 24, 8), toSkinVertices(0, 8, 8, 16), toSkinVertices(8, 8, 16, 16), toSkinVertices(16, 8, 24, 16), toSkinVertices(24, 8, 32, 16));
 		var headMesh = new Mesh(headBox, layer1Material);
@@ -131,3 +131,3 @@ _this.head.add(headMesh);
 		var head2Box = new BoxGeometry(9, 9, 9, 0, 0, 0);
-		addVertices(head2Box, toSkinVertices(40, 0, 48, 8), toSkinVertices(48, 0, 56, 8), toSkinVertices(32, 8, 40, 16), toSkinVertices(40, 8, 48, 16), toSkinVertices(48, 8, 56, 16), toSkinVertices(56, 8, 64, 16));
+		setVertices(head2Box, toSkinVertices(40, 0, 48, 8), toSkinVertices(48, 0, 56, 8), toSkinVertices(32, 8, 40, 16), toSkinVertices(40, 8, 48, 16), toSkinVertices(48, 8, 56, 16), toSkinVertices(56, 8, 64, 16));
 		var head2Mesh = new Mesh(head2Box, layer2Material);
@@ -143,3 +143,3 @@ head2Mesh.renderOrder = -1;
 		var bodyBox = new BoxGeometry(8, 12, 4, 0, 0, 0);
-		addVertices(bodyBox, toSkinVertices(20, 16, 28, 20), toSkinVertices(28, 16, 36, 20), toSkinVertices(16, 20, 20, 32), toSkinVertices(20, 20, 28, 32), toSkinVertices(28, 20, 32, 32), toSkinVertices(32, 20, 40, 32));
+		setVertices(bodyBox, toSkinVertices(20, 16, 28, 20), toSkinVertices(28, 16, 36, 20), toSkinVertices(16, 20, 20, 32), toSkinVertices(20, 20, 28, 32), toSkinVertices(28, 20, 32, 32), toSkinVertices(32, 20, 40, 32));
 		var bodyMesh = new Mesh(bodyBox, layer1Material);
@@ -149,3 +149,3 @@ _this.body.add(bodyMesh);
 		var body2Box = new BoxGeometry(9, 13.5, 4.5, 0, 0, 0);
-		addVertices(body2Box, toSkinVertices(20, 32, 28, 36), toSkinVertices(28, 32, 36, 36), toSkinVertices(16, 36, 20, 48), toSkinVertices(20, 36, 28, 48), toSkinVertices(28, 36, 32, 48), toSkinVertices(32, 36, 40, 48));
+		setVertices(body2Box, toSkinVertices(20, 32, 28, 36), toSkinVertices(28, 32, 36, 36), toSkinVertices(16, 36, 20, 48), toSkinVertices(20, 36, 28, 48), toSkinVertices(28, 36, 32, 48), toSkinVertices(32, 36, 40, 48));
 		var body2Mesh = new Mesh(body2Box, layer2Material);
@@ -161,20 +161,34 @@ _this.body.add(body2Mesh);
 
-		var rightArmBox = new BoxGeometry((slim ? 3 : 4) - esp, 12 - esp, 4 - esp, 0, 0, 0);
-		if (slim) {
-			addVertices(rightArmBox, toSkinVertices(44, 16, 47, 20), toSkinVertices(47, 16, 50, 20), toSkinVertices(40, 20, 44, 32), toSkinVertices(44, 20, 47, 32), toSkinVertices(47, 20, 51, 32), toSkinVertices(51, 20, 54, 32));
-		} else {
-			addVertices(rightArmBox, toSkinVertices(44, 16, 48, 20), toSkinVertices(48, 16, 52, 20), toSkinVertices(40, 20, 44, 32), toSkinVertices(44, 20, 48, 32), toSkinVertices(48, 20, 52, 32), toSkinVertices(52, 20, 56, 32));
-		}
+		var rightArmBox = new BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
 		var rightArmMesh = new Mesh(rightArmBox, layer1Material);
 		rightArmPivot.add(rightArmMesh);
+		_this.modelListeners.push(function () {
+			rightArmMesh.scale.x = (_this.slim ? 3 : 4) - esp;
+			rightArmMesh.scale.y = 12 - esp;
+			rightArmMesh.scale.z = 4 - esp;
+			if (_this.slim) {
+				setVertices(rightArmBox, toSkinVertices(44, 16, 47, 20), toSkinVertices(47, 16, 50, 20), toSkinVertices(40, 20, 44, 32), toSkinVertices(44, 20, 47, 32), toSkinVertices(47, 20, 51, 32), toSkinVertices(51, 20, 54, 32));
+			} else {
+				setVertices(rightArmBox, toSkinVertices(44, 16, 48, 20), toSkinVertices(48, 16, 52, 20), toSkinVertices(40, 20, 44, 32), toSkinVertices(44, 20, 48, 32), toSkinVertices(48, 20, 52, 32), toSkinVertices(52, 20, 56, 32));
+			}
+			rightArmBox.uvsNeedUpdate = true;
+			rightArmBox.elementsNeedUpdate = true;
+		});
 
-		var rightArm2Box = new BoxGeometry((slim ? 3.375 : 4.5) - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0);
-		if (slim) {
-			addVertices(rightArm2Box, toSkinVertices(44, 32, 47, 36), toSkinVertices(47, 32, 50, 36), toSkinVertices(40, 36, 44, 48), toSkinVertices(44, 36, 47, 48), toSkinVertices(47, 36, 51, 48), toSkinVertices(51, 36, 54, 48));
-		} else {
-			addVertices(rightArm2Box, toSkinVertices(44, 32, 48, 36), toSkinVertices(48, 32, 52, 36), toSkinVertices(40, 36, 44, 48), toSkinVertices(44, 36, 48, 48), toSkinVertices(48, 36, 52, 48), toSkinVertices(52, 36, 56, 48));
-		}
+		var rightArm2Box = new BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
 		var rightArm2Mesh = new Mesh(rightArm2Box, layer2Material);
 		rightArm2Mesh.renderOrder = 1;
 		rightArmPivot.add(rightArm2Mesh);
+		_this.modelListeners.push(function () {
+			rightArm2Mesh.scale.x = (_this.slim ? 3.375 : 4.5) - esp;
+			rightArm2Mesh.scale.y = 13.5 - esp;
+			rightArm2Mesh.scale.z = 4.5 - esp;
+			if (_this.slim) {
+				setVertices(rightArm2Box, toSkinVertices(44, 32, 47, 36), toSkinVertices(47, 32, 50, 36), toSkinVertices(40, 36, 44, 48), toSkinVertices(44, 36, 47, 48), toSkinVertices(47, 36, 51, 48), toSkinVertices(51, 36, 54, 48));
+			} else {
+				setVertices(rightArm2Box, toSkinVertices(44, 32, 48, 36), toSkinVertices(48, 32, 52, 36), toSkinVertices(40, 36, 44, 48), toSkinVertices(44, 36, 48, 48), toSkinVertices(48, 36, 52, 48), toSkinVertices(52, 36, 56, 48));
+			}
+			rightArm2Box.uvsNeedUpdate = true;
+			rightArm2Box.elementsNeedUpdate = true;
+		});
 
@@ -184,3 +198,5 @@ rightArmPivot.position.y = -6;
 		_this.rightArm.position.y = -4;
-		_this.rightArm.position.x = slim ? -5.5 : -6;
+		_this.modelListeners.push(function () {
+			_this.rightArm.position.x = _this.slim ? -5.5 : -6;
+		});
 		_this.add(_this.rightArm);
@@ -192,20 +208,34 @@
 
-		var leftArmBox = new BoxGeometry((slim ? 3 : 4) - esp, 12 - esp, 4 - esp, 0, 0, 0);
-		if (slim) {
-			addVertices(leftArmBox, toSkinVertices(36, 48, 39, 52), toSkinVertices(39, 48, 42, 52), toSkinVertices(32, 52, 36, 64), toSkinVertices(36, 52, 39, 64), toSkinVertices(39, 52, 43, 64), toSkinVertices(43, 52, 46, 64));
-		} else {
-			addVertices(leftArmBox, toSkinVertices(36, 48, 40, 52), toSkinVertices(40, 48, 44, 52), toSkinVertices(32, 52, 36, 64), toSkinVertices(36, 52, 40, 64), toSkinVertices(40, 52, 44, 64), toSkinVertices(44, 52, 48, 64));
-		}
+		var leftArmBox = new BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
 		var leftArmMesh = new Mesh(leftArmBox, layer1Material);
 		leftArmPivot.add(leftArmMesh);
+		_this.modelListeners.push(function () {
+			leftArmMesh.scale.x = (_this.slim ? 3 : 4) - esp;
+			leftArmMesh.scale.y = 12 - esp;
+			leftArmMesh.scale.z = 4 - esp;
+			if (_this.slim) {
+				setVertices(leftArmBox, toSkinVertices(36, 48, 39, 52), toSkinVertices(39, 48, 42, 52), toSkinVertices(32, 52, 36, 64), toSkinVertices(36, 52, 39, 64), toSkinVertices(39, 52, 43, 64), toSkinVertices(43, 52, 46, 64));
+			} else {
+				setVertices(leftArmBox, toSkinVertices(36, 48, 40, 52), toSkinVertices(40, 48, 44, 52), toSkinVertices(32, 52, 36, 64), toSkinVertices(36, 52, 40, 64), toSkinVertices(40, 52, 44, 64), toSkinVertices(44, 52, 48, 64));
+			}
+			leftArmBox.uvsNeedUpdate = true;
+			leftArmBox.elementsNeedUpdate = true;
+		});
 
-		var leftArm2Box = new BoxGeometry((slim ? 3.375 : 4.5) - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0);
-		if (slim) {
-			addVertices(leftArm2Box, toSkinVertices(52, 48, 55, 52), toSkinVertices(55, 48, 58, 52), toSkinVertices(48, 52, 52, 64), toSkinVertices(52, 52, 55, 64), toSkinVertices(55, 52, 59, 64), toSkinVertices(59, 52, 62, 64));
-		} else {
-			addVertices(leftArm2Box, toSkinVertices(52, 48, 56, 52), toSkinVertices(56, 48, 60, 52), toSkinVertices(48, 52, 52, 64), toSkinVertices(52, 52, 56, 64), toSkinVertices(56, 52, 60, 64), toSkinVertices(60, 52, 64, 64));
-		}
+		var leftArm2Box = new BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
 		var leftArm2Mesh = new Mesh(leftArm2Box, layer2Material);
 		leftArm2Mesh.renderOrder = 1;
 		leftArmPivot.add(leftArm2Mesh);
+		_this.modelListeners.push(function () {
+			leftArm2Mesh.scale.x = (_this.slim ? 3.375 : 4.5) - esp;
+			leftArm2Mesh.scale.y = 13.5 - esp;
+			leftArm2Mesh.scale.z = 4.5 - esp;
+			if (_this.slim) {
+				setVertices(leftArm2Box, toSkinVertices(52, 48, 55, 52), toSkinVertices(55, 48, 58, 52), toSkinVertices(48, 52, 52, 64), toSkinVertices(52, 52, 55, 64), toSkinVertices(55, 52, 59, 64), toSkinVertices(59, 52, 62, 64));
+			} else {
+				setVertices(leftArm2Box, toSkinVertices(52, 48, 56, 52), toSkinVertices(56, 48, 60, 52), toSkinVertices(48, 52, 52, 64), toSkinVertices(52, 52, 56, 64), toSkinVertices(56, 52, 60, 64), toSkinVertices(60, 52, 64, 64));
+			}
+			leftArm2Box.uvsNeedUpdate = true;
+			leftArm2Box.elementsNeedUpdate = true;
+		});
 
@@ -215,3 +245,5 @@ leftArmPivot.position.y = -6;
 		_this.leftArm.position.y = -4;
-		_this.leftArm.position.x = slim ? 5.5 : 6;
+		_this.modelListeners.push(function () {
+			_this.leftArm.position.x = _this.slim ? 5.5 : 6;
+		});
 		_this.add(_this.leftArm);
@@ -224,3 +256,3 @@
 		var rightLegBox = new BoxGeometry(4 - esp, 12 - esp, 4 - esp, 0, 0, 0);
-		addVertices(rightLegBox, toSkinVertices(4, 16, 8, 20), toSkinVertices(8, 16, 12, 20), toSkinVertices(0, 20, 4, 32), toSkinVertices(4, 20, 8, 32), toSkinVertices(8, 20, 12, 32), toSkinVertices(12, 20, 16, 32));
+		setVertices(rightLegBox, toSkinVertices(4, 16, 8, 20), toSkinVertices(8, 16, 12, 20), toSkinVertices(0, 20, 4, 32), toSkinVertices(4, 20, 8, 32), toSkinVertices(8, 20, 12, 32), toSkinVertices(12, 20, 16, 32));
 		var rightLegMesh = new Mesh(rightLegBox, layer1Material);
@@ -230,3 +262,3 @@ rightLegPivot.add(rightLegMesh);
 		var rightLeg2Box = new BoxGeometry(4.5 - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0);
-		addVertices(rightLeg2Box, toSkinVertices(4, 32, 8, 36), toSkinVertices(8, 32, 12, 36), toSkinVertices(0, 36, 4, 48), toSkinVertices(4, 36, 8, 48), toSkinVertices(8, 36, 12, 48), toSkinVertices(12, 36, 16, 48));
+		setVertices(rightLeg2Box, toSkinVertices(4, 32, 8, 36), toSkinVertices(8, 32, 12, 36), toSkinVertices(0, 36, 4, 48), toSkinVertices(4, 36, 8, 48), toSkinVertices(8, 36, 12, 48), toSkinVertices(12, 36, 16, 48));
 		var rightLeg2Mesh = new Mesh(rightLeg2Box, layer2Material);
@@ -247,3 +279,3 @@ rightLeg2Mesh.renderOrder = 1;
 		var leftLegBox = new BoxGeometry(4 - esp, 12 - esp, 4 - esp, 0, 0, 0);
-		addVertices(leftLegBox, toSkinVertices(20, 48, 24, 52), toSkinVertices(24, 48, 28, 52), toSkinVertices(16, 52, 20, 64), toSkinVertices(20, 52, 24, 64), toSkinVertices(24, 52, 28, 64), toSkinVertices(28, 52, 32, 64));
+		setVertices(leftLegBox, toSkinVertices(20, 48, 24, 52), toSkinVertices(24, 48, 28, 52), toSkinVertices(16, 52, 20, 64), toSkinVertices(20, 52, 24, 64), toSkinVertices(24, 52, 28, 64), toSkinVertices(28, 52, 32, 64));
 		var leftLegMesh = new Mesh(leftLegBox, layer1Material);
@@ -253,3 +285,3 @@ leftLegPivot.add(leftLegMesh);
 		var leftLeg2Box = new BoxGeometry(4.5 - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0);
-		addVertices(leftLeg2Box, toSkinVertices(4, 48, 8, 52), toSkinVertices(8, 48, 12, 52), toSkinVertices(0, 52, 4, 64), toSkinVertices(4, 52, 8, 64), toSkinVertices(8, 52, 12, 64), toSkinVertices(12, 52, 16, 64));
+		setVertices(leftLeg2Box, toSkinVertices(4, 48, 8, 52), toSkinVertices(8, 48, 12, 52), toSkinVertices(0, 52, 4, 64), toSkinVertices(4, 52, 8, 64), toSkinVertices(8, 52, 12, 64), toSkinVertices(12, 52, 16, 64));
 		var leftLeg2Mesh = new Mesh(leftLeg2Box, layer2Material);
@@ -264,5 +296,21 @@ leftLeg2Mesh.renderOrder = 1;
 		_this.add(_this.leftLeg);
+
+		_this.slim = false;
 		return _this;
 	}
 
+	createClass(SkinObject, [{
+		key: "slim",
+		get: function get$$1() {
+			return this._slim;
+		},
+		set: function set$$1(value) {
+			if (this._slim !== value) {
+				this._slim = value;
+				this.modelListeners.forEach(function (listener) {
+					return listener();
+				});
+			}
+		}
+	}]);
 	return SkinObject;
@@ -282,3 +330,3 @@ }(Group);
 		var capeBox = new BoxGeometry(10, 16, 1, 0, 0, 0);
-		addVertices(capeBox, toCapeVertices(1, 0, 11, 1), toCapeVertices(11, 0, 21, 1), toCapeVertices(11, 1, 12, 17), toCapeVertices(12, 1, 22, 17), toCapeVertices(0, 1, 1, 17), toCapeVertices(1, 1, 11, 17));
+		setVertices(capeBox, toCapeVertices(1, 0, 11, 1), toCapeVertices(11, 0, 21, 1), toCapeVertices(11, 1, 12, 17), toCapeVertices(12, 1, 22, 17), toCapeVertices(0, 1, 1, 17), toCapeVertices(1, 1, 11, 17));
 		_this2.cape = new Mesh(capeBox, capeMaterial);
@@ -297,3 +345,3 @@ _this2.cape.position.y = -8;
 
-	function PlayerObject(slim, layer1Material, layer2Material, capeMaterial) {
+	function PlayerObject(layer1Material, layer2Material, capeMaterial) {
 		classCallCheck(this, PlayerObject);
@@ -303,3 +351,3 @@
 
-		_this3.skin = new SkinObject(slim, layer1Material, layer2Material);
+		_this3.skin = new SkinObject(layer1Material, layer2Material);
 		_this3.skin.visible = false;
@@ -496,22 +544,168 @@ _this3.add(_this3.skin);
 
+function hasTransparency(context, x0, y0, w, h) {
+	var imgData = context.getImageData(x0, y0, w, h);
+	for (var x = 0; x < w; x++) {
+		for (var y = 0; y < h; y++) {
+			var offset = (x + y * w) * 4;
+			if (imgData.data[offset + 3] !== 0xff) {
+				return true;
+			}
+		}
+	}
+	return false;
+}
+
+function computeSkinScale(width) {
+	return width / 64.0;
+}
+
+function fixOpaqueSkin(context, width) {
+	// Some ancient skins don't have transparent pixels (nor have helm).
+	// We have to make the helm area transparent, otherwise it will be rendered as black.
+	if (!hasTransparency(context, 0, 0, width, width / 2)) {
+		var scale = computeSkinScale(width);
+		var clearArea = function clearArea(x, y, w, h) {
+			return context.clearRect(x * scale, y * scale, w * scale, h * scale);
+		};
+		clearArea(40, 0, 8, 8); // Helm Top
+		clearArea(48, 0, 8, 8); // Helm Bottom
+		clearArea(32, 8, 8, 8); // Helm Right
+		clearArea(40, 8, 8, 8); // Helm Front
+		clearArea(48, 8, 8, 8); // Helm Left
+		clearArea(56, 8, 8, 8); // Helm Back
+	}
+}
+
 function convertSkinTo1_8(context, width) {
-	var scale = width / 64.0;
-	var copySkin = function copySkin(context, sX, sY, w, h, dX, dY, flipHorizontal) {
+	var scale = computeSkinScale(width);
+	var copySkin = function copySkin(sX, sY, w, h, dX, dY, flipHorizontal) {
 		return copyImage(context, sX * scale, sY * scale, w * scale, h * scale, dX * scale, dY * scale, flipHorizontal);
 	};
 
-	copySkin(context, 4, 16, 4, 4, 20, 48, true); // Top Leg
-	copySkin(context, 8, 16, 4, 4, 24, 48, true); // Bottom Leg
-	copySkin(context, 0, 20, 4, 12, 24, 52, true); // Outer Leg
-	copySkin(context, 4, 20, 4, 12, 20, 52, true); // Front Leg
-	copySkin(context, 8, 20, 4, 12, 16, 52, true); // Inner Leg
-	copySkin(context, 12, 20, 4, 12, 28, 52, true); // Back Leg
-	copySkin(context, 44, 16, 4, 4, 36, 48, true); // Top Arm
-	copySkin(context, 48, 16, 4, 4, 40, 48, true); // Bottom Arm
-	copySkin(context, 40, 20, 4, 12, 40, 52, true); // Outer Arm
-	copySkin(context, 44, 20, 4, 12, 36, 52, true); // Front Arm
-	copySkin(context, 48, 20, 4, 12, 32, 52, true); // Inner Arm
-	copySkin(context, 52, 20, 4, 12, 44, 52, true); // Back Arm
+	fixOpaqueSkin(context, width);
+
+	copySkin(4, 16, 4, 4, 20, 48, true); // Top Leg
+	copySkin(8, 16, 4, 4, 24, 48, true); // Bottom Leg
+	copySkin(0, 20, 4, 12, 24, 52, true); // Outer Leg
+	copySkin(4, 20, 4, 12, 20, 52, true); // Front Leg
+	copySkin(8, 20, 4, 12, 16, 52, true); // Inner Leg
+	copySkin(12, 20, 4, 12, 28, 52, true); // Back Leg
+	copySkin(44, 16, 4, 4, 36, 48, true); // Top Arm
+	copySkin(48, 16, 4, 4, 40, 48, true); // Bottom Arm
+	copySkin(40, 20, 4, 12, 40, 52, true); // Outer Arm
+	copySkin(44, 20, 4, 12, 36, 52, true); // Front Arm
+	copySkin(48, 20, 4, 12, 32, 52, true); // Inner Arm
+	copySkin(52, 20, 4, 12, 44, 52, true); // Back Arm
 }
 
+function loadSkinToCanvas(canvas, image) {
+	var isOldFormat = false;
+	if (image.width !== image.height) {
+		if (image.width === 2 * image.height) {
+			isOldFormat = true;
+		} else {
+			throw "Bad skin size: " + image.width + "x" + image.height;
+		}
+	}
+
+	var context = canvas.getContext("2d");
+	if (isOldFormat) {
+		var sideLength = image.width;
+		canvas.width = sideLength;
+		canvas.height = sideLength;
+		context.clearRect(0, 0, sideLength, sideLength);
+		context.drawImage(image, 0, 0, sideLength, sideLength / 2.0);
+		convertSkinTo1_8(context, sideLength);
+	} else {
+		canvas.width = image.width;
+		canvas.height = image.height;
+		context.clearRect(0, 0, image.width, image.height);
+		context.drawImage(image, 0, 0, canvas.width, canvas.height);
+	}
+}
+
+function loadCapeToCanvas(canvas, image) {
+	var isOldFormat = false;
+	if (image.width !== 2 * image.height) {
+		if (image.width * 17 == image.height * 22) {
+			// width/height = 22/17
+			isOldFormat = true;
+		} else {
+			throw "Bad cape size: " + image.width + "x" + image.height;
+		}
+	}
+
+	var context = canvas.getContext("2d");
+	if (isOldFormat) {
+		var width = image.width * 64 / 22;
+		canvas.width = width;
+		canvas.height = width / 2;
+	} else {
+		canvas.width = image.width;
+		canvas.height = image.height;
+	}
+	context.clearRect(0, 0, canvas.width, canvas.height);
+	context.drawImage(image, 0, 0, image.width, image.height);
+}
+
+function isSlimSkin(canvasOrImage) {
+	// Detects whether the skin is default or slim.
+	//
+	// The right arm area of *default* skins:
+	// (44,16)->*-------*-------*
+	// (40,20)  |top    |bottom |
+	// \|/      |4x4    |4x4    |
+	//  *-------*-------*-------*-------*
+	//  |right  |front  |left   |back   |
+	//  |4x12   |4x12   |4x12   |4x12   |
+	//  *-------*-------*-------*-------*
+	// The right arm area of *slim* skins:
+	// (44,16)->*------*------*-*
+	// (40,20)  |top   |bottom| |<----[x0=50,y0=16,w=2,h=4]
+	// \|/      |3x4   |3x4   | |
+	//  *-------*------*------***-----*-*
+	//  |right  |front |left   |back  | |<----[x0=54,y0=20,w=2,h=12]
+	//  |4x12   |3x12  |4x12   |3x12  | |
+	//  *-------*------*-------*------*-*
+	// Compared with default right arms, slim right arms have 2 unused areas.
+	//
+	// The same is true for left arm:
+	// The left arm area of *default* skins:
+	// (36,48)->*-------*-------*
+	// (32,52)  |top    |bottom |
+	// \|/      |4x4    |4x4    |
+	//  *-------*-------*-------*-------*
+	//  |right  |front  |left   |back   |
+	//  |4x12   |4x12   |4x12   |4x12   |
+	//  *-------*-------*-------*-------*
+	// The left arm area of *slim* skins:
+	// (36,48)->*------*------*-*
+	// (32,52)  |top   |bottom| |<----[x0=42,y0=48,w=2,h=4]
+	// \|/      |3x4   |3x4   | |
+	//  *-------*------*------***-----*-*
+	//  |right  |front |left   |back  | |<----[x0=46,y0=52,w=2,h=12]
+	//  |4x12   |3x12  |4x12   |3x12  | |
+	//  *-------*------*-------*------*-*
+	//
+	// If there is a transparent pixel in any of the 4 unused areas, the skin must be slim,
+	// as transparent pixels are not allowed in the first layer.
+
+	if (canvasOrImage instanceof HTMLCanvasElement) {
+		var canvas = canvasOrImage;
+		var scale = computeSkinScale(canvas.width);
+		var context = canvas.getContext("2d");
+		var checkArea = function checkArea(x, y, w, h) {
+			return hasTransparency(context, x * scale, y * scale, w * scale, h * scale);
+		};
+		return checkArea(50, 16, 2, 4) || checkArea(54, 20, 2, 12) || checkArea(42, 48, 2, 4) || checkArea(46, 52, 2, 12);
+	} else if (canvasOrImage instanceof HTMLImageElement) {
+		var image = canvasOrImage;
+		var _canvas = document.createElement("canvas");
+		loadSkinToCanvas(_canvas, image);
+		return isSlimSkin(_canvas);
+	} else {
+		throw "Illegal argument: " + canvasOrImage;
+	}
+}
+
 var SkinViewer = function () {
@@ -525,2 +719,3 @@ function SkinViewer(options) {
 		this.animation = options.animation || null;
+		this.detectModel = options.animation !== false; // true by default
 		this.animationPaused = false;
@@ -562,3 +757,3 @@ this.animationTime = 0;
 
-		this.playerObject = new PlayerObject(options.slim === true, this.layer1Material, this.layer2Material, this.capeMaterial);
+		this.playerObject = new PlayerObject(this.layer1Material, this.layer2Material, this.capeMaterial);
 		this.scene.add(this.playerObject);
@@ -572,25 +767,6 @@
 		this.skinImg.onload = function () {
-			var isOldFormat = false;
-			if (_this.skinImg.width !== _this.skinImg.height) {
-				if (_this.skinImg.width === 2 * _this.skinImg.height) {
-					isOldFormat = true;
-				} else {
-					console.error("Bad skin size");
-					return;
-				}
-			}
+			loadSkinToCanvas(_this.skinCanvas, _this.skinImg);
 
-			var skinContext = _this.skinCanvas.getContext("2d");
-			if (isOldFormat) {
-				var width = _this.skinImg.width;
-				_this.skinCanvas.width = width;
-				_this.skinCanvas.height = width;
-				skinContext.clearRect(0, 0, width, width);
-				skinContext.drawImage(_this.skinImg, 0, 0, width, width / 2.0);
-				convertSkinTo1_8(skinContext, width);
-			} else {
-				_this.skinCanvas.width = _this.skinImg.width;
-				_this.skinCanvas.height = _this.skinImg.height;
-				skinContext.clearRect(0, 0, _this.skinCanvas.width, _this.skinCanvas.height);
-				skinContext.drawImage(_this.skinImg, 0, 0, _this.skinCanvas.width, _this.skinCanvas.height);
+			if (_this.detectModel) {
+				_this.playerObject.skin.slim = isSlimSkin(_this.skinCanvas);
 			}
@@ -610,25 +786,4 @@
 		this.capeImg.onload = function () {
-			var isOldFormat = false;
-			if (_this.capeImg.width !== 2 * _this.capeImg.height) {
-				if (_this.capeImg.width * 17 == _this.capeImg.height * 22) {
-					// width/height = 22/17
-					isOldFormat = true;
-				} else {
-					console.error("Bad cape size");
-					return;
-				}
-			}
+			loadCapeToCanvas(_this.capeCanvas, _this.capeImg);
 
-			var capeContext = _this.capeCanvas.getContext("2d");
-			if (isOldFormat) {
-				var width = _this.capeImg.width * 64 / 22;
-				_this.capeCanvas.width = width;
-				_this.capeCanvas.height = width / 2;
-			} else {
-				_this.capeCanvas.width = _this.capeImg.width;
-				_this.capeCanvas.height = _this.capeImg.height;
-			}
-			capeContext.clearRect(0, 0, _this.capeCanvas.width, _this.capeCanvas.height);
-			capeContext.drawImage(_this.capeImg, 0, 0, _this.capeImg.width, _this.capeImg.height);
-
 			_this.capeTexture.needsUpdate = true;
@@ -1289,3 +1444,3 @@ _this.capeMaterial.needsUpdate = true;
 
-export { SkinObject, CapeObject, PlayerObject, SkinViewer, OrbitControls, createOrbitControls, invokeAnimation, CompositeAnimation, WalkingAnimation, RunningAnimation, RotatingAnimation };
+export { SkinObject, CapeObject, PlayerObject, SkinViewer, OrbitControls, createOrbitControls, invokeAnimation, CompositeAnimation, WalkingAnimation, RunningAnimation, RotatingAnimation, isSlimSkin };
 //# sourceMappingURL=skinview3d.module.js.map

package.json

 {
 	"name": "skinview3d",
-	"version": "1.1.0-alpha.3",
+	"version": "1.1.0-alpha.4",
 	"description": "Three.js powered Minecraft skin viewer",
@@ -11,3 +11,4 @@ "module": "build/skinview3d.module.js",
 		"prepare": "npm test && rm -rf build && npm run build",
-		"test": "eslint src/** tools/** && tslint -c tslint.json types/**.ts",
+		"test": "karma start && npm run lint",
+		"lint": "eslint src/** tools/** && tslint -c tslint.json types/**.ts",
 		"dev": "npm-run-all --parallel watch serve",
@@ -19,3 +20,3 @@ "watch": "rollup -w -c tools/rollup.browser.js",
 		"type": "git",
-		"url": "git+https://github.com/to2mbn/skinview3d.git"
+		"url": "git+https://github.com/bs-community/skinview3d.git"
 	},
@@ -31,25 +32,38 @@ "author": "Haowei Wen <[e-mail]> (https://github.com/yushijinhun)",
 	"bugs": {
-		"url": "https://github.com/to2mbn/skinview3d/issues"
+		"url": "https://github.com/bs-community/skinview3d/issues"
 	},
-	"homepage": "https://github.com/to2mbn/skinview3d",
+	"homepage": "https://github.com/bs-community/skinview3d",
+	"files": [
+		"types",
+		"build"
+	],
 	"dependencies": {
-		"three": "^0.92.0"
+		"three": "^0.94.0"
 	},
 	"devDependencies": {
-		"@types/three": "^0.91.11",
+		"@types/three": "^0.92.12",
 		"babel-cli": "^6.26.0",
 		"babel-plugin-external-helpers": "^6.22.0",
-		"babel-preset-env": "^1.6.1",
-		"eslint": "^4.19.1",
-		"local-web-server": "^2.5.2",
+		"babel-preset-env": "^1.7.0",
+		"chai": "^4.1.2",
+		"eslint": "^5.0.1",
+		"karma": "^2.0.4",
+		"karma-chrome-launcher": "^2.2.0",
+		"karma-mocha": "^1.3.0",
+		"karma-webpack": "^3.0.0",
+		"local-web-server": "^2.5.4",
+		"mocha": "^5.2.0",
 		"npm-run-all": "^4.1.2",
-		"rollup": "^0.58.2",
+		"puppeteer": "^1.5.0",
+		"rollup": "^0.62.0",
 		"rollup-plugin-babel": "^3.0.4",
-		"rollup-plugin-license": "^0.6.0",
+		"rollup-plugin-license": "^0.7.0",
 		"rollup-plugin-node-resolve": "^3.3.0",
-		"rollup-plugin-uglify": "^3.0.0",
+		"rollup-plugin-uglify": "^4.0.0",
 		"tslint": "^5.10.0",
 		"typescript": "^2.8.3",
-		"uglify-es": "^3.3.10"
+		"uglify-es": "^3.3.10",
+		"url-loader": "^1.0.1",
+		"webpack": "^4.15.1"
 	}
 }

README.md

 skinview3d
 ========
 
-[![Travis](https://img.shields.io/travis/to2mbn/skinview3d.svg?style=flat-square)](https://travis-ci.org/to2mbn/skinview3d)
+[![Travis](https://img.shields.io/travis/bs-community/skinview3d.svg?style=flat-square)](https://travis-ci.org/bs-community/skinview3d)
 [![npm](https://img.shields.io/npm/v/skinview3d.svg?style=flat-square)](https://www.npmjs.com/package/skinview3d)
-[![license](https://img.shields.io/badge/license-MIT-yellowgreen.svg?style=flat-square)](https://github.com/to2mbn/skinview3d/blob/master/LICENSE)
+[![license](https://img.shields.io/badge/license-MIT-yellowgreen.svg?style=flat-square)](https://github.com/bs-community/skinview3d/blob/master/LICENSE)
 [![Gitter chat](https://img.shields.io/gitter/room/TechnologyAdvice/Stardust.svg?style=flat-square)](https://gitter.im/skinview3d/Lobby)
@@ -15,6 +15,7 @@
 * Capes
-* Slim arms
+* Slim Arms
+  * Automatic model detection (Slim / Default)
 
 # Usage
-[Examples of using the viewer](https://to2mbn.github.io/skinview3d/)
+[Examples of using the viewer](https://bs-community.github.io/skinview3d/)
 ```html
@@ -25,3 +26,2 @@ <div id="skin_container"></div>
 		domElement: document.getElementById("skin_container"),
-		slim: true,
 		width: 600,
@@ -28,0 +28,0 @@ height: 600,

types/model.d.ts

 import * as THREE from "three";
 
 export class SkinObject extends THREE.Group {
-	public readonly slim: boolean;
+	public slim: boolean;
 	public readonly head: THREE.Group;
@@ -13,3 +13,2 @@ public readonly body: THREE.Group;
 	constructor(
-		slim: boolean,
 		layer1Material: THREE.Material,
@@ -31,3 +30,2 @@ layer2Material: THREE.Material,
 	constructor(
-		slim: boolean,
 		layer1Material: THREE.Material,
@@ -34,0 +32,0 @@ layer2Material: THREE.Material,

types/skinview3d.d.ts

@@ -5,1 +5,2 @@ export * from "./model";
 export * from "./orbit_controls";
+export * from "./utils";

types/viewer.d.ts

@@ -8,3 +8,2 @@ import * as THREE from "three";
 	animation?: Animation;
-	slim?: boolean;
 	skinUrl?: string;
@@ -14,2 +13,3 @@ capeUrl?: string;
 	height?: number;
+	detectModel?: boolean;
 }
@@ -27,2 +27,3 @@
 	public animationTime: number;
+	public detectModel: boolean;
 	public readonly playerObject: PlayerObject;
@@ -29,0 +30,0 @@ public readonly scene: THREE.Scene;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

417591

decreased by-3.35%

Dev dependency count

24

increased by60%

Number of package files

15

decreased by-53.12%

Lines of code

2851

decreased by-27.08%

Dependency changes

• + Addedthree@0.94.0(transitive)

• - Removedthree@0.92.0(transitive)

• Updatedthree@^0.94.0