Update demo

Change CSS to make a bit better from UX perspective
Add layer toggle for all the parts
Change skin/cape to dropdown
Fix the path for output from build->dist in update script
Add HD cape

.gitignore

@@ -62,4 +62,5 @@ _ignore/
 
 package.json.lock
 
-!js/build/
+!js/dist/
+.rpt2_cache

dist/animation.d.ts

@@ -0,0 +1,22 @@
+import { PlayerObject } from "./model";
+export interface IAnimation {
+    play(player: PlayerObject, time: number): void;
+}
+export declare type AnimationFn = (player: PlayerObject, time: number) => void;
+export declare type Animation = AnimationFn | IAnimation;
+export declare function invokeAnimation(animation: Animation, player: PlayerObject, time: number): void;
+export interface AnimationHandle {
+    paused: boolean;
+    speed: number;
+    readonly animation: Animation;
+    reset(): void;
+    remove(): void;
+}
+export declare class CompositeAnimation implements IAnimation {
+    readonly handles: Set<AnimationHandle & IAnimation>;
+    add(animation: Animation): AnimationHandle;
+    play(player: PlayerObject, time: number): void;
+}
+export declare const WalkingAnimation: Animation;
+export declare const RunningAnimation: Animation;
+export declare const RotatingAnimation: Animation;

dist/model.d.ts

@@ -0,0 +1,33 @@
+import * as THREE from "three";
+/**
+ * Notice that innerLayer and outerLayer may NOT be the direct children of the Group.
+ */
+export declare class BodyPart extends THREE.Group {
+    readonly innerLayer: THREE.Object3D;
+    readonly outerLayer: THREE.Object3D;
+    constructor(innerLayer: THREE.Object3D, outerLayer: THREE.Object3D);
+}
+export declare class SkinObject extends THREE.Group {
+    readonly head: BodyPart;
+    readonly body: BodyPart;
+    readonly rightArm: BodyPart;
+    readonly leftArm: BodyPart;
+    readonly rightLeg: BodyPart;
+    readonly leftLeg: BodyPart;
+    private modelListeners;
+    private _slim;
+    constructor(layer1Material: THREE.MeshBasicMaterial, layer2Material: THREE.MeshBasicMaterial);
+    slim: boolean;
+    private getBodyParts;
+    setInnerLayerVisible(value: boolean): void;
+    setOuterLayerVisible(value: boolean): void;
+}
+export declare class CapeObject extends THREE.Group {
+    readonly cape: THREE.Mesh;
+    constructor(capeMaterial: THREE.MeshBasicMaterial);
+}
+export declare class PlayerObject extends THREE.Group {
+    readonly skin: SkinObject;
+    readonly cape: CapeObject;
+    constructor(layer1Material: THREE.MeshBasicMaterial, layer2Material: THREE.MeshBasicMaterial, capeMaterial: THREE.MeshBasicMaterial);
+}

dist/orbit_controls.d.ts

@@ -0,0 +1,123 @@
+import * as THREE from "three";
+import { SkinViewer } from "./viewer";
+export declare class OrbitControls extends THREE.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
+     */
+    object: THREE.Camera;
+    domElement: HTMLElement | HTMLDocument;
+    window: Window;
+    enabled: boolean;
+    target: THREE.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: THREE.MOUSE;
+        ZOOM: THREE.MOUSE;
+        PAN: THREE.MOUSE;
+    };
+    enableDamping: boolean;
+    dampingFactor: number;
+    private spherical;
+    private sphericalDelta;
+    private scale;
+    private target0;
+    private position0;
+    private zoom0;
+    private state;
+    private panOffset;
+    private zoomChanged;
+    private rotateStart;
+    private rotateEnd;
+    private rotateDelta;
+    private panStart;
+    private panEnd;
+    private panDelta;
+    private dollyStart;
+    private dollyEnd;
+    private dollyDelta;
+    private updateLastPosition;
+    private updateOffset;
+    private updateQuat;
+    private updateLastQuaternion;
+    private updateQuatInverse;
+    private panLeftV;
+    private panUpV;
+    private panInternalOffset;
+    private onContextMenu;
+    private onMouseUp;
+    private onMouseDown;
+    private onMouseMove;
+    private onMouseWheel;
+    private onTouchStart;
+    private onTouchEnd;
+    private onTouchMove;
+    private onKeyDown;
+    constructor(object: THREE.Camera, domElement?: HTMLElement, domWindow?: Window);
+    update(): boolean;
+    panLeft(distance: number, objectMatrix: any): void;
+    panUp(distance: number, objectMatrix: any): void;
+    pan(deltaX: number, deltaY: number): void;
+    dollyIn(dollyScale: any): void;
+    dollyOut(dollyScale: any): void;
+    getAutoRotationAngle(): number;
+    getZoomScale(): number;
+    rotateLeft(angle: number): void;
+    rotateUp(angle: number): void;
+    getPolarAngle(): number;
+    getAzimuthalAngle(): number;
+    dispose(): void;
+    reset(): void;
+}
+export declare function createOrbitControls(skinViewer: SkinViewer): OrbitControls;

