diff --git a/.gitignore b/.gitignore
index 4bf852f..ffea957 100644
--- a/.gitignore
+++ b/.gitignore
@@ -57,9 +57,8 @@ typings/
 # dotenv environment variables file
 .env
 
-dist/
-jsm/
+bundles/
+libs/
 _ignore/
-dist/
 .DS_Store
 .rpt2_cache
diff --git a/examples/index.html b/examples/index.html
index 8258a01..27a723c 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -19,9 +19,7 @@
 
 	<div id="skin_container"></div>
 
-	<script type="text/javascript" src="https://unpkg.com/three@0.112.1/build/three.min.js"></script>
-
-	<script type="text/javascript" src="../dist/skinview3d.min.js"></script>
+	<script type="text/javascript" src="../bundles/skinview3d.bundle.js"></script>
 
 	<script>
 		let skinViewer = new skinview3d.SkinViewer({
diff --git a/package-lock.json b/package-lock.json
index 6411563..2ceccd4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -174,6 +174,16 @@
 				}
 			}
 		},
+		"@yushijinhun/three-minifier-rollup": {
+			"version": "0.1.4",
+			"resolved": "https://registry.npmjs.org/@yushijinhun/three-minifier-rollup/-/three-minifier-rollup-0.1.4.tgz",
+			"integrity": "sha512-tghDPR9O566LUgopJwCrtcDKBI2eS49cr2024ppW0qBmYQ+eCz8Zl/ljpe89leRlHK+XbuZVb0/4NEZ+c7gJlA==",
+			"dev": true,
+			"requires": {
+				"@rollup/plugin-node-resolve": "^7.0.0",
+				"magic-string": "^0.25.6"
+			}
+		},
 		"JSONStream": {
 			"version": "1.3.5",
 			"resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.5.tgz",
@@ -1847,6 +1857,15 @@
 				"koa-static": "^5.0.0"
 			}
 		},
+		"magic-string": {
+			"version": "0.25.6",
+			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.6.tgz",
+			"integrity": "sha512-3a5LOMSGoCTH5rbqobC2HuDNRtE2glHZ8J7pK+QZYppyWA36yuNpsX994rIY2nCuyP7CZYy7lQq/X2jygiZ89g==",
+			"dev": true,
+			"requires": {
+				"sourcemap-codec": "^1.4.4"
+			}
+		},
 		"media-typer": {
 			"version": "0.3.0",
 			"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -2539,6 +2558,12 @@
 				"source-map": "^0.6.0"
 			}
 		},
+		"sourcemap-codec": {
+			"version": "1.4.8",
+			"resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+			"integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+			"dev": true
+		},
 		"spdx-correct": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.0.tgz",
diff --git a/package.json b/package.json
index 1bf175e..df87476 100644
--- a/package.json
+++ b/package.json
@@ -2,19 +2,19 @@
 	"name": "skinview3d",
 	"version": "2.0.0-alpha.1",
 	"description": "Three.js powered Minecraft skin viewer",
-	"main": "jsm/skinview3d.js",
+	"main": "libs/skinview3d.js",
 	"type": "module",
 	"scripts": {
-		"clean": "rimraf jsm dist",
-		"build:jsm": "tsc -p .",
-		"build:umd": "rollup -c",
-		"build": "npm run build:jsm && npm run build:umd",
+		"clean": "rimraf libs bundles",
+		"build:modules": "tsc -p .",
+		"build:bundles": "rollup -c",
+		"build": "npm run build:modules && npm run build:bundles",
 		"test:lint": "eslint --ext .ts src",
 		"test": "npm run test:lint",
-		"dev:watch:jsm": "tsc -w -p .",
-		"dev:watch:umd": "rollup -w -c",
+		"dev:watch:modules": "tsc -w -p .",
+		"dev:watch:bundles": "rollup -w -c",
 		"dev:serve": "ws",
-		"dev": "npm-run-all --parallel dev:watch:jsm dev:watch:umd dev:serve",
+		"dev": "npm-run-all --parallel dev:watch:modules dev:watch:bundles dev:serve",
 		"prepublishOnly": "npm run clean && npm run build"
 	},
 	"repository": {
@@ -34,8 +34,8 @@
 	},
 	"homepage": "https://github.com/bs-community/skinview3d",
 	"files": [
-		"jsm",
-		"dist"
+		"libs",
+		"bundles"
 	],
 	"dependencies": {
 		"three": "^0.112.1",
@@ -46,6 +46,7 @@
 		"@rollup/plugin-typescript": "^2.1.0",
 		"@typescript-eslint/eslint-plugin": "^2.17.0",
 		"@typescript-eslint/parser": "^2.17.0",
+		"@yushijinhun/three-minifier-rollup": "^0.1.4",
 		"eslint": "^6.8.0",
 		"local-web-server": "^3.0.7",
 		"npm-run-all": "^4.1.5",
diff --git a/rollup.config.js b/rollup.config.js
index db203b7..31d2dd7 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,26 +1,22 @@
 import resolve from "@rollup/plugin-node-resolve";
 import typescript from '@rollup/plugin-typescript';
 import { terser } from "rollup-plugin-terser";
+import { threeMinifier } from "@yushijinhun/three-minifier-rollup";
 
 export default {
     input: "src/skinview3d.ts",
     output: {
-        file: "dist/skinview3d.min.js",
+        file: "bundles/skinview3d.bundle.js",
         format: "umd",
         name: "skinview3d",
         banner: "/* @preserve skinview3d / MIT License / https://github.com/bs-community/skinview3d */",
-        globals: {
-            "three": "THREE"
-        },
         sourcemap: true,
         compact: true
     },
     plugins: [
+        threeMinifier(),
         typescript(),
         resolve(),
         terser()
-    ],
-    external: [
-        "three"
     ]
 };
diff --git a/src/orbit_controls.ts b/src/orbit_controls.ts
index 18ed437..76d153d 100644
--- a/src/orbit_controls.ts
+++ b/src/orbit_controls.ts
@@ -1,686 +1,6 @@
-import { EventDispatcher, MOUSE, OrthographicCamera, PerspectiveCamera, Quaternion, Spherical, Vector2, Vector3 } from "three";
 import { SkinViewer } from "./viewer.js";
-
-const STATE = {
-	NONE: - 1,
-	ROTATE: 0,
-	DOLLY: 1,
-	PAN: 2,
-	TOUCH_ROTATE: 3,
-	TOUCH_DOLLY: 4,
-	TOUCH_PAN: 5
-};
-
-const CHANGE_EVENT = { type: "change" };
-const START_EVENT = { type: "start" };
-const END_EVENT = { type: "end" };
-const EPS = 0.000001;
-
-export class OrbitControls extends EventDispatcher {
-	/**
-	 * @preserve
-	 * The code was originally from https://github.com/mrdoob/three.js/blob/d45a042cf962e9b1aa9441810ba118647b48aacb/examples/js/controls/OrbitControls.js
-	 */
-	/**
-	 * @license
-	 * Copyright (C) 2010-2017 three.js authors
-	 *
-	 * Permission is hereby granted, free of charge, to any person obtaining a copy
-	 * of this software and associated documentation files (the "Software"), to deal
-	 * in the Software without restriction, including without limitation the rights
-	 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-	 * copies of the Software, and to permit persons to whom the Software is
-	 * furnished to do so, subject to the following conditions:
-	 *
-	 * The above copyright notice and this permission notice shall be included in
-	 * all copies or substantial portions of the Software.
-	 *
-	 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-	 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-	 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-	 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-	 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-	 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-	 * THE SOFTWARE.
-	 *
-	 *
-	 * @author qiao / https://github.com/qiao
-	 * @author mrdoob / http://mrdoob.com
-	 * @author alteredq / http://alteredqualia.com/
-	 * @author WestLangley / http://github.com/WestLangley
-	 * @author erich666 / http://erichaines.com
-	 */
-
-	// This set of controls performs orbiting, dollying (zooming), and panning.
-	// Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).
-	//
-	//    Orbit - left mouse / touch: one finger move
-	//    Zoom - middle mouse, or mousewheel / touch: two finger spread or squish
-	//    Pan - right mouse, or arrow keys / touch: three finger swipe
-
-	object: PerspectiveCamera | OrthographicCamera;
-	domElement: HTMLElement;
-	window: Window;
-
-	// API
-	enabled: boolean;
-	target: Vector3;
-
-	enableZoom: boolean;
-	zoomSpeed: number;
-	minDistance: number;
-	maxDistance: number;
-	enableRotate: boolean;
-	rotateSpeed: number;
-	enablePan: boolean;
-	keyPanSpeed: number;
-	autoRotate: boolean;
-	autoRotateSpeed: number;
-	minZoom: number;
-	maxZoom: number;
-	minPolarAngle: number;
-	maxPolarAngle: number;
-	minAzimuthAngle: number;
-	maxAzimuthAngle: number;
-	enableKeys: boolean;
-	keys: { LEFT: number; UP: number; RIGHT: number; BOTTOM: number };
-	mouseButtons: { ORBIT: MOUSE; ZOOM: MOUSE; PAN: MOUSE };
-	enableDamping: boolean;
-	dampingFactor: number;
-
-	private spherical: Spherical;
-	private sphericalDelta: Spherical;
-	private scale: number;
-	private target0: Vector3;
-	private position0: Vector3;
-	private zoom0: number;
-	private state: number;
-	private panOffset: Vector3;
-	private zoomChanged: boolean;
-
-	private rotateStart: Vector2;
-	private rotateEnd: Vector2;
-	private rotateDelta: Vector2;
-
-	private panStart: Vector2;
-	private panEnd: Vector2;
-	private panDelta: Vector2;
-
-	private dollyStart: Vector2;
-	private dollyEnd: Vector2;
-	private dollyDelta: Vector2;
-
-	private updateLastPosition: Vector3;
-	private updateOffset: Vector3;
-	private updateQuat: Quaternion;
-	private updateLastQuaternion: Quaternion;
-	private updateQuatInverse: Quaternion;
-
-	private panLeftV: Vector3;
-	private panUpV: Vector3;
-	private panInternalOffset: Vector3;
-
-	private onContextMenu: (event: MouseEvent) => void;
-	private onMouseUp: (event: MouseEvent) => void;
-	private onMouseDown: (event: MouseEvent) => void;
-	private onMouseMove: (event: MouseEvent) => void;
-	private onMouseWheel: (event: MouseWheelEvent) => void;
-	private onTouchStart: (event: TouchEvent) => void;
-	private onTouchEnd: (event: TouchEvent) => void;
-	private onTouchMove: (event: TouchEvent) => void;
-	private onKeyDown: (event: KeyboardEvent) => void;
-
-	constructor(object: PerspectiveCamera | OrthographicCamera, domElement: HTMLElement, domWindow?: Window) {
-		super();
-		this.object = object;
-
-		this.domElement = domElement;
-		this.window = (domWindow !== undefined) ? domWindow : window;
-
-		// Set to false to disable this control
-		this.enabled = true;
-
-		// "target" sets the location of focus, where the object orbits around
-		this.target = new Vector3();
-
-		// How far you can dolly in and out ( PerspectiveCamera only )
-		this.minDistance = 0;
-		this.maxDistance = Infinity;
-
-		// How far you can zoom in and out ( OrthographicCamera only )
-		this.minZoom = 0;
-		this.maxZoom = Infinity;
-
-		// How far you can orbit vertically, upper and lower limits.
-		// Range is 0 to Math.PI radians.
-		this.minPolarAngle = 0; // radians
-		this.maxPolarAngle = Math.PI; // radians
-
-		// How far you can orbit horizontally, upper and lower limits.
-		// If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ].
-		this.minAzimuthAngle = - Infinity; // radians
-		this.maxAzimuthAngle = Infinity; // radians
-
-		// Set to true to enable damping (inertia)
-		// If damping is enabled, you must call controls.update() in your animation loop
-		this.enableDamping = false;
-		this.dampingFactor = 0.25;
-
-		// This option actually enables dollying in and out; left as "zoom" for backwards compatibility.
-		// Set to false to disable zooming
-		this.enableZoom = true;
-		this.zoomSpeed = 1.0;
-
-		// Set to false to disable rotating
-		this.enableRotate = true;
-		this.rotateSpeed = 1.0;
-
-		// Set to false to disable panning
-		this.enablePan = true;
-		this.keyPanSpeed = 7.0;	// pixels moved per arrow key push
-
-		// Set to true to automatically rotate around the target
-		// If auto-rotate is enabled, you must call controls.update() in your animation loop
-		this.autoRotate = false;
-		this.autoRotateSpeed = 2.0; // 30 seconds per round when fps is 60
-
-		// Set to false to disable use of the keys
-		this.enableKeys = true;
-
-		// The four arrow keys
-		this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };
-
-		// Mouse buttons
-		this.mouseButtons = { ORBIT: MOUSE.LEFT, ZOOM: MOUSE.MIDDLE, PAN: MOUSE.RIGHT };
-
-		// for reset
-		this.target0 = this.target.clone();
-		this.position0 = this.object.position.clone();
-		this.zoom0 = this.object.zoom;
-
-		// for update speedup
-		this.updateOffset = new Vector3();
-		// so camera.up is the orbit axis
-		this.updateQuat = new Quaternion().setFromUnitVectors(object.up, new Vector3(0, 1, 0));
-		this.updateQuatInverse = this.updateQuat.clone().inverse();
-		this.updateLastPosition = new Vector3();
-		this.updateLastQuaternion = new Quaternion();
-
-		this.state = STATE.NONE;
-		this.scale = 1;
-
-		// current position in spherical coordinates
-		this.spherical = new Spherical();
-		this.sphericalDelta = new Spherical();
-
-		this.panOffset = new Vector3();
-		this.zoomChanged = false;
-
-		this.rotateStart = new Vector2();
-		this.rotateEnd = new Vector2();
-		this.rotateDelta = new Vector2();
-
-		this.panStart = new Vector2();
-		this.panEnd = new Vector2();
-		this.panDelta = new Vector2();
-
-		this.dollyStart = new Vector2();
-		this.dollyEnd = new Vector2();
-		this.dollyDelta = new Vector2();
-
-		this.panLeftV = new Vector3();
-		this.panUpV = new Vector3();
-		this.panInternalOffset = new Vector3();
-
-		// event handlers - FSM: listen for events and reset state
-
-		this.onMouseDown = event => {
-			if (this.enabled === false) return;
-			event.preventDefault();
-			if (event.button === this.mouseButtons.ORBIT) {
-				if (this.enableRotate === false) return;
-				this.rotateStart.set(event.clientX, event.clientY);
-				this.state = STATE.ROTATE;
-			} else if (event.button === this.mouseButtons.ZOOM) {
-				if (this.enableZoom === false) return;
-				this.dollyStart.set(event.clientX, event.clientY);
-				this.state = STATE.DOLLY;
-			} else if (event.button === this.mouseButtons.PAN) {
-				if (this.enablePan === false) return;
-				this.panStart.set(event.clientX, event.clientY);
-				this.state = STATE.PAN;
-			}
-
-			if (this.state !== STATE.NONE) {
-				document.addEventListener("mousemove", this.onMouseMove, false);
-				document.addEventListener("mouseup", this.onMouseUp, false);
-				this.dispatchEvent(START_EVENT);
-			}
-		};
-
-		this.onMouseMove = event => {
-			if (this.enabled === false) return;
-
-			event.preventDefault();
-
-			if (this.state === STATE.ROTATE) {
-				if (this.enableRotate === false) return;
-				this.rotateEnd.set(event.clientX, event.clientY);
-				this.rotateDelta.subVectors(this.rotateEnd, this.rotateStart);
-
-				// rotating across whole screen goes 360 degrees around
-				this.rotateLeft(2 * Math.PI * this.rotateDelta.x / this.domElement.clientWidth * this.rotateSpeed);
-				// rotating up and down along whole screen attempts to go 360, but limited to 180
-				this.rotateUp(2 * Math.PI * this.rotateDelta.y / this.domElement.clientHeight * this.rotateSpeed);
-				this.rotateStart.copy(this.rotateEnd);
-
-				this.update();
-			} else if (this.state === STATE.DOLLY) {
-
-				if (this.enableZoom === false) return;
-
-				this.dollyEnd.set(event.clientX, event.clientY);
-				this.dollyDelta.subVectors(this.dollyEnd, this.dollyStart);
-
-				if (this.dollyDelta.y > 0) {
-					this.dollyIn(this.getZoomScale());
-				} else if (this.dollyDelta.y < 0) {
-					this.dollyOut(this.getZoomScale());
-				}
-
-				this.dollyStart.copy(this.dollyEnd);
-				this.update();
-			} else if (this.state === STATE.PAN) {
-
-				if (this.enablePan === false) return;
-
-				this.panEnd.set(event.clientX, event.clientY);
-				this.panDelta.subVectors(this.panEnd, this.panStart);
-				this.pan(this.panDelta.x, this.panDelta.y);
-				this.panStart.copy(this.panEnd);
-				this.update();
-			}
-		};
-
-		this.onMouseUp = () => {
-			if (this.enabled === false) return;
-			document.removeEventListener("mousemove", this.onMouseMove, false);
-			document.removeEventListener("mouseup", this.onMouseUp, false);
-
-			this.dispatchEvent(END_EVENT);
-			this.state = STATE.NONE;
-		};
-
-		this.onMouseWheel = event => {
-
-			if (this.enabled === false || this.enableZoom === false || (this.state !== STATE.NONE && this.state !== STATE.ROTATE)) return;
-
-			event.preventDefault();
-			event.stopPropagation();
-
-			if (event.deltaY < 0) {
-				this.dollyOut(this.getZoomScale());
-			} else if (event.deltaY > 0) {
-				this.dollyIn(this.getZoomScale());
-			}
-
-			this.update();
-
-			this.dispatchEvent(START_EVENT); // not sure why these are here...
-			this.dispatchEvent(END_EVENT);
-		};
-
-		this.onKeyDown = event => {
-
-			if (this.enabled === false || this.enableKeys === false || this.enablePan === false) return;
-
-			switch (event.keyCode) {
-				case this.keys.UP: {
-					this.pan(0, this.keyPanSpeed);
-					this.update();
-					break;
-				}
-				case this.keys.BOTTOM: {
-					this.pan(0, - this.keyPanSpeed);
-					this.update();
-					break;
-				}
-				case this.keys.LEFT: {
-					this.pan(this.keyPanSpeed, 0);
-					this.update();
-					break;
-				}
-				case this.keys.RIGHT: {
-					this.pan(- this.keyPanSpeed, 0);
-					this.update();
-					break;
-				}
-			}
-		};
-
-		this.onTouchStart = event => {
-			if (this.enabled === false) return;
-
-			switch (event.touches.length) {
-				// one-fingered touch: rotate
-				case 1: {
-					if (this.enableRotate === false) return;
-
-					this.rotateStart.set(event.touches[0].pageX, event.touches[0].pageY);
-					this.state = STATE.TOUCH_ROTATE;
-					break;
-				}
-				// two-fingered touch: dolly
-				case 2: {
-					if (this.enableZoom === false) return;
-
-					const dx = event.touches[0].pageX - event.touches[1].pageX;
-					const dy = event.touches[0].pageY - event.touches[1].pageY;
-
-					const distance = Math.sqrt(dx * dx + dy * dy);
-					this.dollyStart.set(0, distance);
-					this.state = STATE.TOUCH_DOLLY;
-					break;
-				}
-				// three-fingered touch: pan
-				case 3: {
-					if (this.enablePan === false) return;
-
-					this.panStart.set(event.touches[0].pageX, event.touches[0].pageY);
-					this.state = STATE.TOUCH_PAN;
-					break;
-				}
-				default: {
-					this.state = STATE.NONE;
-				}
-			}
-
-			if (this.state !== STATE.NONE) {
-				this.dispatchEvent(START_EVENT);
-			}
-		};
-
-		this.onTouchMove = event => {
-			if (this.enabled === false) return;
-			event.preventDefault();
-			event.stopPropagation();
-
-			switch (event.touches.length) {
-				// one-fingered touch: rotate
-				case 1: {
-					if (this.enableRotate === false) return;
-					if (this.state !== STATE.TOUCH_ROTATE) return; // is this needed?...
-
-					this.rotateEnd.set(event.touches[0].pageX, event.touches[0].pageY);
-					this.rotateDelta.subVectors(this.rotateEnd, this.rotateStart);
-
-					// rotating across whole screen goes 360 degrees around
-					this.rotateLeft(2 * Math.PI * this.rotateDelta.x / this.domElement.clientWidth * this.rotateSpeed);
-
-					// rotating up and down along whole screen attempts to go 360, but limited to 180
-					this.rotateUp(2 * Math.PI * this.rotateDelta.y / this.domElement.clientHeight * this.rotateSpeed);
-
-					this.rotateStart.copy(this.rotateEnd);
-
-					this.update();
-					break;
-				}
-				// two-fingered touch: dolly
-				case 2: {
-					if (this.enableZoom === false) return;
-					if (this.state !== STATE.TOUCH_DOLLY) return; // is this needed?...
-
-					// console.log( "handleTouchMoveDolly" );
-					const dx = event.touches[0].pageX - event.touches[1].pageX;
-					const dy = event.touches[0].pageY - event.touches[1].pageY;
-
-					const distance = Math.sqrt(dx * dx + dy * dy);
-
-					this.dollyEnd.set(0, distance);
-
-					this.dollyDelta.subVectors(this.dollyEnd, this.dollyStart);
-
-					if (this.dollyDelta.y > 0) {
-						this.dollyOut(this.getZoomScale());
-					} else if (this.dollyDelta.y < 0) {
-						this.dollyIn(this.getZoomScale());
-					}
-
-					this.dollyStart.copy(this.dollyEnd);
-					this.update();
-					break;
-				}
-				// three-fingered touch: pan
-				case 3: {
-					if (this.enablePan === false) return;
-					if (this.state !== STATE.TOUCH_PAN) return; // is this needed?...
-					this.panEnd.set(event.touches[0].pageX, event.touches[0].pageY);
-					this.panDelta.subVectors(this.panEnd, this.panStart);
-					this.pan(this.panDelta.x, this.panDelta.y);
-					this.panStart.copy(this.panEnd);
-					this.update();
-					break;
-				}
-				default: {
-					this.state = STATE.NONE;
-				}
-			}
-		};
-
-		this.onTouchEnd = () => {
-			if (this.enabled === false) return;
-			this.dispatchEvent(END_EVENT);
-			this.state = STATE.NONE;
-		};
-
-		this.onContextMenu = event => {
-			event.preventDefault();
-		};
-
-		this.domElement.addEventListener("contextmenu", this.onContextMenu, false);
-
-		this.domElement.addEventListener("mousedown", this.onMouseDown, false);
-		this.domElement.addEventListener("wheel", this.onMouseWheel, false);
-
-		this.domElement.addEventListener("touchstart", this.onTouchStart, false);
-		this.domElement.addEventListener("touchend", this.onTouchEnd, false);
-		this.domElement.addEventListener("touchmove", this.onTouchMove, false);
-
-		this.window.addEventListener("keydown", this.onKeyDown, false);
-
-		// force an update at start
-		this.update();
-	}
-
-	update() {
-		const position = this.object.position;
-		this.updateOffset.copy(position).sub(this.target);
-
-		// rotate offset to "y-axis-is-up" space
-		this.updateOffset.applyQuaternion(this.updateQuat);
-
-		// angle from z-axis around y-axis
-		this.spherical.setFromVector3(this.updateOffset);
-
-		if (this.autoRotate && this.state === STATE.NONE) {
-			this.rotateLeft(this.getAutoRotationAngle());
-		}
-
-		this.spherical.theta += this.sphericalDelta.theta;
-		this.spherical.phi += this.sphericalDelta.phi;
-
-		// restrict theta to be between desired limits
-		this.spherical.theta = Math.max(this.minAzimuthAngle, Math.min(this.maxAzimuthAngle, this.spherical.theta));
-
-		// restrict phi to be between desired limits
-		this.spherical.phi = Math.max(this.minPolarAngle, Math.min(this.maxPolarAngle, this.spherical.phi));
-
-		this.spherical.makeSafe();
-
-		this.spherical.radius *= this.scale;
-
-		// restrict radius to be between desired limits
-		this.spherical.radius = Math.max(this.minDistance, Math.min(this.maxDistance, this.spherical.radius));
-
-		// move target to panned location
-		this.target.add(this.panOffset);
-
-		this.updateOffset.setFromSpherical(this.spherical);
-
-		// rotate offset back to "camera-up-vector-is-up" space
-		this.updateOffset.applyQuaternion(this.updateQuatInverse);
-
-		position.copy(this.target).add(this.updateOffset);
-
-		this.object.lookAt(this.target);
-
-		if (this.enableDamping === true) {
-
-			this.sphericalDelta.theta *= (1 - this.dampingFactor);
-			this.sphericalDelta.phi *= (1 - this.dampingFactor);
-
-		} else {
-
-			this.sphericalDelta.set(0, 0, 0);
-
-		}
-
-		this.scale = 1;
-		this.panOffset.set(0, 0, 0);
-
-		// update condition is:
-		// min(camera displacement, camera rotation in radians)^2 > EPS
-		// using small-angle approximation cos(x/2) = 1 - x^2 / 8
-
-		if (this.zoomChanged ||
-			this.updateLastPosition.distanceToSquared(this.object.position) > EPS ||
-			8 * (1 - this.updateLastQuaternion.dot(this.object.quaternion)) > EPS) {
-
-			this.dispatchEvent(CHANGE_EVENT);
-			this.updateLastPosition.copy(this.object.position);
-			this.updateLastQuaternion.copy(this.object.quaternion);
-			this.zoomChanged = false;
-			return true;
-		}
-		return false;
-	}
-
-	panLeft(distance: number, objectMatrix) {
-		this.panLeftV.setFromMatrixColumn(objectMatrix, 0); // get X column of objectMatrix
-		this.panLeftV.multiplyScalar(- distance);
-		this.panOffset.add(this.panLeftV);
-	}
-
-	panUp(distance: number, objectMatrix) {
-		this.panUpV.setFromMatrixColumn(objectMatrix, 1); // get Y column of objectMatrix
-		this.panUpV.multiplyScalar(distance);
-		this.panOffset.add(this.panUpV);
-	}
-
-	// deltaX and deltaY are in pixels; right and down are positive
-	pan(deltaX: number, deltaY: number) {
-		if (this.object instanceof PerspectiveCamera) {
-			// perspective
-			const position = this.object.position;
-			this.panInternalOffset.copy(position).sub(this.target);
-			let targetDistance = this.panInternalOffset.length();
-
-			// half of the fov is center to top of screen
-			targetDistance *= Math.tan((this.object.fov / 2) * Math.PI / 180.0);
-
-			// we actually don"t use screenWidth, since perspective camera is fixed to screen height
-			this.panLeft(2 * deltaX * targetDistance / this.domElement.clientHeight, this.object.matrix);
-			this.panUp(2 * deltaY * targetDistance / this.domElement.clientHeight, this.object.matrix);
-		} else if (this.object instanceof OrthographicCamera) {
-			// orthographic
-			this.panLeft(deltaX * (this.object.right - this.object.left) / this.object.zoom / this.domElement.clientWidth, this.object.matrix);
-			this.panUp(deltaY * (this.object.top - this.object.bottom) / this.object.zoom / this.domElement.clientHeight, this.object.matrix);
-		} else {
-			// camera neither orthographic nor perspective
-			console.warn("WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.");
-			this.enablePan = false;
-		}
-	}
-
-	dollyIn(dollyScale) {
-		if (this.object instanceof PerspectiveCamera) {
-			this.scale /= dollyScale;
-		} else if (this.object instanceof OrthographicCamera) {
-			this.object.zoom = Math.max(this.minZoom, Math.min(this.maxZoom, this.object.zoom * dollyScale));
-			this.object.updateProjectionMatrix();
-			this.zoomChanged = true;
-		} else {
-			console.warn("WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.");
-			this.enableZoom = false;
-		}
-	}
-
-	dollyOut(dollyScale) {
-		if (this.object instanceof PerspectiveCamera) {
-			this.scale *= dollyScale;
-		} else if (this.object instanceof OrthographicCamera) {
-			this.object.zoom = Math.max(this.minZoom, Math.min(this.maxZoom, this.object.zoom / dollyScale));
-			this.object.updateProjectionMatrix();
-			this.zoomChanged = true;
-		} else {
-			console.warn("WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.");
-			this.enableZoom = false;
-		}
-	}
-
-	getAutoRotationAngle() {
-		return 2 * Math.PI / 60 / 60 * this.autoRotateSpeed;
-	}
-
-	getZoomScale() {
-		return Math.pow(0.95, this.zoomSpeed);
-	}
-
-	rotateLeft(angle: number) {
-		this.sphericalDelta.theta -= angle;
-	}
-
-	rotateUp(angle: number) {
-		this.sphericalDelta.phi -= angle;
-	}
-
-	getPolarAngle(): number {
-		return this.spherical.phi;
-	}
-
-	getAzimuthalAngle(): number {
-		return this.spherical.theta;
-	}
-
-	dispose(): void {
-		this.domElement.removeEventListener("contextmenu", this.onContextMenu, false);
-		this.domElement.removeEventListener("mousedown", this.onMouseDown, false);
-		this.domElement.removeEventListener("wheel", this.onMouseWheel, false);
-
-		this.domElement.removeEventListener("touchstart", this.onTouchStart, false);
-		this.domElement.removeEventListener("touchend", this.onTouchEnd, false);
-		this.domElement.removeEventListener("touchmove", this.onTouchMove, false);
-
-		document.removeEventListener("mousemove", this.onMouseMove, false);
-		document.removeEventListener("mouseup", this.onMouseUp, false);
-
-		this.window.removeEventListener("keydown", this.onKeyDown, false);
-		// this.dispatchEvent( { type: "dispose" } ); // should this be added here?
-	}
-
-	reset(): void {
-		this.target.copy(this.target0);
-		this.object.position.copy(this.position0);
-		this.object.zoom = this.zoom0;
-
-		this.object.updateProjectionMatrix();
-		this.dispatchEvent(CHANGE_EVENT);
-
-		this.update();
-
-		this.state = STATE.NONE;
-	}
-}
+import { Vector3 } from "three";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 
 export function createOrbitControls(skinViewer: SkinViewer) {
 	const control = new OrbitControls(skinViewer.camera, skinViewer.renderer.domElement);
diff --git a/tsconfig.json b/tsconfig.json
index 6fcc3b8..97c5771 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,7 +12,7 @@
 		"strictFunctionTypes": false,
 		"declaration": true,
 		"sourceMap": true,
-		"outDir": "jsm",
+		"outDir": "libs",
 		"types": []
 	},
 	"include": [