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

update codebase

This commit is contained in:
yushijinhun 2020-01-07 13:29:51 +08:00
parent ae68693c08
commit a28adef802
No known key found for this signature in database
GPG Key ID: 5BC167F73EA558E4
9 changed files with 394 additions and 214 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
js/dist/animation.d.ts vendored
View File

@ -1,3 +1,4 @@
import { Clock } from "three";
import { PlayerObject } from "./model"; import { PlayerObject } from "./model";
export interface IAnimation { export interface IAnimation {
play(player: PlayerObject, time: number): void; play(player: PlayerObject, time: number): void;
@ -6,17 +7,31 @@ export declare type AnimationFn = (player: PlayerObject, time: number) => void;
export declare type Animation = AnimationFn | IAnimation; export declare type Animation = AnimationFn | IAnimation;
export declare function invokeAnimation(animation: Animation, player: PlayerObject, time: number): void; export declare function invokeAnimation(animation: Animation, player: PlayerObject, time: number): void;
export interface AnimationHandle { export interface AnimationHandle {
paused: boolean;
speed: number; speed: number;
paused: boolean;
progress: number;
readonly animation: Animation; readonly animation: Animation;
reset(): void; reset(): void;
}
export interface SubAnimationHandle extends AnimationHandle {
remove(): void; remove(): void;
resetAndRemove(): void;
} }
export declare class CompositeAnimation implements IAnimation { export declare class CompositeAnimation implements IAnimation {
readonly handles: Set<AnimationHandle & IAnimation>; readonly handles: Set<AnimationHandle & IAnimation>;
add(animation: Animation): AnimationHandle; add(animation: Animation): AnimationHandle;
play(player: PlayerObject, time: number): void; play(player: PlayerObject, time: number): void;
} }
export declare class RootAnimation extends CompositeAnimation implements AnimationHandle {
speed: number;
progress: number;
readonly clock: Clock;
get animation(): this;
get paused(): boolean;
set paused(value: boolean);
runAnimationLoop(player: PlayerObject): void;
reset(): void;
}
export declare const WalkingAnimation: Animation; export declare const WalkingAnimation: Animation;
export declare const RunningAnimation: Animation; export declare const RunningAnimation: Animation;
export declare const RotatingAnimation: Animation; export declare const RotatingAnimation: Animation;

27
js/dist/model.d.ts vendored
View File

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

16
js/dist/orbit_controls.d.ts vendored
View File

@ -1,6 +1,6 @@
import * as THREE from "three"; import { Camera, EventDispatcher, MOUSE, Vector3 } from "three";
import { SkinViewer } from "./viewer"; import { SkinViewer } from "./viewer";
export declare class OrbitControls extends THREE.EventDispatcher { export declare class OrbitControls extends EventDispatcher {
/** /**
* @preserve * @preserve
* The code was originally from https://github.com/mrdoob/three.js/blob/d45a042cf962e9b1aa9441810ba118647b48aacb/examples/js/controls/OrbitControls.js * The code was originally from https://github.com/mrdoob/three.js/blob/d45a042cf962e9b1aa9441810ba118647b48aacb/examples/js/controls/OrbitControls.js
@ -34,11 +34,11 @@ export declare class OrbitControls extends THREE.EventDispatcher {
* @author WestLangley / http://github.com/WestLangley * @author WestLangley / http://github.com/WestLangley
* @author erich666 / http://erichaines.com * @author erich666 / http://erichaines.com
*/ */
object: THREE.Camera; object: Camera;
domElement: HTMLElement | HTMLDocument; domElement: HTMLElement | HTMLDocument;
window: Window; window: Window;
enabled: boolean; enabled: boolean;
target: THREE.Vector3; target: Vector3;
enableZoom: boolean; enableZoom: boolean;
zoomSpeed: number; zoomSpeed: number;
minDistance: number; minDistance: number;
@ -63,9 +63,9 @@ export declare class OrbitControls extends THREE.EventDispatcher {
BOTTOM: number; BOTTOM: number;
}; };
mouseButtons: { mouseButtons: {
ORBIT: THREE.MOUSE; ORBIT: MOUSE;
ZOOM: THREE.MOUSE; ZOOM: MOUSE;
PAN: THREE.MOUSE; PAN: MOUSE;
}; };
enableDamping: boolean; enableDamping: boolean;
dampingFactor: number; dampingFactor: number;
@ -104,7 +104,7 @@ export declare class OrbitControls extends THREE.EventDispatcher {
private onTouchEnd; private onTouchEnd;
private onTouchMove; private onTouchMove;
private onKeyDown; private onKeyDown;
constructor(object: THREE.Camera, domElement?: HTMLElement, domWindow?: Window); constructor(object: Camera, domElement?: HTMLElement, domWindow?: Window);
update(): boolean; update(): boolean;
panLeft(distance: number, objectMatrix: any): void; panLeft(distance: number, objectMatrix: any): void;
panUp(distance: number, objectMatrix: any): void; panUp(distance: number, objectMatrix: any): void;

2
js/dist/revision vendored
View File

@ -1 +1 @@
c2d91ca51c2d3b49ab5009593f2d6e96a623dadf add0c04c7345524e6a950f6707ee991f00b6d15c

2
js/dist/skinview3d.d.ts vendored
View File

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

324
js/dist/skinview3d.js vendored
View File

@ -7,8 +7,8 @@
(function (global, factory) { (function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('three')) : typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('three')) :
typeof define === 'function' && define.amd ? define(['exports', 'three'], factory) : typeof define === 'function' && define.amd ? define(['exports', 'three'], factory) :
(factory((global.skinview3d = {}),global.THREE)); (global = global || self, factory(global.skinview3d = {}, global.THREE));
}(this, (function (exports,THREE) { 'use strict'; }(this, (function (exports, three) { 'use strict';
/*! ***************************************************************************** /*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved. Copyright (c) Microsoft Corporation. All rights reserved.
@ -41,10 +41,10 @@
function toFaceVertices(x1, y1, x2, y2, w, h) { function toFaceVertices(x1, y1, x2, y2, w, h) {
return [ return [
new THREE.Vector2(x1 / w, 1.0 - y2 / 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 - y2 / h),
new THREE.Vector2(x2 / w, 1.0 - y1 / h), new three.Vector2(x2 / w, 1.0 - y1 / h),
new THREE.Vector2(x1 / w, 1.0 - y1 / h) new three.Vector2(x1 / w, 1.0 - y1 / h)
]; ];
} }
function toSkinVertices(x1, y1, x2, y2) { function toSkinVertices(x1, y1, x2, y2) {
@ -78,10 +78,12 @@
var _this = _super.call(this) || this; var _this = _super.call(this) || this;
_this.innerLayer = innerLayer; _this.innerLayer = innerLayer;
_this.outerLayer = outerLayer; _this.outerLayer = outerLayer;
innerLayer.name = "inner";
outerLayer.name = "outer";
return _this; return _this;
} }
return BodyPart; return BodyPart;
}(THREE.Group)); }(three.Group));
var SkinObject = /** @class */ (function (_super) { var SkinObject = /** @class */ (function (_super) {
__extends(SkinObject, _super); __extends(SkinObject, _super);
function SkinObject(layer1Material, layer2Material) { function SkinObject(layer1Material, layer2Material) {
@ -89,30 +91,32 @@
_this.modelListeners = []; // called when model(slim property) is changed _this.modelListeners = []; // called when model(slim property) is changed
_this._slim = false; _this._slim = false;
// Head // Head
var headBox = new THREE.BoxGeometry(8, 8, 8, 0, 0, 0); var headBox = new three.BoxGeometry(8, 8, 8, 0, 0, 0);
setVertices(headBox, toSkinVertices(8, 0, 16, 8), toSkinVertices(16, 0, 24, 8), toSkinVertices(0, 8, 8, 16), toSkinVertices(8, 8, 16, 16), toSkinVertices(16, 8, 24, 16), toSkinVertices(24, 8, 32, 16)); setVertices(headBox, toSkinVertices(8, 0, 16, 8), toSkinVertices(16, 0, 24, 8), toSkinVertices(0, 8, 8, 16), toSkinVertices(8, 8, 16, 16), toSkinVertices(16, 8, 24, 16), toSkinVertices(24, 8, 32, 16));
var headMesh = new THREE.Mesh(headBox, layer1Material); var headMesh = new three.Mesh(headBox, layer1Material);
var head2Box = new THREE.BoxGeometry(9, 9, 9, 0, 0, 0); var head2Box = new three.BoxGeometry(9, 9, 9, 0, 0, 0);
setVertices(head2Box, toSkinVertices(40, 0, 48, 8), toSkinVertices(48, 0, 56, 8), toSkinVertices(32, 8, 40, 16), toSkinVertices(40, 8, 48, 16), toSkinVertices(48, 8, 56, 16), toSkinVertices(56, 8, 64, 16)); setVertices(head2Box, toSkinVertices(40, 0, 48, 8), toSkinVertices(48, 0, 56, 8), toSkinVertices(32, 8, 40, 16), toSkinVertices(40, 8, 48, 16), toSkinVertices(48, 8, 56, 16), toSkinVertices(56, 8, 64, 16));
var head2Mesh = new THREE.Mesh(head2Box, layer2Material); var head2Mesh = new three.Mesh(head2Box, layer2Material);
head2Mesh.renderOrder = -1; head2Mesh.renderOrder = -1;
_this.head = new BodyPart(headMesh, head2Mesh); _this.head = new BodyPart(headMesh, head2Mesh);
_this.head.name = "head";
_this.head.add(headMesh, head2Mesh); _this.head.add(headMesh, head2Mesh);
_this.add(_this.head); _this.add(_this.head);
// Body // Body
var bodyBox = new THREE.BoxGeometry(8, 12, 4, 0, 0, 0); var bodyBox = new three.BoxGeometry(8, 12, 4, 0, 0, 0);
setVertices(bodyBox, toSkinVertices(20, 16, 28, 20), toSkinVertices(28, 16, 36, 20), toSkinVertices(16, 20, 20, 32), toSkinVertices(20, 20, 28, 32), toSkinVertices(28, 20, 32, 32), toSkinVertices(32, 20, 40, 32)); setVertices(bodyBox, toSkinVertices(20, 16, 28, 20), toSkinVertices(28, 16, 36, 20), toSkinVertices(16, 20, 20, 32), toSkinVertices(20, 20, 28, 32), toSkinVertices(28, 20, 32, 32), toSkinVertices(32, 20, 40, 32));
var bodyMesh = new THREE.Mesh(bodyBox, layer1Material); var bodyMesh = new three.Mesh(bodyBox, layer1Material);
var body2Box = new THREE.BoxGeometry(9, 13.5, 4.5, 0, 0, 0); var body2Box = new three.BoxGeometry(9, 13.5, 4.5, 0, 0, 0);
setVertices(body2Box, toSkinVertices(20, 32, 28, 36), toSkinVertices(28, 32, 36, 36), toSkinVertices(16, 36, 20, 48), toSkinVertices(20, 36, 28, 48), toSkinVertices(28, 36, 32, 48), toSkinVertices(32, 36, 40, 48)); setVertices(body2Box, toSkinVertices(20, 32, 28, 36), toSkinVertices(28, 32, 36, 36), toSkinVertices(16, 36, 20, 48), toSkinVertices(20, 36, 28, 48), toSkinVertices(28, 36, 32, 48), toSkinVertices(32, 36, 40, 48));
var body2Mesh = new THREE.Mesh(body2Box, layer2Material); var body2Mesh = new three.Mesh(body2Box, layer2Material);
_this.body = new BodyPart(bodyMesh, body2Mesh); _this.body = new BodyPart(bodyMesh, body2Mesh);
_this.body.name = "body";
_this.body.add(bodyMesh, body2Mesh); _this.body.add(bodyMesh, body2Mesh);
_this.body.position.y = -10; _this.body.position.y = -10;
_this.add(_this.body); _this.add(_this.body);
// Right Arm // Right Arm
var rightArmBox = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related var rightArmBox = new three.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
var rightArmMesh = new THREE.Mesh(rightArmBox, layer1Material); var rightArmMesh = new three.Mesh(rightArmBox, layer1Material);
_this.modelListeners.push(function () { _this.modelListeners.push(function () {
rightArmMesh.scale.x = (_this.slim ? 3 : 4) - esp; rightArmMesh.scale.x = (_this.slim ? 3 : 4) - esp;
rightArmMesh.scale.y = 12 - esp; rightArmMesh.scale.y = 12 - esp;
@ -126,8 +130,8 @@
rightArmBox.uvsNeedUpdate = true; rightArmBox.uvsNeedUpdate = true;
rightArmBox.elementsNeedUpdate = true; rightArmBox.elementsNeedUpdate = true;
}); });
var rightArm2Box = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related var rightArm2Box = new three.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
var rightArm2Mesh = new THREE.Mesh(rightArm2Box, layer2Material); var rightArm2Mesh = new three.Mesh(rightArm2Box, layer2Material);
rightArm2Mesh.renderOrder = 1; rightArm2Mesh.renderOrder = 1;
_this.modelListeners.push(function () { _this.modelListeners.push(function () {
rightArm2Mesh.scale.x = (_this.slim ? 3.375 : 4.5) - esp; rightArm2Mesh.scale.x = (_this.slim ? 3.375 : 4.5) - esp;
@ -142,10 +146,11 @@
rightArm2Box.uvsNeedUpdate = true; rightArm2Box.uvsNeedUpdate = true;
rightArm2Box.elementsNeedUpdate = true; rightArm2Box.elementsNeedUpdate = true;
}); });
var rightArmPivot = new THREE.Group(); var rightArmPivot = new three.Group();
rightArmPivot.add(rightArmMesh, rightArm2Mesh); rightArmPivot.add(rightArmMesh, rightArm2Mesh);
rightArmPivot.position.y = -6; rightArmPivot.position.y = -6;
_this.rightArm = new BodyPart(rightArmMesh, rightArm2Mesh); _this.rightArm = new BodyPart(rightArmMesh, rightArm2Mesh);
_this.rightArm.name = "rightArm";
_this.rightArm.add(rightArmPivot); _this.rightArm.add(rightArmPivot);
_this.rightArm.position.y = -4; _this.rightArm.position.y = -4;
_this.modelListeners.push(function () { _this.modelListeners.push(function () {
@ -153,8 +158,8 @@
}); });
_this.add(_this.rightArm); _this.add(_this.rightArm);
// Left Arm // Left Arm
var leftArmBox = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related var leftArmBox = new three.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
var leftArmMesh = new THREE.Mesh(leftArmBox, layer1Material); var leftArmMesh = new three.Mesh(leftArmBox, layer1Material);
_this.modelListeners.push(function () { _this.modelListeners.push(function () {
leftArmMesh.scale.x = (_this.slim ? 3 : 4) - esp; leftArmMesh.scale.x = (_this.slim ? 3 : 4) - esp;
leftArmMesh.scale.y = 12 - esp; leftArmMesh.scale.y = 12 - esp;
@ -168,8 +173,8 @@
leftArmBox.uvsNeedUpdate = true; leftArmBox.uvsNeedUpdate = true;
leftArmBox.elementsNeedUpdate = true; leftArmBox.elementsNeedUpdate = true;
}); });
var leftArm2Box = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related var leftArm2Box = new three.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
var leftArm2Mesh = new THREE.Mesh(leftArm2Box, layer2Material); var leftArm2Mesh = new three.Mesh(leftArm2Box, layer2Material);
leftArm2Mesh.renderOrder = 1; leftArm2Mesh.renderOrder = 1;
_this.modelListeners.push(function () { _this.modelListeners.push(function () {
leftArm2Mesh.scale.x = (_this.slim ? 3.375 : 4.5) - esp; leftArm2Mesh.scale.x = (_this.slim ? 3.375 : 4.5) - esp;
@ -184,10 +189,11 @@
leftArm2Box.uvsNeedUpdate = true; leftArm2Box.uvsNeedUpdate = true;
leftArm2Box.elementsNeedUpdate = true; leftArm2Box.elementsNeedUpdate = true;
}); });
var leftArmPivot = new THREE.Group(); var leftArmPivot = new three.Group();
leftArmPivot.add(leftArmMesh, leftArm2Mesh); leftArmPivot.add(leftArmMesh, leftArm2Mesh);
leftArmPivot.position.y = -6; leftArmPivot.position.y = -6;
_this.leftArm = new BodyPart(leftArmMesh, leftArm2Mesh); _this.leftArm = new BodyPart(leftArmMesh, leftArm2Mesh);
_this.leftArm.name = "leftArm";
_this.leftArm.add(leftArmPivot); _this.leftArm.add(leftArmPivot);
_this.leftArm.position.y = -4; _this.leftArm.position.y = -4;
_this.modelListeners.push(function () { _this.modelListeners.push(function () {
@ -195,33 +201,35 @@
}); });
_this.add(_this.leftArm); _this.add(_this.leftArm);
// Right Leg // Right Leg
var rightLegBox = new THREE.BoxGeometry(4 - esp, 12 - esp, 4 - esp, 0, 0, 0); var 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), toSkinVertices(0, 20, 4, 32), toSkinVertices(4, 20, 8, 32), toSkinVertices(8, 20, 12, 32), toSkinVertices(12, 20, 16, 32)); setVertices(rightLegBox, toSkinVertices(4, 16, 8, 20), toSkinVertices(8, 16, 12, 20), toSkinVertices(0, 20, 4, 32), toSkinVertices(4, 20, 8, 32), toSkinVertices(8, 20, 12, 32), toSkinVertices(12, 20, 16, 32));
var rightLegMesh = new THREE.Mesh(rightLegBox, layer1Material); var rightLegMesh = new three.Mesh(rightLegBox, layer1Material);
var rightLeg2Box = new THREE.BoxGeometry(4.5 - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0); var 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), toSkinVertices(0, 36, 4, 48), toSkinVertices(4, 36, 8, 48), toSkinVertices(8, 36, 12, 48), toSkinVertices(12, 36, 16, 48)); setVertices(rightLeg2Box, toSkinVertices(4, 32, 8, 36), toSkinVertices(8, 32, 12, 36), toSkinVertices(0, 36, 4, 48), toSkinVertices(4, 36, 8, 48), toSkinVertices(8, 36, 12, 48), toSkinVertices(12, 36, 16, 48));
var rightLeg2Mesh = new THREE.Mesh(rightLeg2Box, layer2Material); var rightLeg2Mesh = new three.Mesh(rightLeg2Box, layer2Material);
rightLeg2Mesh.renderOrder = 1; rightLeg2Mesh.renderOrder = 1;
var rightLegPivot = new THREE.Group(); var rightLegPivot = new three.Group();
rightLegPivot.add(rightLegMesh, rightLeg2Mesh); rightLegPivot.add(rightLegMesh, rightLeg2Mesh);
rightLegPivot.position.y = -6; rightLegPivot.position.y = -6;
_this.rightLeg = new BodyPart(rightLegMesh, rightLeg2Mesh); _this.rightLeg = new BodyPart(rightLegMesh, rightLeg2Mesh);
_this.rightLeg.name = "rightLeg";
_this.rightLeg.add(rightLegPivot); _this.rightLeg.add(rightLegPivot);
_this.rightLeg.position.y = -16; _this.rightLeg.position.y = -16;
_this.rightLeg.position.x = -2; _this.rightLeg.position.x = -2;
_this.add(_this.rightLeg); _this.add(_this.rightLeg);
// Left Leg // Left Leg
var leftLegBox = new THREE.BoxGeometry(4 - esp, 12 - esp, 4 - esp, 0, 0, 0); var 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), toSkinVertices(16, 52, 20, 64), toSkinVertices(20, 52, 24, 64), toSkinVertices(24, 52, 28, 64), toSkinVertices(28, 52, 32, 64)); setVertices(leftLegBox, toSkinVertices(20, 48, 24, 52), toSkinVertices(24, 48, 28, 52), toSkinVertices(16, 52, 20, 64), toSkinVertices(20, 52, 24, 64), toSkinVertices(24, 52, 28, 64), toSkinVertices(28, 52, 32, 64));
var leftLegMesh = new THREE.Mesh(leftLegBox, layer1Material); var leftLegMesh = new three.Mesh(leftLegBox, layer1Material);
var leftLeg2Box = new THREE.BoxGeometry(4.5 - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0); var 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), toSkinVertices(0, 52, 4, 64), toSkinVertices(4, 52, 8, 64), toSkinVertices(8, 52, 12, 64), toSkinVertices(12, 52, 16, 64)); setVertices(leftLeg2Box, toSkinVertices(4, 48, 8, 52), toSkinVertices(8, 48, 12, 52), toSkinVertices(0, 52, 4, 64), toSkinVertices(4, 52, 8, 64), toSkinVertices(8, 52, 12, 64), toSkinVertices(12, 52, 16, 64));
var leftLeg2Mesh = new THREE.Mesh(leftLeg2Box, layer2Material); var leftLeg2Mesh = new three.Mesh(leftLeg2Box, layer2Material);
leftLeg2Mesh.renderOrder = 1; leftLeg2Mesh.renderOrder = 1;
var leftLegPivot = new THREE.Group(); var leftLegPivot = new three.Group();
leftLegPivot.add(leftLegMesh, leftLeg2Mesh); leftLegPivot.add(leftLegMesh, leftLeg2Mesh);
leftLegPivot.position.y = -6; leftLegPivot.position.y = -6;
_this.leftLeg = new BodyPart(leftLegMesh, leftLeg2Mesh); _this.leftLeg = new BodyPart(leftLegMesh, leftLeg2Mesh);
_this.leftLeg.name = "leftLeg";
_this.leftLeg.add(leftLegPivot); _this.leftLeg.add(leftLegPivot);
_this.leftLeg.position.y = -16; _this.leftLeg.position.y = -16;
_this.leftLeg.position.x = 2; _this.leftLeg.position.x = 2;
@ -250,31 +258,33 @@
this.getBodyParts().forEach(function (part) { return part.outerLayer.visible = value; }); this.getBodyParts().forEach(function (part) { return part.outerLayer.visible = value; });
}; };
return SkinObject; return SkinObject;
}(THREE.Group)); }(three.Group));
var CapeObject = /** @class */ (function (_super) { var CapeObject = /** @class */ (function (_super) {
__extends(CapeObject, _super); __extends(CapeObject, _super);
function CapeObject(capeMaterial) { function CapeObject(capeMaterial) {
var _this = _super.call(this) || this; var _this = _super.call(this) || this;
// back = outside // back = outside
// front = inside // front = inside
var capeBox = new THREE.BoxGeometry(10, 16, 1, 0, 0, 0); var capeBox = new three.BoxGeometry(10, 16, 1, 0, 0, 0);
setVertices(capeBox, toCapeVertices(1, 0, 11, 1), toCapeVertices(11, 0, 21, 1), toCapeVertices(11, 1, 12, 17), toCapeVertices(12, 1, 22, 17), toCapeVertices(0, 1, 1, 17), toCapeVertices(1, 1, 11, 17)); setVertices(capeBox, toCapeVertices(1, 0, 11, 1), toCapeVertices(11, 0, 21, 1), toCapeVertices(11, 1, 12, 17), toCapeVertices(12, 1, 22, 17), toCapeVertices(0, 1, 1, 17), toCapeVertices(1, 1, 11, 17));
_this.cape = new THREE.Mesh(capeBox, capeMaterial); _this.cape = new three.Mesh(capeBox, capeMaterial);
_this.cape.position.y = -8; _this.cape.position.y = -8;
_this.cape.position.z = -0.5; _this.cape.position.z = -0.5;
_this.add(_this.cape); _this.add(_this.cape);
return _this; return _this;
} }
return CapeObject; return CapeObject;
}(THREE.Group)); }(three.Group));
var PlayerObject = /** @class */ (function (_super) { var PlayerObject = /** @class */ (function (_super) {
__extends(PlayerObject, _super); __extends(PlayerObject, _super);
function PlayerObject(layer1Material, layer2Material, capeMaterial) { function PlayerObject(layer1Material, layer2Material, capeMaterial) {
var _this = _super.call(this) || this; var _this = _super.call(this) || this;
_this.skin = new SkinObject(layer1Material, layer2Material); _this.skin = new SkinObject(layer1Material, layer2Material);
_this.skin.name = "skin";
_this.skin.visible = false; _this.skin.visible = false;
_this.add(_this.skin); _this.add(_this.skin);
_this.cape = new CapeObject(capeMaterial); _this.cape = new CapeObject(capeMaterial);
_this.cape.name = "cape";
_this.cape.position.z = -2; _this.cape.position.z = -2;
_this.cape.position.y = -4; _this.cape.position.y = -4;
_this.cape.rotation.x = 25 * Math.PI / 180; _this.cape.rotation.x = 25 * Math.PI / 180;
@ -283,7 +293,7 @@
return _this; return _this;
} }
return PlayerObject; return PlayerObject;
}(THREE.Group)); }(three.Group));
function invokeAnimation(animation, player, time) { function invokeAnimation(animation, player, time) {
if (animation instanceof Function) { if (animation instanceof Function) {
@ -296,40 +306,43 @@
} }
var AnimationWrapper = /** @class */ (function () { var AnimationWrapper = /** @class */ (function () {
function AnimationWrapper(animation) { function AnimationWrapper(animation) {
this.paused = false;
this.speed = 1.0; this.speed = 1.0;
this._paused = false; this.paused = false;
this._lastChange = null; this.progress = 0;
this._speed = 1.0; this.lastTime = 0;
this._lastChangeX = null; this.started = false;
this.toResetAndRemove = false;
this.animation = animation; this.animation = animation;
} }
AnimationWrapper.prototype.play = function (player, time) { AnimationWrapper.prototype.play = function (player, time) {
if (this._lastChange === null) { if (this.toResetAndRemove) {
this._lastChange = time; invokeAnimation(this.animation, player, 0);
this._lastChangeX = 0; this.remove();
return;
} }
else if (this.paused !== this._paused || this.speed !== this._speed) { var delta;
var dt = time - this._lastChange; if (this.started) {
if (this._paused === false) { delta = time - this.lastTime;
this._lastChangeX += dt * this._speed;
} }
this._paused = this.paused; else {
this._speed = this.speed; delta = 0;
this._lastChange = time; this.started = true;
} }
if (this.paused === false) { this.lastTime = time;
var dt = time - this._lastChange; if (!this.paused) {
var x = this._lastChangeX + this.speed * dt; this.progress += delta * this.speed;
invokeAnimation(this.animation, player, x);
} }
invokeAnimation(this.animation, player, this.progress);
}; };
AnimationWrapper.prototype.reset = function () { AnimationWrapper.prototype.reset = function () {
this._lastChange = null; this.progress = 0;
}; };
AnimationWrapper.prototype.remove = function () { AnimationWrapper.prototype.remove = function () {
// stub get's overriden // stub get's overriden
}; };
AnimationWrapper.prototype.resetAndRemove = function () {
this.toResetAndRemove = true;
};
return AnimationWrapper; return AnimationWrapper;
}()); }());
var CompositeAnimation = /** @class */ (function () { var CompositeAnimation = /** @class */ (function () {
@ -339,7 +352,9 @@
CompositeAnimation.prototype.add = function (animation) { CompositeAnimation.prototype.add = function (animation) {
var _this = this; var _this = this;
var handle = new AnimationWrapper(animation); var handle = new AnimationWrapper(animation);
handle.remove = function () { return _this.handles.delete(handle); }; handle.remove = function () {
_this.handles.delete(handle);
};
this.handles.add(handle); this.handles.add(handle);
return handle; return handle;
}; };
@ -348,6 +363,49 @@
}; };
return CompositeAnimation; return CompositeAnimation;
}()); }());
var RootAnimation = /** @class */ (function (_super) {
__extends(RootAnimation, _super);
function RootAnimation() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.speed = 1.0;
_this.progress = 0.0;
_this.clock = new three.Clock(true);
return _this;
}
Object.defineProperty(RootAnimation.prototype, "animation", {
get: function () {
return this;
},
enumerable: true,
configurable: true
});
Object.defineProperty(RootAnimation.prototype, "paused", {
get: function () {
return !this.clock.running;
},
set: function (value) {
if (value) {
this.clock.stop();
}
else {
this.clock.start();
}
},
enumerable: true,
configurable: true
});
RootAnimation.prototype.runAnimationLoop = function (player) {
if (this.handles.size === 0) {
return;
}
this.progress += this.clock.getDelta() * this.speed;
this.play(player, this.progress);
};
RootAnimation.prototype.reset = function () {
this.progress = 0;
};
return RootAnimation;
}(CompositeAnimation));
var WalkingAnimation = function (player, time) { var WalkingAnimation = function (player, time) {
var skin = player.skin; var skin = player.skin;
// Multiply by animation's natural speed // Multiply by animation's natural speed
@ -584,40 +642,39 @@
var SkinViewer = /** @class */ (function () { var SkinViewer = /** @class */ (function () {
function SkinViewer(options) { function SkinViewer(options) {
var _this = this; var _this = this;
this.animations = new RootAnimation();
this.detectModel = true; this.detectModel = true;
this.animationPaused = false;
this.animationTime = 0;
this.disposed = false; this.disposed = false;
this._renderPaused = false;
this.domElement = options.domElement; this.domElement = options.domElement;
this.animation = options.animation || null;
if (options.detectModel === false) { if (options.detectModel === false) {
this.detectModel = false; this.detectModel = false;
} }
// texture // texture
this.skinImg = new Image(); this.skinImg = new Image();
this.skinCanvas = document.createElement("canvas"); this.skinCanvas = document.createElement("canvas");
this.skinTexture = new THREE.Texture(this.skinCanvas); this.skinTexture = new three.Texture(this.skinCanvas);
this.skinTexture.magFilter = THREE.NearestFilter; this.skinTexture.magFilter = three.NearestFilter;
this.skinTexture.minFilter = THREE.NearestFilter; this.skinTexture.minFilter = three.NearestFilter;
this.capeImg = new Image(); this.capeImg = new Image();
this.capeCanvas = document.createElement("canvas"); this.capeCanvas = document.createElement("canvas");
this.capeTexture = new THREE.Texture(this.capeCanvas); this.capeTexture = new three.Texture(this.capeCanvas);
this.capeTexture.magFilter = THREE.NearestFilter; this.capeTexture.magFilter = three.NearestFilter;
this.capeTexture.minFilter = THREE.NearestFilter; this.capeTexture.minFilter = three.NearestFilter;
this.layer1Material = new THREE.MeshBasicMaterial({ map: this.skinTexture, side: THREE.FrontSide }); 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.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 }); this.capeMaterial = new three.MeshBasicMaterial({ map: this.capeTexture, transparent: true, opacity: 1, side: three.DoubleSide, alphaTest: 0.5 });
// scene // scene
this.scene = new THREE.Scene(); this.scene = new three.Scene();
// Use smaller fov to avoid distortion // Use smaller fov to avoid distortion
this.camera = new THREE.PerspectiveCamera(40); this.camera = new three.PerspectiveCamera(40);
this.camera.position.y = -12; this.camera.position.y = -12;
this.camera.position.z = 60; this.camera.position.z = 60;
this.renderer = new THREE.WebGLRenderer({ alpha: true, antialias: false }); this.renderer = new three.WebGLRenderer({ alpha: true, antialias: false });
this.renderer.setSize(300, 300); // default size this.renderer.setSize(300, 300); // default size
this.renderer.context.getShaderInfoLog = function () { return ""; }; // shut firefox up
this.domElement.appendChild(this.renderer.domElement); this.domElement.appendChild(this.renderer.domElement);
this.playerObject = new PlayerObject(this.layer1Material, this.layer2Material, this.capeMaterial); this.playerObject = new PlayerObject(this.layer1Material, this.layer2Material, this.capeMaterial);
this.playerObject.name = "player";
this.scene.add(this.playerObject); this.scene.add(this.playerObject);
// texture loading // texture loading
this.skinImg.crossOrigin = "anonymous"; this.skinImg.crossOrigin = "anonymous";
@ -648,20 +705,17 @@
this.width = options.width; this.width = options.width;
if (options.height) if (options.height)
this.height = options.height; this.height = options.height;
var draw = function () { window.requestAnimationFrame(function () { return _this.draw(); });
if (_this.disposed) }
SkinViewer.prototype.draw = function () {
var _this = this;
if (this.disposed || this._renderPaused) {
return; return;
window.requestAnimationFrame(draw);
if (!_this.animationPaused) {
_this.animationTime++;
if (_this.animation) {
invokeAnimation(_this.animation, _this.playerObject, _this.animationTime / 100.0);
} }
} this.animations.runAnimationLoop(this.playerObject);
_this.renderer.render(_this.scene, _this.camera); this.renderer.render(this.scene, this.camera);
window.requestAnimationFrame(function () { return _this.draw(); });
}; };
draw();
}
SkinViewer.prototype.setSize = function (width, height) { SkinViewer.prototype.setSize = function (width, height) {
this.camera.aspect = width / height; this.camera.aspect = width / height;
this.camera.updateProjectionMatrix(); this.camera.updateProjectionMatrix();
@ -674,6 +728,21 @@
this.skinTexture.dispose(); this.skinTexture.dispose();
this.capeTexture.dispose(); this.capeTexture.dispose();
}; };
Object.defineProperty(SkinViewer.prototype, "renderPaused", {
get: function () {
return this._renderPaused;
},
set: function (value) {
var _this = this;
var toResume = !this.disposed && !value && this._renderPaused;
this._renderPaused = value;
if (toResume) {
window.requestAnimationFrame(function () { return _this.draw(); });
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(SkinViewer.prototype, "skinUrl", { Object.defineProperty(SkinViewer.prototype, "skinUrl", {
get: function () { get: function () {
return this.skinImg.src; return this.skinImg.src;
@ -696,7 +765,8 @@
}); });
Object.defineProperty(SkinViewer.prototype, "width", { Object.defineProperty(SkinViewer.prototype, "width", {
get: function () { get: function () {
return this.renderer.getSize().width; var target = new three.Vector2();
return this.renderer.getSize(target).width;
}, },
set: function (newWidth) { set: function (newWidth) {
this.setSize(newWidth, this.height); this.setSize(newWidth, this.height);
@ -706,7 +776,8 @@
}); });
Object.defineProperty(SkinViewer.prototype, "height", { Object.defineProperty(SkinViewer.prototype, "height", {
get: function () { get: function () {
return this.renderer.getSize().height; var target = new three.Vector2();
return this.renderer.getSize(target).height;
}, },
set: function (newHeight) { set: function (newHeight) {
this.setSize(this.width, newHeight); this.setSize(this.width, newHeight);
@ -740,7 +811,7 @@
// Set to false to disable this control // Set to false to disable this control
_this.enabled = true; _this.enabled = true;
// "target" sets the location of focus, where the object orbits around // "target" sets the location of focus, where the object orbits around
_this.target = new THREE.Vector3(); _this.target = new three.Vector3();
// How far you can dolly in and out ( PerspectiveCamera only ) // How far you can dolly in and out ( PerspectiveCamera only )
_this.minDistance = 0; _this.minDistance = 0;
_this.maxDistance = Infinity; _this.maxDistance = Infinity;
@ -778,37 +849,37 @@
// The four arrow keys // The four arrow keys
_this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 }; _this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };
// Mouse buttons // Mouse buttons
_this.mouseButtons = { ORBIT: THREE.MOUSE.LEFT, ZOOM: THREE.MOUSE.MIDDLE, PAN: THREE.MOUSE.RIGHT }; _this.mouseButtons = { ORBIT: three.MOUSE.LEFT, ZOOM: three.MOUSE.MIDDLE, PAN: three.MOUSE.RIGHT };
// for reset // for reset
_this.target0 = _this.target.clone(); _this.target0 = _this.target.clone();
_this.position0 = _this.object.position.clone(); _this.position0 = _this.object.position.clone();
_this.zoom0 = _this.object.zoom; _this.zoom0 = _this.object.zoom;
// for update speedup // for update speedup
_this.updateOffset = new THREE.Vector3(); _this.updateOffset = new three.Vector3();
// so camera.up is the orbit axis // so camera.up is the orbit axis
_this.updateQuat = new THREE.Quaternion().setFromUnitVectors(object.up, new THREE.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.updateQuatInverse = _this.updateQuat.clone().inverse();
_this.updateLastPosition = new THREE.Vector3(); _this.updateLastPosition = new three.Vector3();
_this.updateLastQuaternion = new THREE.Quaternion(); _this.updateLastQuaternion = new three.Quaternion();
_this.state = STATE.NONE; _this.state = STATE.NONE;
_this.scale = 1; _this.scale = 1;
// current position in spherical coordinates // current position in spherical coordinates
_this.spherical = new THREE.Spherical(); _this.spherical = new three.Spherical();
_this.sphericalDelta = new THREE.Spherical(); _this.sphericalDelta = new three.Spherical();
_this.panOffset = new THREE.Vector3(); _this.panOffset = new three.Vector3();
_this.zoomChanged = false; _this.zoomChanged = false;
_this.rotateStart = new THREE.Vector2(); _this.rotateStart = new three.Vector2();
_this.rotateEnd = new THREE.Vector2(); _this.rotateEnd = new three.Vector2();
_this.rotateDelta = new THREE.Vector2(); _this.rotateDelta = new three.Vector2();
_this.panStart = new THREE.Vector2(); _this.panStart = new three.Vector2();
_this.panEnd = new THREE.Vector2(); _this.panEnd = new three.Vector2();
_this.panDelta = new THREE.Vector2(); _this.panDelta = new three.Vector2();
_this.dollyStart = new THREE.Vector2(); _this.dollyStart = new three.Vector2();
_this.dollyEnd = new THREE.Vector2(); _this.dollyEnd = new three.Vector2();
_this.dollyDelta = new THREE.Vector2(); _this.dollyDelta = new three.Vector2();
_this.panLeftV = new THREE.Vector3(); _this.panLeftV = new three.Vector3();
_this.panUpV = new THREE.Vector3(); _this.panUpV = new three.Vector3();
_this.panInternalOffset = new THREE.Vector3(); _this.panInternalOffset = new three.Vector3();
// event handlers - FSM: listen for events and reset state // event handlers - FSM: listen for events and reset state
_this.onMouseDown = function (event) { _this.onMouseDown = function (event) {
if (_this.enabled === false) if (_this.enabled === false)
@ -1113,7 +1184,7 @@
// deltaX and deltaY are in pixels; right and down are positive // deltaX and deltaY are in pixels; right and down are positive
OrbitControls.prototype.pan = function (deltaX, deltaY) { OrbitControls.prototype.pan = function (deltaX, deltaY) {
var element = this.domElement === document ? this.domElement.body : this.domElement; var element = this.domElement === document ? this.domElement.body : this.domElement;
if (this.object instanceof THREE.PerspectiveCamera) { if (this.object instanceof three.PerspectiveCamera) {
// perspective // perspective
var position = this.object.position; var position = this.object.position;
this.panInternalOffset.copy(position).sub(this.target); this.panInternalOffset.copy(position).sub(this.target);
@ -1124,7 +1195,7 @@
this.panLeft(2 * deltaX * targetDistance / element.clientHeight, this.object.matrix); this.panLeft(2 * deltaX * targetDistance / element.clientHeight, this.object.matrix);
this.panUp(2 * deltaY * targetDistance / element.clientHeight, this.object.matrix); this.panUp(2 * deltaY * targetDistance / element.clientHeight, this.object.matrix);
} }
else if (this.object instanceof THREE.OrthographicCamera) { else if (this.object instanceof three.OrthographicCamera) {
// orthographic // orthographic
this.panLeft(deltaX * (this.object.right - this.object.left) / this.object.zoom / element.clientWidth, this.object.matrix); this.panLeft(deltaX * (this.object.right - this.object.left) / this.object.zoom / element.clientWidth, this.object.matrix);
this.panUp(deltaY * (this.object.top - this.object.bottom) / this.object.zoom / element.clientHeight, this.object.matrix); this.panUp(deltaY * (this.object.top - this.object.bottom) / this.object.zoom / element.clientHeight, this.object.matrix);
@ -1136,10 +1207,10 @@
} }
}; };
OrbitControls.prototype.dollyIn = function (dollyScale) { OrbitControls.prototype.dollyIn = function (dollyScale) {
if (this.object instanceof THREE.PerspectiveCamera) { if (this.object instanceof three.PerspectiveCamera) {
this.scale /= dollyScale; this.scale /= dollyScale;
} }
else if (this.object instanceof THREE.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.zoom = Math.max(this.minZoom, Math.min(this.maxZoom, this.object.zoom * dollyScale));
this.object.updateProjectionMatrix(); this.object.updateProjectionMatrix();
this.zoomChanged = true; this.zoomChanged = true;
@ -1150,10 +1221,10 @@
} }
}; };
OrbitControls.prototype.dollyOut = function (dollyScale) { OrbitControls.prototype.dollyOut = function (dollyScale) {
if (this.object instanceof THREE.PerspectiveCamera) { if (this.object instanceof three.PerspectiveCamera) {
this.scale *= dollyScale; this.scale *= dollyScale;
} }
else if (this.object instanceof THREE.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.zoom = Math.max(this.minZoom, Math.min(this.maxZoom, this.object.zoom / dollyScale));
this.object.updateProjectionMatrix(); this.object.updateProjectionMatrix();
this.zoomChanged = true; this.zoomChanged = true;
@ -1203,30 +1274,31 @@
this.state = STATE.NONE; this.state = STATE.NONE;
}; };
return OrbitControls; return OrbitControls;
}(THREE.EventDispatcher)); }(three.EventDispatcher));
function createOrbitControls(skinViewer) { function createOrbitControls(skinViewer) {
var control = new OrbitControls(skinViewer.camera, skinViewer.renderer.domElement); var control = new OrbitControls(skinViewer.camera, skinViewer.renderer.domElement);
// default configuration // default configuration
control.enablePan = false; control.enablePan = false;
control.target = new THREE.Vector3(0, -12, 0); control.target = new three.Vector3(0, -12, 0);
control.minDistance = 10; control.minDistance = 10;
control.maxDistance = 256; control.maxDistance = 256;
control.update(); control.update();
return control; return control;
} }
exports.SkinObject = SkinObject;
exports.BodyPart = BodyPart; exports.BodyPart = BodyPart;
exports.CapeObject = CapeObject; exports.CapeObject = CapeObject;
exports.PlayerObject = PlayerObject; exports.CompositeAnimation = CompositeAnimation;
exports.SkinViewer = SkinViewer;
exports.OrbitControls = OrbitControls; exports.OrbitControls = OrbitControls;
exports.PlayerObject = PlayerObject;
exports.RootAnimation = RootAnimation;
exports.RotatingAnimation = RotatingAnimation;
exports.RunningAnimation = RunningAnimation;
exports.SkinObject = SkinObject;
exports.SkinViewer = SkinViewer;
exports.WalkingAnimation = WalkingAnimation;
exports.createOrbitControls = createOrbitControls; exports.createOrbitControls = createOrbitControls;
exports.invokeAnimation = invokeAnimation; exports.invokeAnimation = invokeAnimation;
exports.CompositeAnimation = CompositeAnimation;
exports.WalkingAnimation = WalkingAnimation;
exports.RunningAnimation = RunningAnimation;
exports.RotatingAnimation = RotatingAnimation;
exports.isSlimSkin = isSlimSkin; exports.isSlimSkin = isSlimSkin;
Object.defineProperty(exports, '__esModule', { value: true }); Object.defineProperty(exports, '__esModule', { value: true });

16
js/dist/skinview3d.min.js vendored
View File

File diff suppressed because one or more lines are too long

151
js/dist/skinview3d.module.js vendored
View File

@ -4,7 +4,7 @@
* MIT License * MIT License
*/ */
import { Vector2, Group, BoxGeometry, Mesh, Texture, NearestFilter, MeshBasicMaterial, FrontSide, DoubleSide, Scene, PerspectiveCamera, WebGLRenderer, Vector3, MOUSE, Quaternion, Spherical, OrthographicCamera, EventDispatcher } from 'three'; import { Group, BoxGeometry, Vector2, Mesh, Clock, Texture, NearestFilter, MeshBasicMaterial, FrontSide, DoubleSide, Scene, PerspectiveCamera, WebGLRenderer, OrthographicCamera, Vector3, MOUSE, Quaternion, Spherical, EventDispatcher } from 'three';
/*! ***************************************************************************** /*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved. Copyright (c) Microsoft Corporation. All rights reserved.
@ -74,6 +74,8 @@ var BodyPart = /** @class */ (function (_super) {
var _this = _super.call(this) || this; var _this = _super.call(this) || this;
_this.innerLayer = innerLayer; _this.innerLayer = innerLayer;
_this.outerLayer = outerLayer; _this.outerLayer = outerLayer;
innerLayer.name = "inner";
outerLayer.name = "outer";
return _this; return _this;
} }
return BodyPart; return BodyPart;
@ -93,6 +95,7 @@ var SkinObject = /** @class */ (function (_super) {
var head2Mesh = new Mesh(head2Box, layer2Material); var head2Mesh = new Mesh(head2Box, layer2Material);
head2Mesh.renderOrder = -1; head2Mesh.renderOrder = -1;
_this.head = new BodyPart(headMesh, head2Mesh); _this.head = new BodyPart(headMesh, head2Mesh);
_this.head.name = "head";
_this.head.add(headMesh, head2Mesh); _this.head.add(headMesh, head2Mesh);
_this.add(_this.head); _this.add(_this.head);
// Body // Body
@ -103,6 +106,7 @@ var SkinObject = /** @class */ (function (_super) {
setVertices(body2Box, toSkinVertices(20, 32, 28, 36), toSkinVertices(28, 32, 36, 36), toSkinVertices(16, 36, 20, 48), toSkinVertices(20, 36, 28, 48), toSkinVertices(28, 36, 32, 48), toSkinVertices(32, 36, 40, 48)); setVertices(body2Box, toSkinVertices(20, 32, 28, 36), toSkinVertices(28, 32, 36, 36), toSkinVertices(16, 36, 20, 48), toSkinVertices(20, 36, 28, 48), toSkinVertices(28, 36, 32, 48), toSkinVertices(32, 36, 40, 48));
var body2Mesh = new Mesh(body2Box, layer2Material); var body2Mesh = new Mesh(body2Box, layer2Material);
_this.body = new BodyPart(bodyMesh, body2Mesh); _this.body = new BodyPart(bodyMesh, body2Mesh);
_this.body.name = "body";
_this.body.add(bodyMesh, body2Mesh); _this.body.add(bodyMesh, body2Mesh);
_this.body.position.y = -10; _this.body.position.y = -10;
_this.add(_this.body); _this.add(_this.body);
@ -142,6 +146,7 @@ var SkinObject = /** @class */ (function (_super) {
rightArmPivot.add(rightArmMesh, rightArm2Mesh); rightArmPivot.add(rightArmMesh, rightArm2Mesh);
rightArmPivot.position.y = -6; rightArmPivot.position.y = -6;
_this.rightArm = new BodyPart(rightArmMesh, rightArm2Mesh); _this.rightArm = new BodyPart(rightArmMesh, rightArm2Mesh);
_this.rightArm.name = "rightArm";
_this.rightArm.add(rightArmPivot); _this.rightArm.add(rightArmPivot);
_this.rightArm.position.y = -4; _this.rightArm.position.y = -4;
_this.modelListeners.push(function () { _this.modelListeners.push(function () {
@ -184,6 +189,7 @@ var SkinObject = /** @class */ (function (_super) {
leftArmPivot.add(leftArmMesh, leftArm2Mesh); leftArmPivot.add(leftArmMesh, leftArm2Mesh);
leftArmPivot.position.y = -6; leftArmPivot.position.y = -6;
_this.leftArm = new BodyPart(leftArmMesh, leftArm2Mesh); _this.leftArm = new BodyPart(leftArmMesh, leftArm2Mesh);
_this.leftArm.name = "leftArm";
_this.leftArm.add(leftArmPivot); _this.leftArm.add(leftArmPivot);
_this.leftArm.position.y = -4; _this.leftArm.position.y = -4;
_this.modelListeners.push(function () { _this.modelListeners.push(function () {
@ -202,6 +208,7 @@ var SkinObject = /** @class */ (function (_super) {
rightLegPivot.add(rightLegMesh, rightLeg2Mesh); rightLegPivot.add(rightLegMesh, rightLeg2Mesh);
rightLegPivot.position.y = -6; rightLegPivot.position.y = -6;
_this.rightLeg = new BodyPart(rightLegMesh, rightLeg2Mesh); _this.rightLeg = new BodyPart(rightLegMesh, rightLeg2Mesh);
_this.rightLeg.name = "rightLeg";
_this.rightLeg.add(rightLegPivot); _this.rightLeg.add(rightLegPivot);
_this.rightLeg.position.y = -16; _this.rightLeg.position.y = -16;
_this.rightLeg.position.x = -2; _this.rightLeg.position.x = -2;
@ -218,6 +225,7 @@ var SkinObject = /** @class */ (function (_super) {
leftLegPivot.add(leftLegMesh, leftLeg2Mesh); leftLegPivot.add(leftLegMesh, leftLeg2Mesh);
leftLegPivot.position.y = -6; leftLegPivot.position.y = -6;
_this.leftLeg = new BodyPart(leftLegMesh, leftLeg2Mesh); _this.leftLeg = new BodyPart(leftLegMesh, leftLeg2Mesh);
_this.leftLeg.name = "leftLeg";
_this.leftLeg.add(leftLegPivot); _this.leftLeg.add(leftLegPivot);
_this.leftLeg.position.y = -16; _this.leftLeg.position.y = -16;
_this.leftLeg.position.x = 2; _this.leftLeg.position.x = 2;
@ -268,9 +276,11 @@ var PlayerObject = /** @class */ (function (_super) {
function PlayerObject(layer1Material, layer2Material, capeMaterial) { function PlayerObject(layer1Material, layer2Material, capeMaterial) {
var _this = _super.call(this) || this; var _this = _super.call(this) || this;
_this.skin = new SkinObject(layer1Material, layer2Material); _this.skin = new SkinObject(layer1Material, layer2Material);
_this.skin.name = "skin";
_this.skin.visible = false; _this.skin.visible = false;
_this.add(_this.skin); _this.add(_this.skin);
_this.cape = new CapeObject(capeMaterial); _this.cape = new CapeObject(capeMaterial);
_this.cape.name = "cape";
_this.cape.position.z = -2; _this.cape.position.z = -2;
_this.cape.position.y = -4; _this.cape.position.y = -4;
_this.cape.rotation.x = 25 * Math.PI / 180; _this.cape.rotation.x = 25 * Math.PI / 180;
@ -292,40 +302,43 @@ function invokeAnimation(animation, player, time) {
} }
var AnimationWrapper = /** @class */ (function () { var AnimationWrapper = /** @class */ (function () {
function AnimationWrapper(animation) { function AnimationWrapper(animation) {
this.paused = false;
this.speed = 1.0; this.speed = 1.0;
this._paused = false; this.paused = false;
this._lastChange = null; this.progress = 0;
this._speed = 1.0; this.lastTime = 0;
this._lastChangeX = null; this.started = false;
this.toResetAndRemove = false;
this.animation = animation; this.animation = animation;
} }
AnimationWrapper.prototype.play = function (player, time) { AnimationWrapper.prototype.play = function (player, time) {
if (this._lastChange === null) { if (this.toResetAndRemove) {
this._lastChange = time; invokeAnimation(this.animation, player, 0);
this._lastChangeX = 0; this.remove();
return;
} }
else if (this.paused !== this._paused || this.speed !== this._speed) { var delta;
var dt = time - this._lastChange; if (this.started) {
if (this._paused === false) { delta = time - this.lastTime;
this._lastChangeX += dt * this._speed;
} }
this._paused = this.paused; else {
this._speed = this.speed; delta = 0;
this._lastChange = time; this.started = true;
} }
if (this.paused === false) { this.lastTime = time;
var dt = time - this._lastChange; if (!this.paused) {
var x = this._lastChangeX + this.speed * dt; this.progress += delta * this.speed;
invokeAnimation(this.animation, player, x);
} }
invokeAnimation(this.animation, player, this.progress);
}; };
AnimationWrapper.prototype.reset = function () { AnimationWrapper.prototype.reset = function () {
this._lastChange = null; this.progress = 0;
}; };
AnimationWrapper.prototype.remove = function () { AnimationWrapper.prototype.remove = function () {
// stub get's overriden // stub get's overriden
}; };
AnimationWrapper.prototype.resetAndRemove = function () {
this.toResetAndRemove = true;
};
return AnimationWrapper; return AnimationWrapper;
}()); }());
var CompositeAnimation = /** @class */ (function () { var CompositeAnimation = /** @class */ (function () {
@ -335,7 +348,9 @@ var CompositeAnimation = /** @class */ (function () {
CompositeAnimation.prototype.add = function (animation) { CompositeAnimation.prototype.add = function (animation) {
var _this = this; var _this = this;
var handle = new AnimationWrapper(animation); var handle = new AnimationWrapper(animation);
handle.remove = function () { return _this.handles.delete(handle); }; handle.remove = function () {
_this.handles.delete(handle);
};
this.handles.add(handle); this.handles.add(handle);
return handle; return handle;
}; };
@ -344,6 +359,49 @@ var CompositeAnimation = /** @class */ (function () {
}; };
return CompositeAnimation; return CompositeAnimation;
}()); }());
var RootAnimation = /** @class */ (function (_super) {
__extends(RootAnimation, _super);
function RootAnimation() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.speed = 1.0;
_this.progress = 0.0;
_this.clock = new Clock(true);
return _this;
}
Object.defineProperty(RootAnimation.prototype, "animation", {
get: function () {
return this;
},
enumerable: true,
configurable: true
});
Object.defineProperty(RootAnimation.prototype, "paused", {
get: function () {
return !this.clock.running;
},
set: function (value) {
if (value) {
this.clock.stop();
}
else {
this.clock.start();
}
},
enumerable: true,
configurable: true
});
RootAnimation.prototype.runAnimationLoop = function (player) {
if (this.handles.size === 0) {
return;
}
this.progress += this.clock.getDelta() * this.speed;
this.play(player, this.progress);
};
RootAnimation.prototype.reset = function () {
this.progress = 0;
};
return RootAnimation;
}(CompositeAnimation));
var WalkingAnimation = function (player, time) { var WalkingAnimation = function (player, time) {
var skin = player.skin; var skin = player.skin;
// Multiply by animation's natural speed // Multiply by animation's natural speed
@ -580,12 +638,11 @@ function isSlimSkin(canvasOrImage) {
var SkinViewer = /** @class */ (function () { var SkinViewer = /** @class */ (function () {
function SkinViewer(options) { function SkinViewer(options) {
var _this = this; var _this = this;
this.animations = new RootAnimation();
this.detectModel = true; this.detectModel = true;
this.animationPaused = false;
this.animationTime = 0;
this.disposed = false; this.disposed = false;
this._renderPaused = false;
this.domElement = options.domElement; this.domElement = options.domElement;
this.animation = options.animation || null;
if (options.detectModel === false) { if (options.detectModel === false) {
this.detectModel = false; this.detectModel = false;
} }
@ -611,9 +668,9 @@ var SkinViewer = /** @class */ (function () {
this.camera.position.z = 60; this.camera.position.z = 60;
this.renderer = new WebGLRenderer({ alpha: true, antialias: false }); this.renderer = new WebGLRenderer({ alpha: true, antialias: false });
this.renderer.setSize(300, 300); // default size this.renderer.setSize(300, 300); // default size
this.renderer.context.getShaderInfoLog = function () { return ""; }; // shut firefox up
this.domElement.appendChild(this.renderer.domElement); this.domElement.appendChild(this.renderer.domElement);
this.playerObject = new PlayerObject(this.layer1Material, this.layer2Material, this.capeMaterial); this.playerObject = new PlayerObject(this.layer1Material, this.layer2Material, this.capeMaterial);
this.playerObject.name = "player";
this.scene.add(this.playerObject); this.scene.add(this.playerObject);
// texture loading // texture loading
this.skinImg.crossOrigin = "anonymous"; this.skinImg.crossOrigin = "anonymous";
@ -644,20 +701,17 @@ var SkinViewer = /** @class */ (function () {
this.width = options.width; this.width = options.width;
if (options.height) if (options.height)
this.height = options.height; this.height = options.height;
var draw = function () { window.requestAnimationFrame(function () { return _this.draw(); });
if (_this.disposed) }
SkinViewer.prototype.draw = function () {
var _this = this;
if (this.disposed || this._renderPaused) {
return; return;
window.requestAnimationFrame(draw);
if (!_this.animationPaused) {
_this.animationTime++;
if (_this.animation) {
invokeAnimation(_this.animation, _this.playerObject, _this.animationTime / 100.0);
} }
} this.animations.runAnimationLoop(this.playerObject);
_this.renderer.render(_this.scene, _this.camera); this.renderer.render(this.scene, this.camera);
window.requestAnimationFrame(function () { return _this.draw(); });
}; };
draw();
}
SkinViewer.prototype.setSize = function (width, height) { SkinViewer.prototype.setSize = function (width, height) {
this.camera.aspect = width / height; this.camera.aspect = width / height;
this.camera.updateProjectionMatrix(); this.camera.updateProjectionMatrix();
@ -670,6 +724,21 @@ var SkinViewer = /** @class */ (function () {
this.skinTexture.dispose(); this.skinTexture.dispose();
this.capeTexture.dispose(); this.capeTexture.dispose();
}; };
Object.defineProperty(SkinViewer.prototype, "renderPaused", {
get: function () {
return this._renderPaused;
},
set: function (value) {
var _this = this;
var toResume = !this.disposed && !value && this._renderPaused;
this._renderPaused = value;
if (toResume) {
window.requestAnimationFrame(function () { return _this.draw(); });
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(SkinViewer.prototype, "skinUrl", { Object.defineProperty(SkinViewer.prototype, "skinUrl", {
get: function () { get: function () {
return this.skinImg.src; return this.skinImg.src;
@ -692,7 +761,8 @@ var SkinViewer = /** @class */ (function () {
}); });
Object.defineProperty(SkinViewer.prototype, "width", { Object.defineProperty(SkinViewer.prototype, "width", {
get: function () { get: function () {
return this.renderer.getSize().width; var target = new Vector2();
return this.renderer.getSize(target).width;
}, },
set: function (newWidth) { set: function (newWidth) {
this.setSize(newWidth, this.height); this.setSize(newWidth, this.height);
@ -702,7 +772,8 @@ var SkinViewer = /** @class */ (function () {
}); });
Object.defineProperty(SkinViewer.prototype, "height", { Object.defineProperty(SkinViewer.prototype, "height", {
get: function () { get: function () {
return this.renderer.getSize().height; var target = new Vector2();
return this.renderer.getSize(target).height;
}, },
set: function (newHeight) { set: function (newHeight) {
this.setSize(this.width, newHeight); this.setSize(this.width, newHeight);
@ -1211,4 +1282,4 @@ function createOrbitControls(skinViewer) {
return control; return control;
} }
export { SkinObject, BodyPart, CapeObject, PlayerObject, SkinViewer, OrbitControls, createOrbitControls, invokeAnimation, CompositeAnimation, WalkingAnimation, RunningAnimation, RotatingAnimation, isSlimSkin }; export { BodyPart, CapeObject, CompositeAnimation, OrbitControls, PlayerObject, RootAnimation, RotatingAnimation, RunningAnimation, SkinObject, SkinViewer, WalkingAnimation, createOrbitControls, invokeAnimation, isSlimSkin };

41
js/dist/viewer.d.ts vendored
View File

@ -1,4 +1,5 @@
import * as THREE from "three"; import { MeshBasicMaterial, PerspectiveCamera, Scene, Texture, WebGLRenderer } from "three";
import { RootAnimation } from "./animation";
import { PlayerObject } from "./model"; import { PlayerObject } from "./model";
export interface SkinViewerOptions { export interface SkinViewerOptions {
domElement: Node; domElement: Node;
@ -11,29 +12,35 @@ export interface SkinViewerOptions {
} }
export declare class SkinViewer { export declare class SkinViewer {
readonly domElement: Node; readonly domElement: Node;
animation: Animation | null; readonly animations: RootAnimation;
detectModel: boolean; detectModel: boolean;
animationPaused: boolean;
animationTime: number;
disposed: boolean; disposed: boolean;
readonly skinImg: HTMLImageElement; readonly skinImg: HTMLImageElement;
readonly skinCanvas: HTMLCanvasElement; readonly skinCanvas: HTMLCanvasElement;
readonly skinTexture: THREE.Texture; readonly skinTexture: Texture;
readonly capeImg: HTMLImageElement; readonly capeImg: HTMLImageElement;
readonly capeCanvas: HTMLCanvasElement; readonly capeCanvas: HTMLCanvasElement;
readonly capeTexture: THREE.Texture; readonly capeTexture: Texture;
readonly layer1Material: THREE.MeshBasicMaterial; readonly layer1Material: MeshBasicMaterial;
readonly layer2Material: THREE.MeshBasicMaterial; readonly layer2Material: MeshBasicMaterial;
readonly capeMaterial: THREE.MeshBasicMaterial; readonly capeMaterial: MeshBasicMaterial;
readonly scene: THREE.Scene; readonly scene: Scene;
readonly camera: THREE.PerspectiveCamera; readonly camera: PerspectiveCamera;
readonly renderer: THREE.WebGLRenderer; readonly renderer: WebGLRenderer;
readonly playerObject: PlayerObject; readonly playerObject: PlayerObject;
private _renderPaused;
constructor(options: SkinViewerOptions); constructor(options: SkinViewerOptions);
setSize(width: any, height: any): void; private draw;
setSize(width: number, height: number): void;
dispose(): void; dispose(): void;
skinUrl: string; get renderPaused(): boolean;
capeUrl: string; set renderPaused(value: boolean);
width: number; get skinUrl(): string;
height: number; set skinUrl(url: string);
get capeUrl(): string;
set capeUrl(url: string);
get width(): number;
set width(newWidth: number);
get height(): number;
set height(newHeight: number);
} }