dist/skinview3d.d.ts

@@ -0,0 +1,5 @@
+export { SkinObject, BodyPart, CapeObject, PlayerObject } from "./model";
+export { SkinViewer, SkinViewerOptions } from "./viewer";
+export { OrbitControls, createOrbitControls } from "./orbit_controls";
+export { IAnimation, AnimationFn, Animation, invokeAnimation, AnimationHandle, CompositeAnimation, WalkingAnimation, RunningAnimation, RotatingAnimation } from "./animation";
+export { isSlimSkin } from "./utils";

dist/utils.d.ts

@@ -0,0 +1,3 @@
+export declare function loadSkinToCanvas(canvas: HTMLCanvasElement, image: HTMLImageElement): void;
+export declare function loadCapeToCanvas(canvas: HTMLCanvasElement, image: HTMLImageElement): void;
+export declare function isSlimSkin(canvasOrImage: HTMLCanvasElement | HTMLImageElement): boolean;

dist/viewer.d.ts

@@ -0,0 +1,39 @@
+import * as THREE from "three";
+import { PlayerObject } from "./model";
+export interface SkinViewerOptions {
+    domElement: Node;
+    animation?: Animation;
+    skinUrl?: string;
+    capeUrl?: string;
+    width?: number;
+    height?: number;
+    detectModel?: boolean;
+}
+export declare class SkinViewer {
+    readonly domElement: Node;
+    animation: Animation | null;
+    detectModel: boolean;
+    animationPaused: boolean;
+    animationTime: number;
+    disposed: boolean;
+    readonly skinImg: HTMLImageElement;
+    readonly skinCanvas: HTMLCanvasElement;
+    readonly skinTexture: THREE.Texture;
+    readonly capeImg: HTMLImageElement;
+    readonly capeCanvas: HTMLCanvasElement;
+    readonly capeTexture: THREE.Texture;
+    readonly layer1Material: THREE.MeshBasicMaterial;
+    readonly layer2Material: THREE.MeshBasicMaterial;
+    readonly capeMaterial: THREE.MeshBasicMaterial;
+    readonly scene: THREE.Scene;
+    readonly camera: THREE.PerspectiveCamera;
+    readonly renderer: THREE.WebGLRenderer;
+    readonly playerObject: PlayerObject;
+    constructor(options: SkinViewerOptions);
+    setSize(width: any, height: any): void;
+    dispose(): void;
+    skinUrl: string;
+    capeUrl: string;
+    width: number;
+    height: number;
+}

index.html

@@ -1,66 +1,139 @@
 <!DOCTYPE html>
 <html>
+
 <head>
 	<meta charset="utf-8">
 	<title>skinview3d examples</title>
 	<style>
-		body, html { background: #444444; color: #fff; }
+		body, html { 
-		canvas { border: 1px solid white; }
+			background: #ffffff; 
+			color: #000000;
+			padding: 0;
+			margin: 0;
+		}
+		canvas { 
+			background: #5a76f3;	
+
+		}
+
+		.controls {
+			padding: 0 12px 0 12px;
+		}
+		.controls div {
+			margin: 6px 0 6px;
+		}
+
+		h4{
+			padding: 0;
+			margin: 0 0 4px 0;
+		}
 	</style>
 </head>
+
 <body>
-	<br>
+
 	<div id="skin_container"></div>
 
-	<p> Animate:
+	<div class="controls">
+
+		<div>
+			<h4>Animate</h4>
 			<button type="button" onclick="walk()">Walk</button>
 			<button type="button" onclick="run()">Run!</button>
 			<button type="button" onclick="rotate()">Rotate</button>
 			<button type="button" onclick="pause()">Pause / Resume</button>
 			<button type="button" onclick="initSkinViewer()">Reset</button>
 			<br>
-		Global Animation Speed: x<input type="text" id="speed" value="1" title="1 for default" size="5"></input>
+		</div>
+
+		Global Animation Speed: x<input type="text" id="speed" value="1" title="1 for default" size="5" />
 		<button type="button" onclick="setGlobalAnimationSpeed()">Set</button>
-	</p>
 
-	<p> Animation Mouse Control:
+		<div>
-		<input type="checkbox" id="rotate" checked="checked" onclick="control.enableRotate = this.checked"><label for="rotate">Enable Rotate</label>
+			<h4> Animation Mouse Control</h4>
-		<input type="checkbox" id="zoom" checked="checked" onclick="control.enableZoom = this.checked"><label for="zoom">Enable Zoom</label>
+			<input type="checkbox" id="rotate" checked="checked" onclick="control.enableRotate = this.checked"><label for="rotate">Enable
+				Rotate</label>
+			<input type="checkbox" id="zoom" checked="checked" onclick="control.enableZoom = this.checked"><label for="zoom">Enable
+				Zoom</label>
 			<input type="checkbox" id="pan" onclick="control.enablePan = this.checked"><label for="pan">Enable Pan</label>
-	</p>
+		</div>
 
-	<p> Width:  <input type="text" id="width"  value="600" size="5"></input>
+		<div>
-		Height: <input type="text" id="height" value="600" size="5"></input>
+			<h4>Canvas Size</h4>
+			Width: <input type="text" id="width" value="600" size="5" />
+			Height: <input type="text" id="height" value="600" size="5" />
 			<button type="button" onclick="resizeSkinViewer()">Change Size</button>
-	</p>
+		</div>
 
-	<p> Skin Url:
+		<div>
-		<input type="text" id="skin_url" value="img/hatsune_miku.png"></input>
+			<h4>Layers</h4>
-		<br>
-		Cape Url:
-		<input type="text" id="cape_url" value="img/mojang_cape.png"></input>
-		<button type="button" onclick="hotReloadTextures()">Load Textures</button>
-	</p>
 
-	<p> All textures available to load:
+			<input id="head" type="checkbox" onclick="togglePart('head')" checked="checked" />
-		<ul>
+			<label for="head">Head</label>
-			<li>img/1_8_texturemap_redux.png</li>
-			<li>img/cape.png</li>
-			<li>img/Hacksore.png</li>
-			<li>img/haka.png</li>
-			<li>img/hatsune_miku.png</li>
-			<li>img/ironman_hd.png</li>
-			<li>img/mojang_cape.png</li>
-			<li>img/sethbling.png</li>
-		</ul>
-	</p>
 
+			<input id="body" type="checkbox" onclick="togglePart('body')" checked="checked" />
+			<label for="body">Body</label>
+
+			<input id="leftArm" type="checkbox" onclick="togglePart('leftArm')" checked="checked" />
+			<label for="leftArm">LeftArm</label>
+
+			<input id="rightArm" type="checkbox" onclick="togglePart('rightArm')" checked="checked" />
+			<label for="rightArm">RightArm</label>
+
+			<input id="leftLeg" type="checkbox" onclick="togglePart('leftLeg')" checked="checked" />
+			<label for="leftLeg">LeftLeg</label>
+
+			<input id="rightLeg" type="checkbox" onclick="togglePart('rightLeg')" checked="checked" />
+			<label for="rightLeg">RightLeg</label>
+
+			<br />
+			<input id="head2" type="checkbox" onclick="togglePart('head2')" checked="checked" />
+			<label for="head2">Head2</label>
+
+			<input id="body2" type="checkbox" onclick="togglePart('body2')" checked="checked" />
+			<label for="body2">Body2</label>
+
+			<input id="leftArm2" type="checkbox" onclick="togglePart('leftArm2')" checked="checked" />
+			<label for="leftArm2">LeftArm2</label>
+
+			<input id="rightArm2" type="checkbox" onclick="togglePart('rightArm2')" checked="checked" />
+			<label for="rightArm2">RightArm2</label>
+
+			<input id="leftLeg2" type="checkbox" onclick="togglePart('leftLeg2')" checked="checked" />
+			<label for="leftLeg2">LeftLeg2</label>
+
+			<input id="rightLeg2" type="checkbox" onclick="togglePart('rightLeg2')" checked="checked" />
+			<label for="rightLeg2">RightLeg2</label>
+		</div>
+
+		<div>
+			<h4>Skin</h4>
+			<select id="skin_url" onchange="hotReloadTextures()">
+				<option value="img/1_8_texturemap_redux.png">Texture Map (64x64)</option>
+				<option value="img/Hacksore.png">Hacksore (64x32)</option>
+				<option value="img/haka.png">Haka (64x64)</option>
+				<option value="img/hatsune_miku.png">Hatsune Miku (64x64)</option>
+				<option value="img/ironman_hd.png">Ironman (256x265)</option>
+				<option value="img/sethbling.png">Sethbling (64x32)</option>
+			</select>
+		</div>
+		<div>
+			<h4>Cape</h4>
+			<select id="cape_url" onchange="hotReloadTextures()">
+				<option value="">None</option>
+				<option value="img/cape.png">Mojang Legacy</option>
+				<option value="img/mojang_cape.png">Mojang</option>
+				<option value="img/hd_cape.png">HD Cape</option>
+			</select>
+		</div>
+	</div>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.min.js"></script>
-	<script type="text/javascript" src="js/build/skinview3d.min.js"></script>
+	<script type="text/javascript" src="js/dist/skinview3d.min.js"></script>
 	<script type="text/javascript" src="js/example.js"></script>
 	<script>
 		initSkinViewer();
 		walk();
 	</script>
 </body>
+
 </html>

js/build/revision

@@ -1 +0,0 @@
-41b8ab9dab3b7d4d873ee8944cb783dee5b5a9ce

js/dist/animation.d.ts

@@ -0,0 +1,22 @@
+import { PlayerObject } from "./model";
+export interface IAnimation {
+    play(player: PlayerObject, time: number): void;
+}
+export declare type AnimationFn = (player: PlayerObject, time: number) => void;
+export declare type Animation = AnimationFn | IAnimation;
+export declare function invokeAnimation(animation: Animation, player: PlayerObject, time: number): void;
+export interface AnimationHandle {
+    paused: boolean;
+    speed: number;
+    readonly animation: Animation;
+    reset(): void;
+    remove(): void;
+}
+export declare class CompositeAnimation implements IAnimation {
+    readonly handles: Set<AnimationHandle & IAnimation>;
+    add(animation: Animation): AnimationHandle;
+    play(player: PlayerObject, time: number): void;
+}
+export declare const WalkingAnimation: Animation;
+export declare const RunningAnimation: Animation;
+export declare const RotatingAnimation: Animation;

js/dist/model.d.ts

@@ -0,0 +1,33 @@
+import * as THREE from "three";
+/**
+ * Notice that innerLayer and outerLayer may NOT be the direct children of the Group.
+ */
+export declare class BodyPart extends THREE.Group {
+    readonly innerLayer: THREE.Object3D;
+    readonly outerLayer: THREE.Object3D;
+    constructor(innerLayer: THREE.Object3D, outerLayer: THREE.Object3D);
+}
+export declare class SkinObject extends THREE.Group {
+    readonly head: BodyPart;
+    readonly body: BodyPart;
+    readonly rightArm: BodyPart;
+    readonly leftArm: BodyPart;
+    readonly rightLeg: BodyPart;
+    readonly leftLeg: BodyPart;
+    private modelListeners;
+    private _slim;
+    constructor(layer1Material: THREE.MeshBasicMaterial, layer2Material: THREE.MeshBasicMaterial);
+    slim: boolean;
+    private getBodyParts;
+    setInnerLayerVisible(value: boolean): void;
+    setOuterLayerVisible(value: boolean): void;
+}
+export declare class CapeObject extends THREE.Group {
+    readonly cape: THREE.Mesh;
+    constructor(capeMaterial: THREE.MeshBasicMaterial);
+}
+export declare class PlayerObject extends THREE.Group {
+    readonly skin: SkinObject;
+    readonly cape: CapeObject;
+    constructor(layer1Material: THREE.MeshBasicMaterial, layer2Material: THREE.MeshBasicMaterial, capeMaterial: THREE.MeshBasicMaterial);
+}

js/dist/orbit_controls.d.ts

@@ -0,0 +1,123 @@
+import * as THREE from "three";
+import { SkinViewer } from "./viewer";
+export declare class OrbitControls extends THREE.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
+     */
+    object: THREE.Camera;
+    domElement: HTMLElement | HTMLDocument;
+    window: Window;
+    enabled: boolean;
+    target: THREE.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: THREE.MOUSE;
+        ZOOM: THREE.MOUSE;
+        PAN: THREE.MOUSE;
+    };
+    enableDamping: boolean;
+    dampingFactor: number;
+    private spherical;
+    private sphericalDelta;
+    private scale;
+    private target0;
+    private position0;
+    private zoom0;
+    private state;
+    private panOffset;
+    private zoomChanged;
+    private rotateStart;
+    private rotateEnd;
+    private rotateDelta;
+    private panStart;
+    private panEnd;
+    private panDelta;
+    private dollyStart;
+    private dollyEnd;
+    private dollyDelta;
+    private updateLastPosition;
+    private updateOffset;
+    private updateQuat;
+    private updateLastQuaternion;
+    private updateQuatInverse;
+    private panLeftV;
+    private panUpV;
+    private panInternalOffset;
+    private onContextMenu;
+    private onMouseUp;
+    private onMouseDown;
+    private onMouseMove;
+    private onMouseWheel;
+    private onTouchStart;
+    private onTouchEnd;
+    private onTouchMove;
+    private onKeyDown;
+    constructor(object: THREE.Camera, domElement?: HTMLElement, domWindow?: Window);
+    update(): boolean;
+    panLeft(distance: number, objectMatrix: any): void;
+    panUp(distance: number, objectMatrix: any): void;
+    pan(deltaX: number, deltaY: number): void;
+    dollyIn(dollyScale: any): void;
+    dollyOut(dollyScale: any): void;
+    getAutoRotationAngle(): number;
+    getZoomScale(): number;
+    rotateLeft(angle: number): void;
+    rotateUp(angle: number): void;
+    getPolarAngle(): number;
+    getAzimuthalAngle(): number;
+    dispose(): void;
+    reset(): void;
+}
+export declare function createOrbitControls(skinViewer: SkinViewer): OrbitControls;

