Move things into namespace 'skinpreview3d'

example.html

@@ -13,7 +13,7 @@
 	<script type="text/javascript" src="js/skinpreview3d.js"></script>
 	<script>
 		$(function() {
-			$("#skin_container").skinPreview3D({
+			$("#skin_container").skinPreview3d({
 				skinUrl: 'img/hatsune_miku.png',
 				capeUrl: 'img/mojang_cape.png',
 				slim: true,

js/skinpreview3d.js

@@ -5,18 +5,10 @@
 
 'use strict';
 
-(function($) {
+// namespace skinpreview3d
-	$.fn.skinPreview3D = function (options) {
+var skinpreview3d = new function(){
-		var sp = new SkinPreview3D(this, options.width, options.height, options.slim === true);
-		sp.setSkin(options.skinUrl);
-		if(options.capeUrl != null)
-			sp.setCape(options.capeUrl);
-	};
 
-} (window.jQuery));
+	var copyImage = (context, sX, sY, w, h, dX, dY, flipHorizontal) => {
-
-function SkinUtils(){
-	this.copyImage = (context, sX, sY, w, h, dX, dY, flipHorizontal) => {
 		var imgData = context.getImageData(sX, sY, w, h);
 		if(flipHorizontal){
 			for(var y = 0; y < h; y++) {
@@ -48,7 +40,7 @@ function SkinUtils(){
 		context.putImageData(imgData,dX,dY);
 	};
 
-	this.convertSkinTo1_8 = (context, width) => {
+	var convertSkinTo1_8 = (context, width) => {
 		var scale = width/64.0;
 		var copySkin = (context, sX, sY, w, h, dX, dY, flipHorizontal) => this.copyImage(context, sX*scale, sY*scale, w*scale, h*scale, dX*scale, dY*scale, flipHorizontal);
 
@@ -65,113 +57,17 @@ function SkinUtils(){
 		copySkin(context, 48, 20, 4, 12, 32, 52, true); // Inner Arm
 		copySkin(context, 52, 20, 4, 12, 44, 52, true); // Back Arm
 	};
-}
 
-function SkinPreview3D(model, canvasW, canvasH, isSlim){
-	var radius = 32;
-	var isPaused = false;
-	var rotating = false;
-	var angleRot = 0;
-
-	var camera = new THREE.PerspectiveCamera(75, canvasW / canvasH, 1, 10000);
-	camera.position.y = -12;
-	camera.position.z = radius;
-
-	var scene = new THREE.Scene();
-	var utils = new SkinUtils();
-
-	var skinCanvas = document.createElement('canvas');
-	var skinContext = skinCanvas.getContext('2d');
-	var skinTexture = new THREE.Texture(skinCanvas);
-	skinTexture.magFilter = THREE.NearestFilter;
-	skinTexture.minFilter = THREE.NearestMipMapNearestFilter;
-
-	var capeCanvas = document.createElement('canvas');
-	var capeContext = capeCanvas.getContext('2d');
-	var capeTexture = new THREE.Texture(capeCanvas);
-	capeTexture.magFilter = THREE.NearestFilter;
-	capeTexture.minFilter = THREE.NearestMipMapNearestFilter;
-
-	var layer1Material = new THREE.MeshBasicMaterial({map: skinTexture, side: THREE.FrontSide});
-	var layer2Material = new THREE.MeshBasicMaterial({map: skinTexture, transparent: true, opacity: 1, side: THREE.DoubleSide});
-	var capeMaterial = new THREE.MeshBasicMaterial({map: capeTexture});
-
-	this.setSkin = url => skinImg.src = url;
-	this.setCape = url => capeImg.src = url;
-
-	var renderer;
-	var capePivot;
-	var headBox, headMesh, bodyBox, bodyMesh, rightArmBox, rightArmMesh, leftArmBox, leftArmMesh, rightLegBox, rightLegMesh, leftLegBox, leftLegMesh, head2Box, head2Mesh, body2Box, body2Mesh, rightArm2Box, rightArm2Mesh, leftArm2Box, leftArm2Mesh, rightLeg2Box, rightLeg2Mesh, leftLeg2Box, leftLeg2Mesh, capeBox, capeMesh;
-
-	var skinImg = new Image();
-	skinImg.crossOrigin = '';
-	var hasAnimate = false;
-	skinImg.onload = () => {
-		var isOldFormat = false;
-		if (skinImg.width !== skinImg.height) {
-			if (skinImg.width === 2*skinImg.height) {
-				isOldFormat = true;
-			} else {
-				console.log('Bad skin size');
-				return;
-			}
-		}
-
-		if(isOldFormat){
-			var width = skinImg.width;
-			skinCanvas.width = width;
-			skinCanvas.height = width;
-			skinContext.clearRect(0, 0, width, width);
-			skinContext.drawImage(skinImg, 0, 0, width, width/2.0);
-			utils.convertSkinTo1_8(skinContext, width);
-		} else {
-			skinCanvas.width = skinImg.width;
-			skinCanvas.height = skinImg.height;
-			skinContext.clearRect(0, 0, skinCanvas.width, skinCanvas.height);
-			skinContext.drawImage(skinImg, 0, 0, skinCanvas.width, skinCanvas.height);
-		}
-
-		skinTexture.needsUpdate = true;
-		layer1Material.needsUpdate = true;
-		layer2Material.needsUpdate = true;
-
-		if(!hasAnimate) {
-			initializeSkin();
-			hasAnimate = true;
-			drawSkin();
-		}
-	};
-	skinImg.onerror = () => console.log('Failed loading ' + skinImg.src);
-
-	var capeImg = new Image();
-	capeImg.crossOrigin = '';
-	capeImg.onload = () => {
-		if (capeImg.width !== 2*capeImg.height) {
-			console.log('Bad cape size');
-			return;
-		}
-
-		capePivot.add(capeMesh);
-
-		capeCanvas.width = capeImg.width;
-		capeCanvas.height = capeImg.height;
-		capeContext.clearRect(0, 0, capeCanvas.width, capeCanvas.height);
-		capeContext.drawImage(capeImg, 0, 0, capeCanvas.width, capeCanvas.height);
-
-		capeTexture.needsUpdate = true;
-		capeMaterial.needsUpdate = true;
-	};
-	capeImg.onerror = () => console.log('Failed loading ' + capeImg.src);
-
-	var initializeSkin = () => {
 	var toFaceVertices = (x1,y1,x2,y2,w,h) => [
 		new THREE.Vector2(x1/w, 1.0-y2/h),
 		new THREE.Vector2(x2/w, 1.0-y2/h),
 		new THREE.Vector2(x2/w, 1.0-y1/h),
 		new THREE.Vector2(x1/w, 1.0-y1/h)
 	];
+
 	var toSkinVertices = (x1,y1,x2,y2) => toFaceVertices(x1, y1, x2, y2, 64.0, 64.0);
 	var toCapeVertices = (x1,y1,x2,y2) => toFaceVertices(x1, y1, x2, y2, 64.0, 32.0);
+
 	var addVertices = (box,top,bottom,left,front,right,back) => {
 		box.faceVertexUvs[0] = [];
 		box.faceVertexUvs[0][0] = [right[3], right[0], right[2]];
@@ -188,6 +84,57 @@ function SkinPreview3D(model, canvasW, canvasH, isSlim){
 		box.faceVertexUvs[0][11] = [back[0], back[1], back[2]];
 	};
 
+	this.SkinViewer = function(model, canvasW, canvasH, isSlim){
+		var angleRot = 0;
+		var initialized = false;
+
+		var camera = new THREE.PerspectiveCamera(75, canvasW / canvasH, 1, 10000);
+		camera.position.y = -12;
+		camera.position.z = 32;
+
+		var scene = new THREE.Scene();
+
+		var skinImg = new Image();
+		var skinCanvas = document.createElement('canvas');
+		var skinContext = skinCanvas.getContext('2d');
+		var skinTexture = new THREE.Texture(skinCanvas);
+		skinTexture.magFilter = THREE.NearestFilter;
+		skinTexture.minFilter = THREE.NearestMipMapNearestFilter;
+
+		var capeImg = new Image();
+		var capeCanvas = document.createElement('canvas');
+		var capeContext = capeCanvas.getContext('2d');
+		var capeTexture = new THREE.Texture(capeCanvas);
+		capeTexture.magFilter = THREE.NearestFilter;
+		capeTexture.minFilter = THREE.NearestMipMapNearestFilter;
+
+		var layer1Material = new THREE.MeshBasicMaterial({map: skinTexture, side: THREE.FrontSide});
+		var layer2Material = new THREE.MeshBasicMaterial({map: skinTexture, transparent: true, opacity: 1, side: THREE.DoubleSide});
+		var capeMaterial = new THREE.MeshBasicMaterial({map: capeTexture});
+
+		var renderer;
+		var capePivot;
+
+		var headBox, headMesh,
+			bodyBox, bodyMesh,
+			rightArmBox, rightArmMesh,
+			leftArmBox, leftArmMesh,
+			rightLegBox, rightLegMesh,
+			leftLegBox, leftLegMesh,
+			head2Box, head2Mesh,
+			body2Box, body2Mesh,
+			rightArm2Box, rightArm2Mesh,
+			leftArm2Box, leftArm2Mesh,
+			rightLeg2Box, rightLeg2Mesh,
+			leftLeg2Box, leftLeg2Mesh,
+			capeBox, capeMesh;
+
+		this.paused = false;
+		this.animationSpeed = 3;
+		this.setSkin = url => skinImg.src = url;
+		this.setCape = url => capeImg.src = url;
+
+		var initialize = () => {
 			// Head Parts
 			headBox = new THREE.BoxGeometry(8, 8, 8, 0, 0, 0);
 			addVertices(headBox,
@@ -446,27 +393,83 @@ function SkinPreview3D(model, canvasW, canvasH, isSlim){
 			model.append(renderer.domElement);
 		}
 
+		skinImg.crossOrigin = '';
+		skinImg.onload = () => {
+			var isOldFormat = false;
+			if (skinImg.width !== skinImg.height) {
+				if (skinImg.width === 2*skinImg.height) {
+					isOldFormat = true;
+				} else {
+					console.log('Bad skin size');
+					return;
+				}
+			}
+
+			if(isOldFormat){
+				var width = skinImg.width;
+				skinCanvas.width = width;
+				skinCanvas.height = width;
+				skinContext.clearRect(0, 0, width, width);
+				skinContext.drawImage(skinImg, 0, 0, width, width/2.0);
+				utils.convertSkinTo1_8(skinContext, width);
+			} else {
+				skinCanvas.width = skinImg.width;
+				skinCanvas.height = skinImg.height;
+				skinContext.clearRect(0, 0, skinCanvas.width, skinCanvas.height);
+				skinContext.drawImage(skinImg, 0, 0, skinCanvas.width, skinCanvas.height);
+			}
+
+			skinTexture.needsUpdate = true;
+			layer1Material.needsUpdate = true;
+			layer2Material.needsUpdate = true;
+
+			if(!initialized) {
+				initialize();
+				initialized = true;
+				drawSkin();
+			}
+		};
+		skinImg.onerror = () => console.log('Failed loading ' + skinImg.src);
+
+		capeImg.crossOrigin = '';
+		capeImg.onload = () => {
+			if (capeImg.width !== 2*capeImg.height) {
+				console.log('Bad cape size');
+				return;
+			}
+
+			capePivot.add(capeMesh);
+
+			capeCanvas.width = capeImg.width;
+			capeCanvas.height = capeImg.height;
+			capeContext.clearRect(0, 0, capeCanvas.width, capeCanvas.height);
+			capeContext.drawImage(capeImg, 0, 0, capeCanvas.width, capeCanvas.height);
+
+			capeTexture.needsUpdate = true;
+			capeMaterial.needsUpdate = true;
+		};
+		capeImg.onerror = () => console.log('Failed loading ' + capeImg.src);
+
 		var startTime = Date.now();
 		var drawSkin = () => {
 			requestAnimationFrame(drawSkin);
 			var time = (Date.now() - startTime)/1000;
-		if(!isPaused)
+			if(!this.paused)
 				angleRot += 0.01;
 
-		var speed = 3;
 			//Leg Swing
-		leftLeg2Mesh.rotation.x = leftLegMesh.rotation.x = Math.cos(angleRot*speed);
+			leftLeg2Mesh.rotation.x = leftLegMesh.rotation.x = Math.cos(angleRot*this.animationSpeed);
 			leftLeg2Mesh.position.z = leftLegMesh.position.z = 0 - 6*Math.sin(leftLegMesh.rotation.x);
 			leftLeg2Mesh.position.y = leftLegMesh.position.y = -16 - 6*Math.abs(Math.cos(leftLegMesh.rotation.x));
-		rightLeg2Mesh.rotation.x = rightLegMesh.rotation.x = Math.cos(angleRot*speed + (Math.PI));
+			rightLeg2Mesh.rotation.x = rightLegMesh.rotation.x = Math.cos(angleRot*this.animationSpeed + (Math.PI));
 			rightLeg2Mesh.position.z = rightLegMesh.position.z = 0 - 6*Math.sin(rightLegMesh.rotation.x);
 			rightLeg2Mesh.position.y = rightLegMesh.position.y = -16 - 6*Math.abs(Math.cos(rightLegMesh.rotation.x));
 
 			//Arm Swing
-		leftArm2Mesh.rotation.x = leftArmMesh.rotation.x = Math.cos(angleRot*speed + (Math.PI));
+			leftArm2Mesh.rotation.x = leftArmMesh.rotation.x = Math.cos(angleRot*this.animationSpeed + (Math.PI));
 			leftArm2Mesh.position.z = leftArmMesh.position.z = 0 - 6*Math.sin(leftArmMesh.rotation.x);
 			leftArm2Mesh.position.y = leftArmMesh.position.y = -4 - 6*Math.abs(Math.cos(leftArmMesh.rotation.x));
-		rightArm2Mesh.rotation.x = rightArmMesh.rotation.x = Math.cos(angleRot*speed);
+			rightArm2Mesh.rotation.x = rightArmMesh.rotation.x = Math.cos(angleRot*this.animationSpeed);
 			rightArm2Mesh.position.z = rightArmMesh.position.z = 0 - 6*Math.sin(rightArmMesh.rotation.x);
 			rightArm2Mesh.position.y = rightArmMesh.position.y = -4 - 6*Math.abs(Math.cos(rightArmMesh.rotation.x));
 
@@ -475,9 +478,26 @@ function SkinPreview3D(model, canvasW, canvasH, isSlim){
 			if(angleRot > 360)
 				angleRot = 0;
 		}
+	}
 
-	model.bind('contextmenu', e => {
+}
-		e.preventDefault();
+
-		isPaused = !isPaused;
+if(window.jQuery){
-	});
+	(function($) {
+		$.fn.skinPreview3d = function (options) {
+			var sp = new skinpreview3d.SkinViewer(this, options.width, options.height, options.slim === true);
+			sp.setSkin(options.skinUrl);
+			if(options.capeUrl != null)
+				sp.setCape(options.capeUrl);
+
+			if(options.disableControl!==true){
+				this.bind('contextmenu', e => {
+					e.preventDefault();
+					sp.paused = !sp.paused;
+				});
+			}
+
+			return sp;
+		};
+	} (window.jQuery));
 }