update codebase

index.html

@@ -56,7 +56,7 @@
 		</ul>
 	</p>
 
-	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
+	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>
 	<script type="text/javascript" src="js/build/skinview3d.min.js"></script>
 	<script type="text/javascript" src="js/example.js"></script>
 	<script>

js/build/revision

@@ -1 +1 @@
-482f7e8d96080b8ce6374fdc40d7a0b2eb3d549c
+95661cc2944b793469d26c9012724ca127cacc4e

js/build/skinview3d.js

@@ -91,7 +91,7 @@
 		return toFaceVertices(x1, y1, x2, y2, 64.0, 32.0);
 	}
 
-	function addVertices(box, top, bottom, left, front, right, back) {
+	function setVertices(box, top, bottom, left, front, right, back) {
 		box.faceVertexUvs[0] = [];
 		box.faceVertexUvs[0][0] = [right[3], right[0], right[2]];
 		box.faceVertexUvs[0][1] = [right[0], right[1], right[2]];
@@ -112,23 +112,23 @@
 	var SkinObject = function (_THREE$Group) {
 		inherits(SkinObject, _THREE$Group);
 
-		function SkinObject(slim, layer1Material, layer2Material) {
+		function SkinObject(layer1Material, layer2Material) {
 			classCallCheck(this, SkinObject);
 
 			var _this = possibleConstructorReturn(this, (SkinObject.__proto__ || Object.getPrototypeOf(SkinObject)).call(this));
 
-			_this.slim = slim;
+			_this.modelListeners = []; // called when model(slim property) is changed
 
 			// Head
 			_this.head = new THREE.Group();
 
 			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);
 			_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);
 			head2Mesh.renderOrder = -1;
 			_this.head.add(head2Mesh);
@@ -139,12 +139,12 @@
 			_this.body = new THREE.Group();
 
 			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);
 			_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);
 			_this.body.add(body2Mesh);
 
@@ -155,58 +155,90 @@
 			_this.rightArm = new THREE.Group();
 			var rightArmPivot = new THREE.Group();
 
-			var rightArmBox = new THREE.BoxGeometry((slim ? 3 : 4) - esp, 12 - esp, 4 - esp, 0, 0, 0);
+			var rightArmBox = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
-			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 rightArmMesh = new THREE.Mesh(rightArmBox, layer1Material);
 			rightArmPivot.add(rightArmMesh);
-
+			_this.modelListeners.push(function () {
-			var rightArm2Box = new THREE.BoxGeometry((slim ? 3.375 : 4.5) - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0);
+				rightArmMesh.scale.x = (_this.slim ? 3 : 4) - esp;
-			if (slim) {
+				rightArmMesh.scale.y = 12 - esp;
-				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));
+				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 {
-				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));
+					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(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;
+			});
 
 			rightArmPivot.position.y = -6;
 			_this.rightArm.add(rightArmPivot);
 			_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);
 
 			// Left Arm
 			_this.leftArm = new THREE.Group();
 			var leftArmPivot = new THREE.Group();
 
-			var leftArmBox = new THREE.BoxGeometry((slim ? 3 : 4) - esp, 12 - esp, 4 - esp, 0, 0, 0);
+			var leftArmBox = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
-			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 leftArmMesh = new THREE.Mesh(leftArmBox, layer1Material);
 			leftArmPivot.add(leftArmMesh);
-
+			_this.modelListeners.push(function () {
-			var leftArm2Box = new THREE.BoxGeometry((slim ? 3.375 : 4.5) - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0);
+				leftArmMesh.scale.x = (_this.slim ? 3 : 4) - esp;
-			if (slim) {
+				leftArmMesh.scale.y = 12 - esp;
-				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));
+				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 {
-				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));
+					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(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;
+			});
 
 			leftArmPivot.position.y = -6;
 			_this.leftArm.add(leftArmPivot);
 			_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);
 
 			// Right Leg
@@ -214,12 +246,12 @@
 			var rightLegPivot = new THREE.Group();
 
 			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);
 			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);
 			rightLeg2Mesh.renderOrder = 1;
 			rightLegPivot.add(rightLeg2Mesh);
@@ -235,12 +267,12 @@
 			var leftLegPivot = new THREE.Group();
 
 			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);
 			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);
 			leftLeg2Mesh.renderOrder = 1;
 			leftLegPivot.add(leftLeg2Mesh);
@@ -250,9 +282,25 @@
 			_this.leftLeg.position.y = -16;
 			_this.leftLeg.position.x = 2;
 			_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;
 	}(THREE.Group);
 
@@ -267,7 +315,7 @@
 			var _this2 = possibleConstructorReturn(this, (CapeObject.__proto__ || Object.getPrototypeOf(CapeObject)).call(this));
 
 			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);
 			_this2.cape.position.y = -8;
 			_this2.cape.position.z = -0.5;
