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
This commit is contained in:
Hacksore
parent
0b9d54b551
commit
bea60c3d85
|
|
@ -62,4 +62,5 @@ _ignore/
|
|||
|
||||
package.json.lock
|
||||
|
||||
!js/build/
|
||||
!js/dist/
|
||||
.rpt2_cache
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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";
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 278 KiB |
157
index.html
157
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; }
|
||||
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>
|
||||
|
||||
</html>
|
||||
|
|
@ -1 +0,0 @@
|
|||
41b8ab9dab3b7d4d873ee8944cb783dee5b5a9ce
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -0,0 +1 @@
|
|||
c2d91ca51c2d3b49ab5009593f2d6e96a623dadf
|
||||
|
|
@ -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";
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
|
|
@ -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;
|
||||
|
|
@ -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
132
js/example.js
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue