Ubujira
/
skinview3d
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #34 from Hacksore/gh-pages 

Update demo
This commit is contained in:
Haowei Wen 2018-10-29 02:02:51 +08:00 committed by GitHub
parent 0b9d54b551 bea60c3d85
commit af83567de7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
31 changed files with 5565 additions and 3021 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

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

22
dist/animation.d.ts vendored Normal file
View File

@ -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;

33
dist/model.d.ts vendored Normal file
View File

@ -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);
}

123
dist/orbit_controls.d.ts vendored Normal file
View File

@ -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;

5
dist/skinview3d.d.ts vendored Normal file
View File

@ -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";

1234
dist/skinview3d.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

7
dist/skinview3d.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1214
dist/skinview3d.module.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

3
dist/utils.d.ts vendored Normal file
View File

@ -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;

39
dist/viewer.d.ts vendored Normal file
View File

@ -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;
}

BIN
img/hd_cape.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 278 KiB

155
index.html
View File

@ -1,66 +1,139 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>skinview3d examples</title>
<style>
body, html { background: #444444; color: #fff; }
canvas { border: 1px solid white; }
body, html {
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:
<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 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>
</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:
<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>
<h4> Animation Mouse Control</h4>
<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>
</div>
<p> Width: <input type="text" id="width" value="600" size="5"></input>
Height: <input type="text" id="height" value="600" size="5"></input>
<button type="button" onclick="resizeSkinViewer()">Change Size</button>
</p>
<div>
<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>
</div>
<p> Skin Url:
<input type="text" id="skin_url" value="img/hatsune_miku.png"></input>
<br>
Cape Url:
<input type="text" id="cape_url" value="img/mojang_cape.png"></input>
<button type="button" onclick="hotReloadTextures()">Load Textures</button>
</p>
<div>
<h4>Layers</h4>
<p> All textures available to load:
<ul>
<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="head" type="checkbox" onclick="togglePart('head')" checked="checked" />
<label for="head">Head</label>
<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>

1
js/build/revision
View File

@ -1 +0,0 @@
41b8ab9dab3b7d4d873ee8944cb783dee5b5a9ce

1440
js/build/skinview3d.js
View File

File diff suppressed because it is too large Load Diff

1
js/build/skinview3d.js.map
View File

File diff suppressed because one or more lines are too long

63
js/build/skinview3d.min.js vendored
View File

File diff suppressed because one or more lines are too long

1
js/build/skinview3d.min.js.map
View File

File diff suppressed because one or more lines are too long

1421
js/build/skinview3d.module.js
View File

File diff suppressed because it is too large Load Diff

1
js/build/skinview3d.module.js.map
View File

File diff suppressed because one or more lines are too long

22
js/dist/animation.d.ts vendored Normal file
View File

@ -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;

33
js/dist/model.d.ts vendored Normal file
View File

@ -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);
}

123
js/dist/orbit_controls.d.ts vendored Normal file
View File

@ -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;

1
js/dist/revision vendored Normal file
View File

@ -0,0 +1 @@
c2d91ca51c2d3b49ab5009593f2d6e96a623dadf

5
js/dist/skinview3d.d.ts vendored Normal file
View File

@ -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";

1234
js/dist/skinview3d.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

7
js/dist/skinview3d.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1214
js/dist/skinview3d.module.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

3
js/dist/utils.d.ts vendored Normal file
View File

@ -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;

39
js/dist/viewer.d.ts vendored Normal file
View File

@ -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;
}

132
js/example.js
View File

@ -2,85 +2,121 @@
var skinViewer, control, handles = {}, globalAnimationSpeed = 1;
var skinParts = {}
function el(id) {
return document.getElementById(id);
return document.getElementById(id);
}
function initSkinViewer() {
if (skinViewer instanceof skinview3d.SkinViewer) {
skinViewer.dispose();
handles = {};
control = undefined;
}
if (skinViewer instanceof skinview3d.SkinViewer) {
skinViewer.dispose();
handles = {};
control = undefined;
}
// Reset animation speed
el('speed').value = globalAnimationSpeed = 1;
// Reset animation speed
el('speed').value = globalAnimationSpeed = 1;
skinViewer = new skinview3d.SkinViewer({
domElement: el("skin_container"),
width: el('width').value,
height: el('height').value,
skinUrl: el('skin_url').value,
capeUrl: el('cape_url').value
});
skinViewer = new skinview3d.SkinViewer({
domElement: el("skin_container"),
width: el('width').value,
height: el('height').value,
skinUrl: el('skin_url').value,
capeUrl: el('cape_url').value || null
});
skinViewer.camera.position.z = 70;
skinViewer.animation = new skinview3d.CompositeAnimation();
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;
control = skinview3d.createOrbitControls(skinViewer);
}
function hotReloadTextures() {
skinViewer.skinUrl = el('skin_url').value;
skinViewer.capeUrl = el('cape_url').value;
var capeObject = skinViewer.playerObject.cape;
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() {
skinViewer.width = el('width').value;
skinViewer.height = el('height').value;
skinViewer.width = el('width').value;
skinViewer.height = el('height').value;
}
function pause() {
skinViewer.animationPaused = !skinViewer.animationPaused;
skinViewer.animationPaused = !skinViewer.animationPaused;
}
function walk() {
if (handles.run) {
handles.run.remove();
delete handles.run;
}
if (handles.run) {
handles.run.remove();
delete handles.run;
}
handles.walk = handles.walk || skinViewer.animation.add(skinview3d.WalkingAnimation);
handles.walk.speed = globalAnimationSpeed;
handles.walk = handles.walk || skinViewer.animation.add(skinview3d.WalkingAnimation);
handles.walk.speed = globalAnimationSpeed;
}
function run() {
if (handles.walk) {
handles.walk.remove();
delete handles.walk;
}
if (handles.walk) {
handles.walk.remove();
delete handles.walk;
}
handles.run = handles.run || skinViewer.animation.add(skinview3d.RunningAnimation);
handles.run.speed = globalAnimationSpeed;
handles.run = handles.run || skinViewer.animation.add(skinview3d.RunningAnimation);
handles.run.speed = globalAnimationSpeed;
}
function rotate() {
if (handles.rotate) {
handles.rotate.paused = !handles.rotate.paused;
} else {
handles.rotate = skinViewer.animation.add(skinview3d.RotatingAnimation);
handles.rotate.speed = globalAnimationSpeed;
}
if (handles.rotate) {
handles.rotate.paused = !handles.rotate.paused;
} else {
handles.rotate = skinViewer.animation.add(skinview3d.RotatingAnimation);
handles.rotate.speed = globalAnimationSpeed;
}
}
function togglePart(partName) {
skinParts[partName].visible = !skinParts[partName].visible;
}
function setGlobalAnimationSpeed() {
var currentSpeed = el('speed').value;
var currentSpeed = el('speed').value;
if (! isNaN(currentSpeed)) {
globalAnimationSpeed = currentSpeed;
if (!isNaN(currentSpeed)) {
globalAnimationSpeed = currentSpeed;
for (var key in handles) {
handles[key].speed = currentSpeed;
}
}
for (var key in handles) {
handles[key].speed = currentSpeed;
}
}
}

5
update-codebase.sh
View File

@ -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"