@@ -281,12 +329,12 @@
 	var PlayerObject = function (_THREE$Group3) {
 		inherits(PlayerObject, _THREE$Group3);
 
-		function PlayerObject(slim, layer1Material, layer2Material, capeMaterial) {
+		function PlayerObject(layer1Material, layer2Material, capeMaterial) {
 			classCallCheck(this, PlayerObject);
 
 			var _this3 = possibleConstructorReturn(this, (PlayerObject.__proto__ || Object.getPrototypeOf(PlayerObject)).call(this));
 
-			_this3.skin = new SkinObject(slim, layer1Material, layer2Material);
+			_this3.skin = new SkinObject(layer1Material, layer2Material);
 			_this3.skin.visible = false;
 			_this3.add(_this3.skin);
 
@@ -478,24 +526,170 @@
 		context.putImageData(imgData, dX, dY);
 	}
 
+	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 scale = computeSkinScale(width);
-		var copySkin = function copySkin(context, sX, sY, w, h, dX, dY, flipHorizontal) {
+		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
+		fixOpaqueSkin(context, width);
-		copySkin(context, 8, 16, 4, 4, 24, 48, true); // Bottom Leg
+
-		copySkin(context, 0, 20, 4, 12, 24, 52, true); // Outer Leg
+		copySkin(4, 16, 4, 4, 20, 48, true); // Top Leg
-		copySkin(context, 4, 20, 4, 12, 20, 52, true); // Front Leg
+		copySkin(8, 16, 4, 4, 24, 48, true); // Bottom Leg
-		copySkin(context, 8, 20, 4, 12, 16, 52, true); // Inner Leg
+		copySkin(0, 20, 4, 12, 24, 52, true); // Outer Leg
-		copySkin(context, 12, 20, 4, 12, 28, 52, true); // Back Leg
+		copySkin(4, 20, 4, 12, 20, 52, true); // Front Leg
-		copySkin(context, 44, 16, 4, 4, 36, 48, true); // Top Arm
+		copySkin(8, 20, 4, 12, 16, 52, true); // Inner Leg
-		copySkin(context, 48, 16, 4, 4, 40, 48, true); // Bottom Arm
+		copySkin(12, 20, 4, 12, 28, 52, true); // Back Leg
-		copySkin(context, 40, 20, 4, 12, 40, 52, true); // Outer Arm
+		copySkin(44, 16, 4, 4, 36, 48, true); // Top Arm
-		copySkin(context, 44, 20, 4, 12, 36, 52, true); // Front Arm
+		copySkin(48, 16, 4, 4, 40, 48, true); // Bottom Arm
-		copySkin(context, 48, 20, 4, 12, 32, 52, true); // Inner Arm
+		copySkin(40, 20, 4, 12, 40, 52, true); // Outer Arm
-		copySkin(context, 52, 20, 4, 12, 44, 52, true); // Back 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 () {
@@ -506,6 +700,7 @@
 
 			this.domElement = options.domElement;
 			this.animation = options.animation || null;
+			this.detectModel = options.animation !== false; // true by default
 			this.animationPaused = false;
 			this.animationTime = 0;
 			this.disposed = false;
@@ -542,7 +737,7 @@
 			}; // shut firefox up
 			this.domElement.appendChild(this.renderer.domElement);
 
-			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);
 
 			// texture loading
@@ -551,29 +746,10 @@
 				return console.error("Failed loading " + _this.skinImg.src);
 			};
 			this.skinImg.onload = function () {
-				var isOldFormat = false;
+				loadSkinToCanvas(_this.skinCanvas, _this.skinImg);
-				if (_this.skinImg.width !== _this.skinImg.height) {
-					if (_this.skinImg.width === 2 * _this.skinImg.height) {
-						isOldFormat = true;
-					} else {
-						console.error("Bad skin size");
-						return;
-					}
-				}
 
-				var skinContext = _this.skinCanvas.getContext("2d");
+				if (_this.detectModel) {
-				if (isOldFormat) {
+					_this.playerObject.skin.slim = isSlimSkin(_this.skinCanvas);
-					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);
 				}
 
 				_this.skinTexture.needsUpdate = true;
@@ -588,28 +764,7 @@
 				return console.error("Failed loading " + _this.capeImg.src);
 			};
 			this.capeImg.onload = function () {
-				var isOldFormat = false;
+				loadCapeToCanvas(_this.capeCanvas, _this.capeImg);
-				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;
-					}
-				}
-
-				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;
 				_this.capeMaterial.needsUpdate = true;
@@ -1277,6 +1432,7 @@
 	exports.WalkingAnimation = WalkingAnimation;
 	exports.RunningAnimation = RunningAnimation;
 	exports.RotatingAnimation = RotatingAnimation;
+	exports.isSlimSkin = isSlimSkin;
 
 	Object.defineProperty(exports, '__esModule', { value: true });
 

js/build/skinview3d.module.js

@@ -87,7 +87,7 @@ function toCapeVertices(x1, y1, x2, y2) {
 	return toFaceVertices(x1, y1, x2, y2, 64.0, 32.0);
 }
 
-function addVertices(box, top, bottom, left, front, right, back) {
+function setVertices(box, top, bottom, left, front, right, back) {
 	box.faceVertexUvs[0] = [];
 	box.faceVertexUvs[0][0] = [right[3], right[0], right[2]];
 	box.faceVertexUvs[0][1] = [right[0], right[1], right[2]];
@@ -108,23 +108,23 @@ var esp = 0.002;
 var SkinObject = function (_THREE$Group) {
 	inherits(SkinObject, _THREE$Group);
 
-	function SkinObject(slim, layer1Material, layer2Material) {
+	function SkinObject(layer1Material, layer2Material) {
 		classCallCheck(this, SkinObject);
 
 		var _this = possibleConstructorReturn(this, (SkinObject.__proto__ || Object.getPrototypeOf(SkinObject)).call(this));
 
-		_this.slim = slim;
+		_this.modelListeners = []; // called when model(slim property) is changed
 
 		// Head
 		_this.head = new Group();
 
 		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);
 		_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);
 		head2Mesh.renderOrder = -1;
 		_this.head.add(head2Mesh);
@@ -135,12 +135,12 @@ var SkinObject = function (_THREE$Group) {
 		_this.body = new Group();
 
 		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);
 		_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);
 		_this.body.add(body2Mesh);
 
@@ -151,58 +151,90 @@ var SkinObject = function (_THREE$Group) {
 		_this.rightArm = new Group();
 		var rightArmPivot = new Group();
 
-		var rightArmBox = new BoxGeometry((slim ? 3 : 4) - esp, 12 - esp, 4 - esp, 0, 0, 0);
+		var rightArmBox = new BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
-		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 rightArmMesh = new Mesh(rightArmBox, layer1Material);
 		rightArmPivot.add(rightArmMesh);
-
+		_this.modelListeners.push(function () {
-		var rightArm2Box = new BoxGeometry((slim ? 3.375 : 4.5) - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0);
+			rightArmMesh.scale.x = (_this.slim ? 3 : 4) - esp;
-		if (slim) {
+			rightArmMesh.scale.y = 12 - esp;
-			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));
+			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 {
-			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));
+				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(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;
+		});
 
 		rightArmPivot.position.y = -6;
 		_this.rightArm.add(rightArmPivot);
 		_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);
 
 		// Left Arm
 		_this.leftArm = new Group();
 		var leftArmPivot = new Group();
 
-		var leftArmBox = new BoxGeometry((slim ? 3 : 4) - esp, 12 - esp, 4 - esp, 0, 0, 0);
+		var leftArmBox = new BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
-		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 leftArmMesh = new Mesh(leftArmBox, layer1Material);
 		leftArmPivot.add(leftArmMesh);
-
+		_this.modelListeners.push(function () {
-		var leftArm2Box = new BoxGeometry((slim ? 3.375 : 4.5) - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0);
+			leftArmMesh.scale.x = (_this.slim ? 3 : 4) - esp;
-		if (slim) {
+			leftArmMesh.scale.y = 12 - esp;
-			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));
+			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 {
-			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));
+				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(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;
+		});
 
 		leftArmPivot.position.y = -6;
 		_this.leftArm.add(leftArmPivot);
 		_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);
 
 		// Right Leg
@@ -210,12 +242,12 @@ var SkinObject = function (_THREE$Group) {
 		var rightLegPivot = new Group();
 
 		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);
 		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);
 		rightLeg2Mesh.renderOrder = 1;
 		rightLegPivot.add(rightLeg2Mesh);
@@ -231,12 +263,12 @@ var SkinObject = function (_THREE$Group) {
 		var leftLegPivot = new Group();
 
 		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);
 		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);
 		leftLeg2Mesh.renderOrder = 1;
 		leftLegPivot.add(leftLeg2Mesh);
@@ -246,9 +278,25 @@ var SkinObject = function (_THREE$Group) {
 		_this.leftLeg.position.y = -16;
 		_this.leftLeg.position.x = 2;
 		_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;
 }(Group);
 
@@ -263,7 +311,7 @@ var CapeObject = function (_THREE$Group2) {
 		var _this2 = possibleConstructorReturn(this, (CapeObject.__proto__ || Object.getPrototypeOf(CapeObject)).call(this));
 
 		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);
 		_this2.cape.position.y = -8;
 		_this2.cape.position.z = -0.5;
