From 2f304996aeac39eeeb76706b158165acf5bbf903 Mon Sep 17 00:00:00 2001
From: yushijinhun <yushijinhun@gmail.com>
Date: Wed, 1 Jan 2020 16:46:54 +0800
Subject: [PATCH] Revert "Merge remote-tracking branch 'ShirasawaSama/master'"

This reverts commit 9f6017d14cf31adf22df98398f87cebfdb151cc0, reversing
changes made to db1884e78280a853aa2c64aea70ff3597401aeb7.

This reverts #41.
---
 examples/index.html   |   4 +-
 rollup.config.js      |  97 ++++++++++++---------------------
 src/animation.ts      |   4 +-
 src/model.ts          |  97 ++++++++++++++++-----------------
 src/orbit_controls.ts | 124 ++++++++++++++++++++----------------------
 src/viewer.ts         |  56 +++++++++----------
 tslint.json           |   3 +-
 7 files changed, 171 insertions(+), 214 deletions(-)

diff --git a/examples/index.html b/examples/index.html
index ba75e78..c0800a9 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -19,7 +19,9 @@
 
 	<div id="skin_container"></div>
 
-	<script type="text/javascript" src="../dist/skinview3d.all.js"></script>
+	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
+
+	<script type="text/javascript" src="../dist/skinview3d.js"></script>
 
 	<script>
 		let skinViewer = new skinview3d.SkinViewer({
diff --git a/rollup.config.js b/rollup.config.js
index bda160a..eec17df 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -3,73 +3,48 @@ import typescript from "rollup-plugin-typescript2";
 import resolve from "@rollup/plugin-node-resolve";
 import license from "rollup-plugin-license";
 
-const umd = {
-	format: "umd",
-	name: "skinview3d",
-	indent: "\t",
-	globals: {
-		"three": "THREE"
-	}
-};
-
-const es = {
-	format: "es",
-	indent: "\t"
-};
-
-const resolverPlugin = {
-	name: "resolver",
-	resolveId: id => id.startsWith("three/src/") ? "three" : undefined
-};
-
-const licensePlugin = license({
-	banner: `
+const base = {
+	input: "src/skinview3d.ts",
+	output: [
+		{
+			format: "umd",
+			name: "skinview3d",
+			file: "dist/skinview3d.js",
+			indent: "\t",
+			globals: {
+				"three": "THREE"
+			}
+		},
+		{
+			format: "es",
+			file: "dist/skinview3d.module.js",
+			indent: "\t"
+		}
+	],
+	external: [
+		"three"
+	],
+	plugins: [
+		resolve(),
+		typescript(),
+		license({
+			banner: `
 				skinview3d (https://github.com/bs-community/skinview3d)
 
 				MIT License
 				`
-});
-
-const base = {
-	input: "src/skinview3d.ts",
-	external: [
-		"three"
+		})
 	]
 };
 
 export default [
-	{
-		...base,
-		output: [
-			{ ...umd, file: "dist/skinview3d.js" },
-			{ ...es, file: "dist/skinview3d.module.js" }
-		],
-		plugins: [
-			resolverPlugin,
-			resolve(),
-			typescript(),
-			licensePlugin
-		]
-	},
-	{
-		...base,
-		output: { ...umd, file: "dist/skinview3d.min.js" },
-		plugins: [
-			resolverPlugin,
-			resolve(),
-			typescript(),
-			terser(),
-			licensePlugin
-		]
-	},
-	{
-		...base,
-		output: { ...umd, file: "dist/skinview3d.all.js" },
-		plugins: [
-			resolve(),
-			typescript(),
-			terser(),
-			licensePlugin
-		]
-	}
+	base,
+	Object.assign({}, base, {
+		output: Object.assign({}, base.output[0], { file: "dist/skinview3d.min.js" }),
+		plugins: (() => {
+			const plugin = base.plugins.slice();
+			plugin.splice(1, 0, terser());
+			return plugin;
+		})()
+	})
 ];
diff --git a/src/animation.ts b/src/animation.ts
index 49123b1..973b1ca 100644
--- a/src/animation.ts
+++ b/src/animation.ts
@@ -1,5 +1,5 @@
-import { Clock } from "three/src/core/Clock";
 import { PlayerObject } from "./model";
+import * as THREE from "three";
 
 export interface IAnimation {
 	play(player: PlayerObject, time: number): void;
@@ -102,7 +102,7 @@ export class CompositeAnimation implements IAnimation {
 export class RootAnimation extends CompositeAnimation implements AnimationHandle {
 	speed: number = 1.0;
 	progress: number = 0.0;
-	readonly clock: Clock = new Clock(true);
+	readonly clock: THREE.Clock = new THREE.Clock(true);
 
 	get animation() {
 		return this;
diff --git a/src/model.ts b/src/model.ts
index 985f596..10f2942 100644
--- a/src/model.ts
+++ b/src/model.ts
@@ -1,16 +1,11 @@
-import { Object3D } from "three/src/core/Object3D";
-import { BoxGeometry } from "three/src/geometries/BoxGeometry";
-import { MeshBasicMaterial } from "three/src/materials/MeshBasicMaterial";
-import { Vector2 } from "three/src/math/Vector2";
-import { Group } from "three/src/objects/Group";
-import { Mesh } from "three/src/objects/Mesh";
+import * as THREE from "three";
 
 function toFaceVertices(x1: number, y1: number, x2: number, y2: number, w: number, h: number) {
 	return [
-		new Vector2(x1 / w, 1.0 - y2 / h),
-		new Vector2(x2 / w, 1.0 - y2 / h),
-		new Vector2(x2 / w, 1.0 - y1 / h),
-		new Vector2(x1 / w, 1.0 - y1 / 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)
 	];
 }
 
@@ -22,7 +17,7 @@ function toCapeVertices(x1: number, y1: number, x2: number, y2: number) {
 	return toFaceVertices(x1, y1, x2, y2, 64.0, 32.0);
 }
 
-function setVertices(box: BoxGeometry, top: Array<Vector2>, bottom: Array<Vector2>, left: Array<Vector2>, front: Array<Vector2>, right: Array<Vector2>, back: Array<Vector2>) {
+function setVertices(box: THREE.BoxGeometry, top: Array<THREE.Vector2>, bottom: Array<THREE.Vector2>, left: Array<THREE.Vector2>, front: Array<THREE.Vector2>, right: Array<THREE.Vector2>, back: Array<THREE.Vector2>) {
 
 	box.faceVertexUvs[0] = [];
 	box.faceVertexUvs[0][0] = [right[3], right[0], right[2]];
@@ -44,10 +39,10 @@ const esp = 0.002;
 /**
  * Notice that innerLayer and outerLayer may NOT be the direct children of the Group.
  */
-export class BodyPart extends Group {
+export class BodyPart extends THREE.Group {
 	constructor(
-		readonly innerLayer: Object3D,
-		readonly outerLayer: Object3D
+		readonly innerLayer: THREE.Object3D,
+		readonly outerLayer: THREE.Object3D
 	) {
 		super();
 		innerLayer.name = "inner";
@@ -55,7 +50,7 @@ export class BodyPart extends Group {
 	}
 }
 
-export class SkinObject extends Group {
+export class SkinObject extends THREE.Group {
 
 	// body parts
 	readonly head: BodyPart;
@@ -68,11 +63,11 @@ export class SkinObject extends Group {
 	private modelListeners: Array<() => void> = []; // called when model(slim property) is changed
 	private _slim = false;
 
-	constructor(layer1Material: MeshBasicMaterial, layer2Material: MeshBasicMaterial) {
+	constructor(layer1Material: THREE.MeshBasicMaterial, layer2Material: THREE.MeshBasicMaterial) {
 		super();
 
 		// Head
-		const headBox = new BoxGeometry(8, 8, 8, 0, 0, 0);
+		const headBox = new THREE.BoxGeometry(8, 8, 8, 0, 0, 0);
 		setVertices(headBox,
 			toSkinVertices(8, 0, 16, 8),
 			toSkinVertices(16, 0, 24, 8),
@@ -81,9 +76,9 @@ export class SkinObject extends Group {
 			toSkinVertices(16, 8, 24, 16),
 			toSkinVertices(24, 8, 32, 16)
 		);
-		const headMesh = new Mesh(headBox, layer1Material);
+		const headMesh = new THREE.Mesh(headBox, layer1Material);
 
-		const head2Box = new BoxGeometry(9, 9, 9, 0, 0, 0);
+		const head2Box = new THREE.BoxGeometry(9, 9, 9, 0, 0, 0);
 		setVertices(head2Box,
 			toSkinVertices(40, 0, 48, 8),
 			toSkinVertices(48, 0, 56, 8),
@@ -92,7 +87,7 @@ export class SkinObject extends Group {
 			toSkinVertices(48, 8, 56, 16),
 			toSkinVertices(56, 8, 64, 16)
 		);
-		const head2Mesh = new Mesh(head2Box, layer2Material);
+		const head2Mesh = new THREE.Mesh(head2Box, layer2Material);
 		head2Mesh.renderOrder = -1;
 
 		this.head = new BodyPart(headMesh, head2Mesh);
@@ -101,7 +96,7 @@ export class SkinObject extends Group {
 		this.add(this.head);
 
 		// Body
-		const bodyBox = new BoxGeometry(8, 12, 4, 0, 0, 0);
+		const bodyBox = new THREE.BoxGeometry(8, 12, 4, 0, 0, 0);
 		setVertices(bodyBox,
 			toSkinVertices(20, 16, 28, 20),
 			toSkinVertices(28, 16, 36, 20),
@@ -110,9 +105,9 @@ export class SkinObject extends Group {
 			toSkinVertices(28, 20, 32, 32),
 			toSkinVertices(32, 20, 40, 32)
 		);
-		const bodyMesh = new Mesh(bodyBox, layer1Material);
+		const bodyMesh = new THREE.Mesh(bodyBox, layer1Material);
 
-		const body2Box = new BoxGeometry(9, 13.5, 4.5, 0, 0, 0);
+		const body2Box = new THREE.BoxGeometry(9, 13.5, 4.5, 0, 0, 0);
 		setVertices(body2Box,
 			toSkinVertices(20, 32, 28, 36),
 			toSkinVertices(28, 32, 36, 36),
@@ -121,7 +116,7 @@ export class SkinObject extends Group {
 			toSkinVertices(28, 36, 32, 48),
 			toSkinVertices(32, 36, 40, 48)
 		);
-		const body2Mesh = new Mesh(body2Box, layer2Material);
+		const body2Mesh = new THREE.Mesh(body2Box, layer2Material);
 
 		this.body = new BodyPart(bodyMesh, body2Mesh);
 		this.body.name = "body";
@@ -130,8 +125,8 @@ export class SkinObject extends Group {
 		this.add(this.body);
 
 		// Right Arm
-		const rightArmBox = new BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
-		const rightArmMesh = new Mesh(rightArmBox, layer1Material);
+		const rightArmBox = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
+		const rightArmMesh = new THREE.Mesh(rightArmBox, layer1Material);
 		this.modelListeners.push(() => {
 			rightArmMesh.scale.x = (this.slim ? 3 : 4) - esp;
 			rightArmMesh.scale.y = 12 - esp;
@@ -159,8 +154,8 @@ export class SkinObject extends Group {
 			rightArmBox.elementsNeedUpdate = true;
 		});
 
-		const rightArm2Box = new BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
-		const rightArm2Mesh = new Mesh(rightArm2Box, layer2Material);
+		const rightArm2Box = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
+		const rightArm2Mesh = new THREE.Mesh(rightArm2Box, layer2Material);
 		rightArm2Mesh.renderOrder = 1;
 		this.modelListeners.push(() => {
 			rightArm2Mesh.scale.x = (this.slim ? 3.375 : 4.5) - esp;
@@ -189,7 +184,7 @@ export class SkinObject extends Group {
 			rightArm2Box.elementsNeedUpdate = true;
 		});
 
-		const rightArmPivot = new Group();
+		const rightArmPivot = new THREE.Group();
 		rightArmPivot.add(rightArmMesh, rightArm2Mesh);
 		rightArmPivot.position.y = -6;
 
@@ -203,8 +198,8 @@ export class SkinObject extends Group {
 		this.add(this.rightArm);
 
 		// Left Arm
-		const leftArmBox = new BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
-		const leftArmMesh = new Mesh(leftArmBox, layer1Material);
+		const leftArmBox = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
+		const leftArmMesh = new THREE.Mesh(leftArmBox, layer1Material);
 		this.modelListeners.push(() => {
 			leftArmMesh.scale.x = (this.slim ? 3 : 4) - esp;
 			leftArmMesh.scale.y = 12 - esp;
@@ -232,8 +227,8 @@ export class SkinObject extends Group {
 			leftArmBox.elementsNeedUpdate = true;
 		});
 
-		const leftArm2Box = new BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
-		const leftArm2Mesh = new Mesh(leftArm2Box, layer2Material);
+		const leftArm2Box = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
+		const leftArm2Mesh = new THREE.Mesh(leftArm2Box, layer2Material);
 		leftArm2Mesh.renderOrder = 1;
 		this.modelListeners.push(() => {
 			leftArm2Mesh.scale.x = (this.slim ? 3.375 : 4.5) - esp;
@@ -262,7 +257,7 @@ export class SkinObject extends Group {
 			leftArm2Box.elementsNeedUpdate = true;
 		});
 
-		const leftArmPivot = new Group();
+		const leftArmPivot = new THREE.Group();
 		leftArmPivot.add(leftArmMesh, leftArm2Mesh);
 		leftArmPivot.position.y = -6;
 
@@ -276,7 +271,7 @@ export class SkinObject extends Group {
 		this.add(this.leftArm);
 
 		// Right Leg
-		const rightLegBox = new BoxGeometry(4 - esp, 12 - esp, 4 - esp, 0, 0, 0);
+		const rightLegBox = new THREE.BoxGeometry(4 - esp, 12 - esp, 4 - esp, 0, 0, 0);
 		setVertices(rightLegBox,
 			toSkinVertices(4, 16, 8, 20),
 			toSkinVertices(8, 16, 12, 20),
@@ -285,9 +280,9 @@ export class SkinObject extends Group {
 			toSkinVertices(8, 20, 12, 32),
 			toSkinVertices(12, 20, 16, 32)
 		);
-		const rightLegMesh = new Mesh(rightLegBox, layer1Material);
+		const rightLegMesh = new THREE.Mesh(rightLegBox, layer1Material);
 
-		const rightLeg2Box = new BoxGeometry(4.5 - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0);
+		const rightLeg2Box = new THREE.BoxGeometry(4.5 - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0);
 		setVertices(rightLeg2Box,
 			toSkinVertices(4, 32, 8, 36),
 			toSkinVertices(8, 32, 12, 36),
@@ -296,10 +291,10 @@ export class SkinObject extends Group {
 			toSkinVertices(8, 36, 12, 48),
 			toSkinVertices(12, 36, 16, 48)
 		);
-		const rightLeg2Mesh = new Mesh(rightLeg2Box, layer2Material);
+		const rightLeg2Mesh = new THREE.Mesh(rightLeg2Box, layer2Material);
 		rightLeg2Mesh.renderOrder = 1;
 
-		const rightLegPivot = new Group();
+		const rightLegPivot = new THREE.Group();
 		rightLegPivot.add(rightLegMesh, rightLeg2Mesh);
 		rightLegPivot.position.y = -6;
 
@@ -311,7 +306,7 @@ export class SkinObject extends Group {
 		this.add(this.rightLeg);
 
 		// Left Leg
-		const leftLegBox = new BoxGeometry(4 - esp, 12 - esp, 4 - esp, 0, 0, 0);
+		const leftLegBox = new THREE.BoxGeometry(4 - esp, 12 - esp, 4 - esp, 0, 0, 0);
 		setVertices(leftLegBox,
 			toSkinVertices(20, 48, 24, 52),
 			toSkinVertices(24, 48, 28, 52),
@@ -320,9 +315,9 @@ export class SkinObject extends Group {
 			toSkinVertices(24, 52, 28, 64),
 			toSkinVertices(28, 52, 32, 64)
 		);
-		const leftLegMesh = new Mesh(leftLegBox, layer1Material);
+		const leftLegMesh = new THREE.Mesh(leftLegBox, layer1Material);
 
-		const leftLeg2Box = new BoxGeometry(4.5 - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0);
+		const leftLeg2Box = new THREE.BoxGeometry(4.5 - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0);
 		setVertices(leftLeg2Box,
 			toSkinVertices(4, 48, 8, 52),
 			toSkinVertices(8, 48, 12, 52),
@@ -331,10 +326,10 @@ export class SkinObject extends Group {
 			toSkinVertices(8, 52, 12, 64),
 			toSkinVertices(12, 52, 16, 64)
 		);
-		const leftLeg2Mesh = new Mesh(leftLeg2Box, layer2Material);
+		const leftLeg2Mesh = new THREE.Mesh(leftLeg2Box, layer2Material);
 		leftLeg2Mesh.renderOrder = 1;
 
-		const leftLegPivot = new Group();
+		const leftLegPivot = new THREE.Group();
 		leftLegPivot.add(leftLegMesh, leftLeg2Mesh);
 		leftLegPivot.position.y = -6;
 
@@ -370,16 +365,16 @@ export class SkinObject extends Group {
 	}
 }
 
-export class CapeObject extends Group {
+export class CapeObject extends THREE.Group {
 
-	readonly cape: Mesh;
+	readonly cape: THREE.Mesh;
 
-	constructor(capeMaterial: MeshBasicMaterial) {
+	constructor(capeMaterial: THREE.MeshBasicMaterial) {
 		super();
 
 		// back = outside
 		// front = inside
-		const capeBox = new BoxGeometry(10, 16, 1, 0, 0, 0);
+		const capeBox = new THREE.BoxGeometry(10, 16, 1, 0, 0, 0);
 		setVertices(capeBox,
 			toCapeVertices(1, 0, 11, 1),
 			toCapeVertices(11, 0, 21, 1),
@@ -388,19 +383,19 @@ export class CapeObject extends Group {
 			toCapeVertices(0, 1, 1, 17),
 			toCapeVertices(1, 1, 11, 17)
 		);
-		this.cape = new Mesh(capeBox, capeMaterial);
+		this.cape = new THREE.Mesh(capeBox, capeMaterial);
 		this.cape.position.y = -8;
 		this.cape.position.z = -0.5;
 		this.add(this.cape);
 	}
 }
 
-export class PlayerObject extends Group {
+export class PlayerObject extends THREE.Group {
 
 	readonly skin: SkinObject;
 	readonly cape: CapeObject;
 
-	constructor(layer1Material: MeshBasicMaterial, layer2Material: MeshBasicMaterial, capeMaterial: MeshBasicMaterial) {
+	constructor(layer1Material: THREE.MeshBasicMaterial, layer2Material: THREE.MeshBasicMaterial, capeMaterial: THREE.MeshBasicMaterial) {
 		super();
 
 		this.skin = new SkinObject(layer1Material, layer2Material);
diff --git a/src/orbit_controls.ts b/src/orbit_controls.ts
index 819e922..ee963c3 100644
--- a/src/orbit_controls.ts
+++ b/src/orbit_controls.ts
@@ -1,12 +1,4 @@
-import { Camera } from "three/src/cameras/Camera";
-import { OrthographicCamera } from "three/src/cameras/OrthographicCamera";
-import { PerspectiveCamera } from "three/src/cameras/PerspectiveCamera";
-import { MOUSE } from "three/src/constants";
-import { EventDispatcher } from "three/src/core/EventDispatcher";
-import { Quaternion } from "three/src/math/Quaternion";
-import { Spherical } from "three/src/math/Spherical";
-import { Vector2 } from "three/src/math/Vector2";
-import { Vector3 } from "three/src/math/Vector3";
+import * as THREE from "three";
 import { SkinViewer } from "./viewer";
 
 const STATE = {
@@ -24,7 +16,7 @@ const START_EVENT = { type: "start" };
 const END_EVENT = { type: "end" };
 const EPS = 0.000001;
 
-export class OrbitControls extends EventDispatcher {
+export class OrbitControls extends THREE.EventDispatcher {
 	/**
 	 * @preserve
 	 * The code was originally from https://github.com/mrdoob/three.js/blob/d45a042cf962e9b1aa9441810ba118647b48aacb/examples/js/controls/OrbitControls.js
@@ -66,13 +58,13 @@ export class OrbitControls extends EventDispatcher {
 	//    Zoom - middle mouse, or mousewheel / touch: two finger spread or squish
 	//    Pan - right mouse, or arrow keys / touch: three finger swipe
 
-	object: Camera;
+	object: THREE.Camera;
 	domElement: HTMLElement | HTMLDocument;
 	window: Window;
 
 	// API
 	enabled: boolean;
-	target: Vector3;
+	target: THREE.Vector3;
 
 	enableZoom: boolean;
 	zoomSpeed: number;
@@ -92,41 +84,41 @@ export class OrbitControls extends EventDispatcher {
 	maxAzimuthAngle: number;
 	enableKeys: boolean;
 	keys: { LEFT: number; UP: number; RIGHT: number; BOTTOM: number; };
-	mouseButtons: { ORBIT: MOUSE; ZOOM: MOUSE; PAN: MOUSE; };
+	mouseButtons: { ORBIT: THREE.MOUSE; ZOOM: THREE.MOUSE; PAN: THREE.MOUSE; };
 	enableDamping: boolean;
 	dampingFactor: number;
 
-	private spherical: Spherical;
-	private sphericalDelta: Spherical;
+	private spherical: THREE.Spherical;
+	private sphericalDelta: THREE.Spherical;
 	private scale: number;
-	private target0: Vector3;
-	private position0: Vector3;
+	private target0: THREE.Vector3;
+	private position0: THREE.Vector3;
 	private zoom0: any;
 	private state: number;
-	private panOffset: Vector3;
+	private panOffset: THREE.Vector3;
 	private zoomChanged: boolean;
 
-	private rotateStart: Vector2;
-	private rotateEnd: Vector2;
-	private rotateDelta: Vector2;
+	private rotateStart: THREE.Vector2;
+	private rotateEnd: THREE.Vector2;
+	private rotateDelta: THREE.Vector2;
 
-	private panStart: Vector2;
-	private panEnd: Vector2;
-	private panDelta: Vector2;
+	private panStart: THREE.Vector2;
+	private panEnd: THREE.Vector2;
+	private panDelta: THREE.Vector2;
 
-	private dollyStart: Vector2;
-	private dollyEnd: Vector2;
-	private dollyDelta: Vector2;
+	private dollyStart: THREE.Vector2;
+	private dollyEnd: THREE.Vector2;
+	private dollyDelta: THREE.Vector2;
 
-	private updateLastPosition: Vector3;
-	private updateOffset: Vector3;
-	private updateQuat: Quaternion;
-	private updateLastQuaternion: Quaternion;
-	private updateQuatInverse: Quaternion;
+	private updateLastPosition: THREE.Vector3;
+	private updateOffset: THREE.Vector3;
+	private updateQuat: THREE.Quaternion;
+	private updateLastQuaternion: THREE.Quaternion;
+	private updateQuatInverse: THREE.Quaternion;
 
-	private panLeftV: Vector3;
-	private panUpV: Vector3;
-	private panInternalOffset: Vector3;
+	private panLeftV: THREE.Vector3;
+	private panUpV: THREE.Vector3;
+	private panInternalOffset: THREE.Vector3;
 
 	private onContextMenu: EventListener;
 	private onMouseUp: EventListener;
@@ -138,7 +130,7 @@ export class OrbitControls extends EventDispatcher {
 	private onTouchMove: EventListener;
 	private onKeyDown: EventListener;
 
-	constructor(object: Camera, domElement?: HTMLElement, domWindow?: Window) {
+	constructor(object: THREE.Camera, domElement?: HTMLElement, domWindow?: Window) {
 		super();
 		this.object = object;
 
@@ -149,7 +141,7 @@ export class OrbitControls extends EventDispatcher {
 		this.enabled = true;
 
 		// "target" sets the location of focus, where the object orbits around
-		this.target = new Vector3();
+		this.target = new THREE.Vector3();
 
 		// How far you can dolly in and out ( PerspectiveCamera only )
 		this.minDistance = 0;
@@ -199,7 +191,7 @@ export class OrbitControls extends EventDispatcher {
 		this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };
 
 		// Mouse buttons
-		this.mouseButtons = { ORBIT: MOUSE.LEFT, ZOOM: MOUSE.MIDDLE, PAN: MOUSE.RIGHT };
+		this.mouseButtons = { ORBIT: THREE.MOUSE.LEFT, ZOOM: THREE.MOUSE.MIDDLE, PAN: THREE.MOUSE.RIGHT };
 
 		// for reset
 		this.target0 = this.target.clone();
@@ -207,38 +199,38 @@ export class OrbitControls extends EventDispatcher {
 		this.zoom0 = (this.object as any).zoom;
 
 		// for update speedup
-		this.updateOffset = new Vector3();
+		this.updateOffset = new THREE.Vector3();
 		// so camera.up is the orbit axis
-		this.updateQuat = new Quaternion().setFromUnitVectors(object.up, new Vector3(0, 1, 0));
+		this.updateQuat = new THREE.Quaternion().setFromUnitVectors(object.up, new THREE.Vector3(0, 1, 0));
 		this.updateQuatInverse = this.updateQuat.clone().inverse();
-		this.updateLastPosition = new Vector3();
-		this.updateLastQuaternion = new Quaternion();
+		this.updateLastPosition = new THREE.Vector3();
+		this.updateLastQuaternion = new THREE.Quaternion();
 
 		this.state = STATE.NONE;
 		this.scale = 1;
 
 		// current position in spherical coordinates
-		this.spherical = new Spherical();
-		this.sphericalDelta = new Spherical();
+		this.spherical = new THREE.Spherical();
+		this.sphericalDelta = new THREE.Spherical();
 
-		this.panOffset = new Vector3();
+		this.panOffset = new THREE.Vector3();
 		this.zoomChanged = false;
 
-		this.rotateStart = new Vector2();
-		this.rotateEnd = new Vector2();
-		this.rotateDelta = new Vector2();
+		this.rotateStart = new THREE.Vector2();
+		this.rotateEnd = new THREE.Vector2();
+		this.rotateDelta = new THREE.Vector2();
 
-		this.panStart = new Vector2();
-		this.panEnd = new Vector2();
-		this.panDelta = new Vector2();
+		this.panStart = new THREE.Vector2();
+		this.panEnd = new THREE.Vector2();
+		this.panDelta = new THREE.Vector2();
 
-		this.dollyStart = new Vector2();
-		this.dollyEnd = new Vector2();
-		this.dollyDelta = new Vector2();
+		this.dollyStart = new THREE.Vector2();
+		this.dollyEnd = new THREE.Vector2();
+		this.dollyDelta = new THREE.Vector2();
 
-		this.panLeftV = new Vector3();
-		this.panUpV = new Vector3();
-		this.panInternalOffset = new Vector3();
+		this.panLeftV = new THREE.Vector3();
+		this.panUpV = new THREE.Vector3();
+		this.panInternalOffset = new THREE.Vector3();
 
 		// event handlers - FSM: listen for events and reset state
 
@@ -596,7 +588,7 @@ export class OrbitControls extends EventDispatcher {
 	pan(deltaX: number, deltaY: number) {
 		const element = this.domElement === document ? this.domElement.body : this.domElement;
 
-		if (this.object instanceof PerspectiveCamera) {
+		if (this.object instanceof THREE.PerspectiveCamera) {
 			// perspective
 			const position = this.object.position;
 			this.panInternalOffset.copy(position).sub(this.target);
@@ -608,7 +600,7 @@ export class OrbitControls extends EventDispatcher {
 			// we actually don"t use screenWidth, since perspective camera is fixed to screen height
 			this.panLeft(2 * deltaX * targetDistance / (element as any).clientHeight, this.object.matrix);
 			this.panUp(2 * deltaY * targetDistance / (element as any).clientHeight, this.object.matrix);
-		} else if (this.object instanceof OrthographicCamera) {
+		} else if (this.object instanceof THREE.OrthographicCamera) {
 			// orthographic
 			this.panLeft(deltaX * (this.object.right - this.object.left) / this.object.zoom / (element as any).clientWidth, this.object.matrix);
 			this.panUp(deltaY * (this.object.top - this.object.bottom) / this.object.zoom / (element as any).clientHeight, this.object.matrix);
@@ -620,9 +612,9 @@ export class OrbitControls extends EventDispatcher {
 	}
 
 	dollyIn(dollyScale) {
-		if (this.object instanceof PerspectiveCamera) {
+		if (this.object instanceof THREE.PerspectiveCamera) {
 			this.scale /= dollyScale;
-		} else if (this.object instanceof OrthographicCamera) {
+		} else if (this.object instanceof THREE.OrthographicCamera) {
 			this.object.zoom = Math.max(this.minZoom, Math.min(this.maxZoom, this.object.zoom * dollyScale));
 			this.object.updateProjectionMatrix();
 			this.zoomChanged = true;
@@ -633,9 +625,9 @@ export class OrbitControls extends EventDispatcher {
 	}
 
 	dollyOut(dollyScale) {
-		if (this.object instanceof PerspectiveCamera) {
+		if (this.object instanceof THREE.PerspectiveCamera) {
 			this.scale *= dollyScale;
-		} else if (this.object instanceof OrthographicCamera) {
+		} else if (this.object instanceof THREE.OrthographicCamera) {
 			this.object.zoom = Math.max(this.minZoom, Math.min(this.maxZoom, this.object.zoom / dollyScale));
 			this.object.updateProjectionMatrix();
 			this.zoomChanged = true;
@@ -699,7 +691,7 @@ export class OrbitControls extends EventDispatcher {
 	}
 
 	// backward compatibility
-	// get center(): Vector3 {
+	// get center(): THREE.Vector3 {
 	// 	console.warn("THREE.OrbitControls: .center has been renamed to .target");
 	// 	return this.target;
 	// }
@@ -718,7 +710,7 @@ interface ThreeEvent extends Event {
 	clientX: number;
 	clientY: number;
 	deltaY: number;
-	button: MOUSE;
+	button: THREE.MOUSE;
 	touches: Array<any>;
 	keyCode: number;
 }
@@ -728,7 +720,7 @@ export function createOrbitControls(skinViewer: SkinViewer) {
 
 	// default configuration
 	control.enablePan = false;
-	control.target = new Vector3(0, -12, 0);
+	control.target = new THREE.Vector3(0, -12, 0);
 	control.minDistance = 10;
 	control.maxDistance = 256;
 	control.update();
diff --git a/src/viewer.ts b/src/viewer.ts
index de88999..60df43a 100644
--- a/src/viewer.ts
+++ b/src/viewer.ts
@@ -1,13 +1,7 @@
-import { PerspectiveCamera } from "three/src/cameras/PerspectiveCamera";
-import { DoubleSide, FrontSide, NearestFilter } from "three/src/constants";
-import { MeshBasicMaterial } from "three/src/materials/MeshBasicMaterial";
-import { Vector2 } from "three/src/math/Vector2";
-import { WebGLRenderer } from "three/src/renderers/WebGLRenderer";
-import { Scene } from "three/src/scenes/Scene";
-import { Texture } from "three/src/textures/Texture";
-import { RootAnimation } from "./animation";
+import * as THREE from "three";
 import { PlayerObject } from "./model";
-import { isSlimSkin, loadCapeToCanvas, loadSkinToCanvas } from "./utils";
+import { RootAnimation } from "./animation";
+import { loadSkinToCanvas, loadCapeToCanvas, isSlimSkin } from "./utils";
 
 export interface SkinViewerOptions {
 	domElement: Node;
@@ -28,19 +22,19 @@ export class SkinViewer {
 
 	public readonly skinImg: HTMLImageElement;
 	public readonly skinCanvas: HTMLCanvasElement;
-	public readonly skinTexture: Texture;
+	public readonly skinTexture: THREE.Texture;
 
 	public readonly capeImg: HTMLImageElement;
 	public readonly capeCanvas: HTMLCanvasElement;
-	public readonly capeTexture: Texture;
+	public readonly capeTexture: THREE.Texture;
 
-	public readonly layer1Material: MeshBasicMaterial;
-	public readonly layer2Material: MeshBasicMaterial;
-	public readonly capeMaterial: MeshBasicMaterial;
+	public readonly layer1Material: THREE.MeshBasicMaterial;
+	public readonly layer2Material: THREE.MeshBasicMaterial;
+	public readonly capeMaterial: THREE.MeshBasicMaterial;
 
-	public readonly scene: Scene;
-	public readonly camera: PerspectiveCamera;
-	public readonly renderer: WebGLRenderer;
+	public readonly scene: THREE.Scene;
+	public readonly camera: THREE.PerspectiveCamera;
+	public readonly renderer: THREE.WebGLRenderer;
 
 	public readonly playerObject: PlayerObject;
 
@@ -55,29 +49,29 @@ export class SkinViewer {
 		// texture
 		this.skinImg = new Image();
 		this.skinCanvas = document.createElement("canvas");
-		this.skinTexture = new Texture(this.skinCanvas);
-		this.skinTexture.magFilter = NearestFilter;
-		this.skinTexture.minFilter = NearestFilter;
+		this.skinTexture = new THREE.Texture(this.skinCanvas);
+		this.skinTexture.magFilter = THREE.NearestFilter;
+		this.skinTexture.minFilter = THREE.NearestFilter;
 
 		this.capeImg = new Image();
 		this.capeCanvas = document.createElement("canvas");
-		this.capeTexture = new Texture(this.capeCanvas);
-		this.capeTexture.magFilter = NearestFilter;
-		this.capeTexture.minFilter = NearestFilter;
+		this.capeTexture = new THREE.Texture(this.capeCanvas);
+		this.capeTexture.magFilter = THREE.NearestFilter;
+		this.capeTexture.minFilter = THREE.NearestFilter;
 
-		this.layer1Material = new MeshBasicMaterial({ map: this.skinTexture, side: FrontSide });
-		this.layer2Material = new MeshBasicMaterial({ map: this.skinTexture, transparent: true, opacity: 1, side: DoubleSide, alphaTest: 0.5 });
-		this.capeMaterial = new MeshBasicMaterial({ map: this.capeTexture, transparent: true, opacity: 1, side: DoubleSide, alphaTest: 0.5 });
+		this.layer1Material = new THREE.MeshBasicMaterial({ map: this.skinTexture, side: THREE.FrontSide });
+		this.layer2Material = new THREE.MeshBasicMaterial({ map: this.skinTexture, transparent: true, opacity: 1, side: THREE.DoubleSide, alphaTest: 0.5 });
+		this.capeMaterial = new THREE.MeshBasicMaterial({ map: this.capeTexture, transparent: true, opacity: 1, side: THREE.DoubleSide, alphaTest: 0.5 });
 
 		// scene
-		this.scene = new Scene();
+		this.scene = new THREE.Scene();
 
 		// Use smaller fov to avoid distortion
-		this.camera = new PerspectiveCamera(40);
+		this.camera = new THREE.PerspectiveCamera(40);
 		this.camera.position.y = -12;
 		this.camera.position.z = 60;
 
-		this.renderer = new WebGLRenderer({ alpha: true, antialias: false });
+		this.renderer = new THREE.WebGLRenderer({ alpha: true, antialias: false });
 		this.renderer.setSize(300, 300); // default size
 		this.domElement.appendChild(this.renderer.domElement);
 
@@ -173,7 +167,7 @@ export class SkinViewer {
 	}
 
 	get width() {
-		const target = new Vector2();
+		const target = new THREE.Vector2();
 		return this.renderer.getSize(target).width;
 	}
 
@@ -182,7 +176,7 @@ export class SkinViewer {
 	}
 
 	get height() {
-		const target = new Vector2();
+		const target = new THREE.Vector2();
 		return this.renderer.getSize(target).height;
 	}
 
diff --git a/tslint.json b/tslint.json
index 0015a4c..48212b6 100644
--- a/tslint.json
+++ b/tslint.json
@@ -26,8 +26,7 @@
 		],
 		"max-classes-per-file": false,
 		"interface-name": false,
-		"member-ordering": false,
-		"no-submodule-imports": false
+		"member-ordering": false
 	},
 	"rulesDirectory": []
 }