js/dist/revision

@@ -0,0 +1 @@
+c2d91ca51c2d3b49ab5009593f2d6e96a623dadf

js/dist/skinview3d.d.ts

@@ -0,0 +1,5 @@
+export { SkinObject, BodyPart, CapeObject, PlayerObject } from "./model";
+export { SkinViewer, SkinViewerOptions } from "./viewer";
+export { OrbitControls, createOrbitControls } from "./orbit_controls";
+export { IAnimation, AnimationFn, Animation, invokeAnimation, AnimationHandle, CompositeAnimation, WalkingAnimation, RunningAnimation, RotatingAnimation } from "./animation";
+export { isSlimSkin } from "./utils";

js/dist/utils.d.ts

@@ -0,0 +1,3 @@
+export declare function loadSkinToCanvas(canvas: HTMLCanvasElement, image: HTMLImageElement): void;
+export declare function loadCapeToCanvas(canvas: HTMLCanvasElement, image: HTMLImageElement): void;
+export declare function isSlimSkin(canvasOrImage: HTMLCanvasElement | HTMLImageElement): boolean;

js/dist/viewer.d.ts

@@ -0,0 +1,39 @@
+import * as THREE from "three";
+import { PlayerObject } from "./model";
+export interface SkinViewerOptions {
+    domElement: Node;
+    animation?: Animation;
+    skinUrl?: string;
+    capeUrl?: string;
+    width?: number;
+    height?: number;
+    detectModel?: boolean;
+}
+export declare class SkinViewer {
+    readonly domElement: Node;
+    animation: Animation | null;
+    detectModel: boolean;
+    animationPaused: boolean;
+    animationTime: number;
+    disposed: boolean;
+    readonly skinImg: HTMLImageElement;
+    readonly skinCanvas: HTMLCanvasElement;
+    readonly skinTexture: THREE.Texture;
+    readonly capeImg: HTMLImageElement;
+    readonly capeCanvas: HTMLCanvasElement;
+    readonly capeTexture: THREE.Texture;
+    readonly layer1Material: THREE.MeshBasicMaterial;
+    readonly layer2Material: THREE.MeshBasicMaterial;
+    readonly capeMaterial: THREE.MeshBasicMaterial;
+    readonly scene: THREE.Scene;
+    readonly camera: THREE.PerspectiveCamera;
+    readonly renderer: THREE.WebGLRenderer;
+    readonly playerObject: PlayerObject;
+    constructor(options: SkinViewerOptions);
+    setSize(width: any, height: any): void;
+    dispose(): void;
+    skinUrl: string;
+    capeUrl: string;
+    width: number;
+    height: number;
+}

js/example.js

@@ -2,6 +2,8 @@
 
 var skinViewer, control, handles = {}, globalAnimationSpeed = 1;
 
+var skinParts = {}
+
 function el(id) {
 	return document.getElementById(id);
 }
@@ -21,18 +23,48 @@ function initSkinViewer() {
 		width: el('width').value,
 		height: el('height').value,
 		skinUrl: el('skin_url').value,
-        capeUrl:    el('cape_url').value
+		capeUrl: el('cape_url').value || null
 	});
 
 	skinViewer.camera.position.z = 70;
 	skinViewer.animation = new skinview3d.CompositeAnimation();
 
 	control = skinview3d.createOrbitControls(skinViewer);
+
+	var parts = skinViewer.playerObject.skin;
+
+	// set inner parts
+	skinParts.head = parts.head.innerLayer;
+	skinParts.body = parts.body.innerLayer;
+	skinParts.leftArm = parts.leftArm.innerLayer;
+	skinParts.rightArm = parts.rightArm.innerLayer;
+	skinParts.leftLeg = parts.leftLeg.innerLayer;
+	skinParts.rightLeg = parts.rightLeg.innerLayer;
+
+	// set outter parts
+	skinParts.head2 = parts.head.outerLayer;
+	skinParts.body2 = parts.body.outerLayer;
+	skinParts.leftArm2 = parts.leftArm.outerLayer;
+	skinParts.rightArm2 = parts.rightArm.outerLayer;
+	skinParts.leftLeg2 = parts.leftLeg.outerLayer;
+	skinParts.rightLeg2 = parts.rightLeg.outerLayer;
+
 }
 
 function hotReloadTextures() {
-    skinViewer.skinUrl = el('skin_url').value;
+	var capeObject = skinViewer.playerObject.cape;
-    skinViewer.capeUrl = el('cape_url').value;
+	var cape = el('cape_url').value;
+	var skin = el('skin_url').value;
+
+	// I've noted there is not a good way to set the cape to null
+	// so we hide it as work around
+	if (cape === "") {
+		capeObject.visible = false;
+		return;
+	}
+
+	skinViewer.skinUrl = skin;
+	skinViewer.capeUrl = cape;
 }
 
 function resizeSkinViewer() {
@@ -73,10 +105,14 @@ function rotate() {
 	}
 }
 
+function togglePart(partName) {
+	skinParts[partName].visible = !skinParts[partName].visible;
+}
+
 function setGlobalAnimationSpeed() {
 	var currentSpeed = el('speed').value;
 
-    if (! isNaN(currentSpeed)) {
+	if (!isNaN(currentSpeed)) {
 		globalAnimationSpeed = currentSpeed;
 
 		for (var key in handles) {

update-codebase.sh

@@ -6,7 +6,7 @@ if [ ! -d ".git" ];then
 fi
 
 checkout_dir="_ignore/master"
-output_dir="js/build"
+output_dir="js/dist"
 revision_file="$output_dir/revision"
 
 if [ -f "$revision_file" ];then
@@ -27,10 +27,11 @@ cd -- $checkout_dir
 
 echo "> Building"
 npm install
+npm run build
 
 echo "> Copying build outputs"
 cd -- $original_dir
 rm -rf -- $output_dir
-cp -r -- "$checkout_dir/build" $output_dir
+cp -r -- "$checkout_dir/dist" $output_dir
 echo "$master_revision" > $revision_file
 echo "> New revison of build outputs: $master_revision"