@@ -277,12 +325,12 @@ var CapeObject = function (_THREE$Group2) {
 var PlayerObject = function (_THREE$Group3) {
 	inherits(PlayerObject, _THREE$Group3);
 
-	function PlayerObject(slim, layer1Material, layer2Material, capeMaterial) {
+	function PlayerObject(layer1Material, layer2Material, capeMaterial) {
 		classCallCheck(this, PlayerObject);
 
 		var _this3 = possibleConstructorReturn(this, (PlayerObject.__proto__ || Object.getPrototypeOf(PlayerObject)).call(this));
 
-		_this3.skin = new SkinObject(slim, layer1Material, layer2Material);
+		_this3.skin = new SkinObject(layer1Material, layer2Material);
 		_this3.skin.visible = false;
 		_this3.add(_this3.skin);
 
@@ -474,24 +522,170 @@ function copyImage(context, sX, sY, w, h, dX, dY, flipHorizontal) {
 	context.putImageData(imgData, dX, dY);
 }
 
+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 scale = computeSkinScale(width);
-	var copySkin = function copySkin(context, sX, sY, w, h, dX, dY, flipHorizontal) {
+	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
+	fixOpaqueSkin(context, width);
-	copySkin(context, 8, 16, 4, 4, 24, 48, true); // Bottom Leg
+
-	copySkin(context, 0, 20, 4, 12, 24, 52, true); // Outer Leg
+	copySkin(4, 16, 4, 4, 20, 48, true); // Top Leg
-	copySkin(context, 4, 20, 4, 12, 20, 52, true); // Front Leg
+	copySkin(8, 16, 4, 4, 24, 48, true); // Bottom Leg
-	copySkin(context, 8, 20, 4, 12, 16, 52, true); // Inner Leg
+	copySkin(0, 20, 4, 12, 24, 52, true); // Outer Leg
-	copySkin(context, 12, 20, 4, 12, 28, 52, true); // Back Leg
+	copySkin(4, 20, 4, 12, 20, 52, true); // Front Leg
-	copySkin(context, 44, 16, 4, 4, 36, 48, true); // Top Arm
+	copySkin(8, 20, 4, 12, 16, 52, true); // Inner Leg
-	copySkin(context, 48, 16, 4, 4, 40, 48, true); // Bottom Arm
+	copySkin(12, 20, 4, 12, 28, 52, true); // Back Leg
-	copySkin(context, 40, 20, 4, 12, 40, 52, true); // Outer Arm
+	copySkin(44, 16, 4, 4, 36, 48, true); // Top Arm
-	copySkin(context, 44, 20, 4, 12, 36, 52, true); // Front Arm
+	copySkin(48, 16, 4, 4, 40, 48, true); // Bottom Arm
-	copySkin(context, 48, 20, 4, 12, 32, 52, true); // Inner Arm
+	copySkin(40, 20, 4, 12, 40, 52, true); // Outer Arm
-	copySkin(context, 52, 20, 4, 12, 44, 52, true); // Back 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 () {
@@ -502,6 +696,7 @@ var SkinViewer = function () {
 
 		this.domElement = options.domElement;
 		this.animation = options.animation || null;
+		this.detectModel = options.animation !== false; // true by default
 		this.animationPaused = false;
 		this.animationTime = 0;
 		this.disposed = false;
@@ -538,7 +733,7 @@ var SkinViewer = function () {
 		}; // shut firefox up
 		this.domElement.appendChild(this.renderer.domElement);
 
-		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);
 
 		// texture loading
@@ -547,29 +742,10 @@ var SkinViewer = function () {
 			return console.error("Failed loading " + _this.skinImg.src);
 		};
 		this.skinImg.onload = function () {
-			var isOldFormat = false;
+			loadSkinToCanvas(_this.skinCanvas, _this.skinImg);
-			if (_this.skinImg.width !== _this.skinImg.height) {
-				if (_this.skinImg.width === 2 * _this.skinImg.height) {
-					isOldFormat = true;
-				} else {
-					console.error("Bad skin size");
-					return;
-				}
-			}
 
-			var skinContext = _this.skinCanvas.getContext("2d");
+			if (_this.detectModel) {
-			if (isOldFormat) {
+				_this.playerObject.skin.slim = isSlimSkin(_this.skinCanvas);
-				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);
 			}
 
 			_this.skinTexture.needsUpdate = true;
@@ -584,28 +760,7 @@ var SkinViewer = function () {
 			return console.error("Failed loading " + _this.capeImg.src);
 		};
 		this.capeImg.onload = function () {
-			var isOldFormat = false;
+			loadCapeToCanvas(_this.capeCanvas, _this.capeImg);
-			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;
-				}
-			}
-
-			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;
 			_this.capeMaterial.needsUpdate = true;
@@ -1262,5 +1417,5 @@ function createOrbitControls(skinViewer) {
 	return control;
 }
 
-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