From a28adef80261cc3c80917fa8892479cc40a196bd Mon Sep 17 00:00:00 2001 From: yushijinhun Date: Tue, 7 Jan 2020 13:29:51 +0800 Subject: [PATCH] update codebase --- js/dist/animation.d.ts | 17 +- js/dist/model.d.ts | 27 +-- js/dist/orbit_controls.d.ts | 16 +- js/dist/revision | 2 +- js/dist/skinview3d.d.ts | 2 +- js/dist/skinview3d.js | 330 +++++++++++++++++++++-------------- js/dist/skinview3d.min.js | 16 +- js/dist/skinview3d.module.js | 157 ++++++++++++----- js/dist/viewer.d.ts | 41 +++-- 9 files changed, 394 insertions(+), 214 deletions(-) diff --git a/js/dist/animation.d.ts b/js/dist/animation.d.ts index f4cf943..65da0c6 100644 --- a/js/dist/animation.d.ts +++ b/js/dist/animation.d.ts @@ -1,3 +1,4 @@ +import { Clock } from "three"; import { PlayerObject } from "./model"; export interface IAnimation { 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 function invokeAnimation(animation: Animation, player: PlayerObject, time: number): void; export interface AnimationHandle { - paused: boolean; speed: number; + paused: boolean; + progress: number; readonly animation: Animation; reset(): void; +} +export interface SubAnimationHandle extends AnimationHandle { remove(): void; + resetAndRemove(): void; } export declare class CompositeAnimation implements IAnimation { readonly handles: Set; add(animation: Animation): AnimationHandle; 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 RunningAnimation: Animation; export declare const RotatingAnimation: Animation; diff --git a/js/dist/model.d.ts b/js/dist/model.d.ts index 33d22c0..0a5fdf7 100644 --- a/js/dist/model.d.ts +++ b/js/dist/model.d.ts @@ -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. */ -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 BodyPart extends Group { + readonly innerLayer: Object3D; + readonly outerLayer: Object3D; + constructor(innerLayer: Object3D, outerLayer: Object3D); } -export declare class SkinObject extends THREE.Group { +export declare class SkinObject extends Group { readonly head: BodyPart; readonly body: BodyPart; readonly rightArm: BodyPart; @@ -16,18 +16,19 @@ export declare class SkinObject extends THREE.Group { readonly leftLeg: BodyPart; private modelListeners; private _slim; - constructor(layer1Material: THREE.MeshBasicMaterial, layer2Material: THREE.MeshBasicMaterial); - slim: boolean; + constructor(layer1Material: MeshBasicMaterial, layer2Material: MeshBasicMaterial); + get slim(): boolean; + set slim(value: 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 CapeObject extends Group { + readonly cape: Mesh; + constructor(capeMaterial: MeshBasicMaterial); } -export declare class PlayerObject extends THREE.Group { +export declare class PlayerObject extends Group { readonly skin: SkinObject; readonly cape: CapeObject; - constructor(layer1Material: THREE.MeshBasicMaterial, layer2Material: THREE.MeshBasicMaterial, capeMaterial: THREE.MeshBasicMaterial); + constructor(layer1Material: MeshBasicMaterial, layer2Material: MeshBasicMaterial, capeMaterial: MeshBasicMaterial); } diff --git a/js/dist/orbit_controls.d.ts b/js/dist/orbit_controls.d.ts index 0c83f07..b043e5f 100644 --- a/js/dist/orbit_controls.d.ts +++ b/js/dist/orbit_controls.d.ts @@ -1,6 +1,6 @@ -import * as THREE from "three"; +import { Camera, EventDispatcher, MOUSE, Vector3 } from "three"; import { SkinViewer } from "./viewer"; -export declare class OrbitControls extends THREE.EventDispatcher { +export declare class OrbitControls extends EventDispatcher { /** * @preserve * 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 erich666 / http://erichaines.com */ - object: THREE.Camera; + object: Camera; domElement: HTMLElement | HTMLDocument; window: Window; enabled: boolean; - target: THREE.Vector3; + target: Vector3; enableZoom: boolean; zoomSpeed: number; minDistance: number; @@ -63,9 +63,9 @@ export declare class OrbitControls extends THREE.EventDispatcher { BOTTOM: number; }; mouseButtons: { - ORBIT: THREE.MOUSE; - ZOOM: THREE.MOUSE; - PAN: THREE.MOUSE; + ORBIT: MOUSE; + ZOOM: MOUSE; + PAN: MOUSE; }; enableDamping: boolean; dampingFactor: number; @@ -104,7 +104,7 @@ export declare class OrbitControls extends THREE.EventDispatcher { private onTouchEnd; private onTouchMove; private onKeyDown; - constructor(object: THREE.Camera, domElement?: HTMLElement, domWindow?: Window); + constructor(object: Camera, domElement?: HTMLElement, domWindow?: Window); update(): boolean; panLeft(distance: number, objectMatrix: any): void; panUp(distance: number, objectMatrix: any): void; diff --git a/js/dist/revision b/js/dist/revision index 5ac0ce7..36b1243 100644 --- a/js/dist/revision +++ b/js/dist/revision @@ -1 +1 @@ -c2d91ca51c2d3b49ab5009593f2d6e96a623dadf +add0c04c7345524e6a950f6707ee991f00b6d15c diff --git a/js/dist/skinview3d.d.ts b/js/dist/skinview3d.d.ts index bcad6e7..9282c05 100644 --- a/js/dist/skinview3d.d.ts +++ b/js/dist/skinview3d.d.ts @@ -1,5 +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 { IAnimation, AnimationFn, Animation, invokeAnimation, SubAnimationHandle, AnimationHandle, CompositeAnimation, RootAnimation, WalkingAnimation, RunningAnimation, RotatingAnimation } from "./animation"; export { isSlimSkin } from "./utils"; diff --git a/js/dist/skinview3d.js b/js/dist/skinview3d.js index a114eef..585eca1 100644 --- a/js/dist/skinview3d.js +++ b/js/dist/skinview3d.js @@ -7,8 +7,8 @@ (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('three')) : typeof define === 'function' && define.amd ? define(['exports', 'three'], factory) : - (factory((global.skinview3d = {}),global.THREE)); -}(this, (function (exports,THREE) { 'use strict'; + (global = global || self, factory(global.skinview3d = {}, global.THREE)); +}(this, (function (exports, three) { 'use strict'; /*! ***************************************************************************** Copyright (c) Microsoft Corporation. All rights reserved. @@ -41,10 +41,10 @@ function toFaceVertices(x1, y1, x2, y2, w, h) { return [ - new THREE.Vector2(x1 / w, 1.0 - y2 / h), - new THREE.Vector2(x2 / w, 1.0 - y2 / h), - new THREE.Vector2(x2 / w, 1.0 - y1 / h), - new THREE.Vector2(x1 / w, 1.0 - y1 / h) + new three.Vector2(x1 / w, 1.0 - y2 / h), + new three.Vector2(x2 / w, 1.0 - y2 / h), + new three.Vector2(x2 / w, 1.0 - y1 / h), + new three.Vector2(x1 / w, 1.0 - y1 / h) ]; } function toSkinVertices(x1, y1, x2, y2) { @@ -78,10 +78,12 @@ var _this = _super.call(this) || this; _this.innerLayer = innerLayer; _this.outerLayer = outerLayer; + innerLayer.name = "inner"; + outerLayer.name = "outer"; return _this; } return BodyPart; - }(THREE.Group)); + }(three.Group)); var SkinObject = /** @class */ (function (_super) { __extends(SkinObject, _super); function SkinObject(layer1Material, layer2Material) { @@ -89,30 +91,32 @@ _this.modelListeners = []; // called when model(slim property) is changed _this._slim = false; // 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)); - var headMesh = new THREE.Mesh(headBox, layer1Material); - var head2Box = new THREE.BoxGeometry(9, 9, 9, 0, 0, 0); + var headMesh = new three.Mesh(headBox, layer1Material); + 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)); - var head2Mesh = new THREE.Mesh(head2Box, layer2Material); + var head2Mesh = new three.Mesh(head2Box, layer2Material); head2Mesh.renderOrder = -1; _this.head = new BodyPart(headMesh, head2Mesh); + _this.head.name = "head"; _this.head.add(headMesh, head2Mesh); _this.add(_this.head); // 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)); - var bodyMesh = new THREE.Mesh(bodyBox, layer1Material); - var body2Box = new THREE.BoxGeometry(9, 13.5, 4.5, 0, 0, 0); + var bodyMesh = new three.Mesh(bodyBox, layer1Material); + 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)); - var body2Mesh = new THREE.Mesh(body2Box, layer2Material); + var body2Mesh = new three.Mesh(body2Box, layer2Material); _this.body = new BodyPart(bodyMesh, body2Mesh); + _this.body.name = "body"; _this.body.add(bodyMesh, body2Mesh); _this.body.position.y = -10; _this.add(_this.body); // Right Arm - 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 rightArmBox = new three.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related + var rightArmMesh = new three.Mesh(rightArmBox, layer1Material); _this.modelListeners.push(function () { rightArmMesh.scale.x = (_this.slim ? 3 : 4) - esp; rightArmMesh.scale.y = 12 - esp; @@ -126,8 +130,8 @@ rightArmBox.uvsNeedUpdate = true; rightArmBox.elementsNeedUpdate = true; }); - 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 rightArm2Box = new three.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related + var rightArm2Mesh = new three.Mesh(rightArm2Box, layer2Material); rightArm2Mesh.renderOrder = 1; _this.modelListeners.push(function () { rightArm2Mesh.scale.x = (_this.slim ? 3.375 : 4.5) - esp; @@ -142,10 +146,11 @@ rightArm2Box.uvsNeedUpdate = true; rightArm2Box.elementsNeedUpdate = true; }); - var rightArmPivot = new THREE.Group(); + var rightArmPivot = new three.Group(); rightArmPivot.add(rightArmMesh, rightArm2Mesh); rightArmPivot.position.y = -6; _this.rightArm = new BodyPart(rightArmMesh, rightArm2Mesh); + _this.rightArm.name = "rightArm"; _this.rightArm.add(rightArmPivot); _this.rightArm.position.y = -4; _this.modelListeners.push(function () { @@ -153,8 +158,8 @@ }); _this.add(_this.rightArm); // Left Arm - 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 leftArmBox = new three.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related + var leftArmMesh = new three.Mesh(leftArmBox, layer1Material); _this.modelListeners.push(function () { leftArmMesh.scale.x = (_this.slim ? 3 : 4) - esp; leftArmMesh.scale.y = 12 - esp; @@ -168,8 +173,8 @@ leftArmBox.uvsNeedUpdate = true; leftArmBox.elementsNeedUpdate = true; }); - 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 leftArm2Box = new three.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related + var leftArm2Mesh = new three.Mesh(leftArm2Box, layer2Material); leftArm2Mesh.renderOrder = 1; _this.modelListeners.push(function () { leftArm2Mesh.scale.x = (_this.slim ? 3.375 : 4.5) - esp; @@ -184,10 +189,11 @@ leftArm2Box.uvsNeedUpdate = true; leftArm2Box.elementsNeedUpdate = true; }); - var leftArmPivot = new THREE.Group(); + var leftArmPivot = new three.Group(); leftArmPivot.add(leftArmMesh, leftArm2Mesh); leftArmPivot.position.y = -6; _this.leftArm = new BodyPart(leftArmMesh, leftArm2Mesh); + _this.leftArm.name = "leftArm"; _this.leftArm.add(leftArmPivot); _this.leftArm.position.y = -4; _this.modelListeners.push(function () { @@ -195,33 +201,35 @@ }); _this.add(_this.leftArm); // 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)); - 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 rightLegMesh = new three.Mesh(rightLegBox, layer1Material); + 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)); - var rightLeg2Mesh = new THREE.Mesh(rightLeg2Box, layer2Material); + var rightLeg2Mesh = new three.Mesh(rightLeg2Box, layer2Material); rightLeg2Mesh.renderOrder = 1; - var rightLegPivot = new THREE.Group(); + var rightLegPivot = new three.Group(); rightLegPivot.add(rightLegMesh, rightLeg2Mesh); rightLegPivot.position.y = -6; _this.rightLeg = new BodyPart(rightLegMesh, rightLeg2Mesh); + _this.rightLeg.name = "rightLeg"; _this.rightLeg.add(rightLegPivot); _this.rightLeg.position.y = -16; _this.rightLeg.position.x = -2; _this.add(_this.rightLeg); // 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)); - 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 leftLegMesh = new three.Mesh(leftLegBox, layer1Material); + 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)); - var leftLeg2Mesh = new THREE.Mesh(leftLeg2Box, layer2Material); + var leftLeg2Mesh = new three.Mesh(leftLeg2Box, layer2Material); leftLeg2Mesh.renderOrder = 1; - var leftLegPivot = new THREE.Group(); + var leftLegPivot = new three.Group(); leftLegPivot.add(leftLegMesh, leftLeg2Mesh); leftLegPivot.position.y = -6; _this.leftLeg = new BodyPart(leftLegMesh, leftLeg2Mesh); + _this.leftLeg.name = "leftLeg"; _this.leftLeg.add(leftLegPivot); _this.leftLeg.position.y = -16; _this.leftLeg.position.x = 2; @@ -250,31 +258,33 @@ this.getBodyParts().forEach(function (part) { return part.outerLayer.visible = value; }); }; return SkinObject; - }(THREE.Group)); + }(three.Group)); var CapeObject = /** @class */ (function (_super) { __extends(CapeObject, _super); function CapeObject(capeMaterial) { var _this = _super.call(this) || this; // back = outside // 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)); - _this.cape = new THREE.Mesh(capeBox, capeMaterial); + _this.cape = new three.Mesh(capeBox, capeMaterial); _this.cape.position.y = -8; _this.cape.position.z = -0.5; _this.add(_this.cape); return _this; } return CapeObject; - }(THREE.Group)); + }(three.Group)); var PlayerObject = /** @class */ (function (_super) { __extends(PlayerObject, _super); function PlayerObject(layer1Material, layer2Material, capeMaterial) { var _this = _super.call(this) || this; _this.skin = new SkinObject(layer1Material, layer2Material); + _this.skin.name = "skin"; _this.skin.visible = false; _this.add(_this.skin); _this.cape = new CapeObject(capeMaterial); + _this.cape.name = "cape"; _this.cape.position.z = -2; _this.cape.position.y = -4; _this.cape.rotation.x = 25 * Math.PI / 180; @@ -283,7 +293,7 @@ return _this; } return PlayerObject; - }(THREE.Group)); + }(three.Group)); function invokeAnimation(animation, player, time) { if (animation instanceof Function) { @@ -296,40 +306,43 @@ } var AnimationWrapper = /** @class */ (function () { function AnimationWrapper(animation) { - this.paused = false; this.speed = 1.0; - this._paused = false; - this._lastChange = null; - this._speed = 1.0; - this._lastChangeX = null; + this.paused = false; + this.progress = 0; + this.lastTime = 0; + this.started = false; + this.toResetAndRemove = false; this.animation = animation; } AnimationWrapper.prototype.play = function (player, time) { - if (this._lastChange === null) { - this._lastChange = time; - this._lastChangeX = 0; + if (this.toResetAndRemove) { + invokeAnimation(this.animation, player, 0); + this.remove(); + return; } - else if (this.paused !== this._paused || this.speed !== this._speed) { - var dt = time - this._lastChange; - if (this._paused === false) { - this._lastChangeX += dt * this._speed; - } - this._paused = this.paused; - this._speed = this.speed; - this._lastChange = time; + var delta; + if (this.started) { + delta = time - this.lastTime; } - if (this.paused === false) { - var dt = time - this._lastChange; - var x = this._lastChangeX + this.speed * dt; - invokeAnimation(this.animation, player, x); + else { + delta = 0; + this.started = true; } + this.lastTime = time; + if (!this.paused) { + this.progress += delta * this.speed; + } + invokeAnimation(this.animation, player, this.progress); }; AnimationWrapper.prototype.reset = function () { - this._lastChange = null; + this.progress = 0; }; AnimationWrapper.prototype.remove = function () { // stub get's overriden }; + AnimationWrapper.prototype.resetAndRemove = function () { + this.toResetAndRemove = true; + }; return AnimationWrapper; }()); var CompositeAnimation = /** @class */ (function () { @@ -339,7 +352,9 @@ CompositeAnimation.prototype.add = function (animation) { var _this = this; var handle = new AnimationWrapper(animation); - handle.remove = function () { return _this.handles.delete(handle); }; + handle.remove = function () { + _this.handles.delete(handle); + }; this.handles.add(handle); return handle; }; @@ -348,6 +363,49 @@ }; 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 skin = player.skin; // Multiply by animation's natural speed @@ -584,40 +642,39 @@ var SkinViewer = /** @class */ (function () { function SkinViewer(options) { var _this = this; + this.animations = new RootAnimation(); this.detectModel = true; - this.animationPaused = false; - this.animationTime = 0; this.disposed = false; + this._renderPaused = false; this.domElement = options.domElement; - this.animation = options.animation || null; if (options.detectModel === false) { this.detectModel = false; } // texture this.skinImg = new Image(); this.skinCanvas = document.createElement("canvas"); - this.skinTexture = new THREE.Texture(this.skinCanvas); - this.skinTexture.magFilter = THREE.NearestFilter; - this.skinTexture.minFilter = THREE.NearestFilter; + this.skinTexture = new three.Texture(this.skinCanvas); + this.skinTexture.magFilter = three.NearestFilter; + this.skinTexture.minFilter = three.NearestFilter; this.capeImg = new Image(); this.capeCanvas = document.createElement("canvas"); - this.capeTexture = new THREE.Texture(this.capeCanvas); - this.capeTexture.magFilter = THREE.NearestFilter; - this.capeTexture.minFilter = THREE.NearestFilter; - this.layer1Material = new THREE.MeshBasicMaterial({ map: this.skinTexture, side: THREE.FrontSide }); - this.layer2Material = new THREE.MeshBasicMaterial({ map: this.skinTexture, transparent: true, opacity: 1, side: THREE.DoubleSide, alphaTest: 0.5 }); - this.capeMaterial = new THREE.MeshBasicMaterial({ map: this.capeTexture, transparent: true, opacity: 1, side: THREE.DoubleSide, alphaTest: 0.5 }); + this.capeTexture = new three.Texture(this.capeCanvas); + this.capeTexture.magFilter = three.NearestFilter; + this.capeTexture.minFilter = three.NearestFilter; + this.layer1Material = new three.MeshBasicMaterial({ map: this.skinTexture, side: three.FrontSide }); + this.layer2Material = new three.MeshBasicMaterial({ map: this.skinTexture, transparent: true, opacity: 1, side: three.DoubleSide, alphaTest: 0.5 }); + this.capeMaterial = new three.MeshBasicMaterial({ map: this.capeTexture, transparent: true, opacity: 1, side: three.DoubleSide, alphaTest: 0.5 }); // scene - this.scene = new THREE.Scene(); + this.scene = new three.Scene(); // 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.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.context.getShaderInfoLog = function () { return ""; }; // shut firefox up this.domElement.appendChild(this.renderer.domElement); this.playerObject = new PlayerObject(this.layer1Material, this.layer2Material, this.capeMaterial); + this.playerObject.name = "player"; this.scene.add(this.playerObject); // texture loading this.skinImg.crossOrigin = "anonymous"; @@ -648,20 +705,17 @@ this.width = options.width; if (options.height) this.height = options.height; - var draw = function () { - if (_this.disposed) - return; - window.requestAnimationFrame(draw); - if (!_this.animationPaused) { - _this.animationTime++; - if (_this.animation) { - invokeAnimation(_this.animation, _this.playerObject, _this.animationTime / 100.0); - } - } - _this.renderer.render(_this.scene, _this.camera); - }; - draw(); + window.requestAnimationFrame(function () { return _this.draw(); }); } + SkinViewer.prototype.draw = function () { + var _this = this; + if (this.disposed || this._renderPaused) { + return; + } + this.animations.runAnimationLoop(this.playerObject); + this.renderer.render(this.scene, this.camera); + window.requestAnimationFrame(function () { return _this.draw(); }); + }; SkinViewer.prototype.setSize = function (width, height) { this.camera.aspect = width / height; this.camera.updateProjectionMatrix(); @@ -674,6 +728,21 @@ this.skinTexture.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", { get: function () { return this.skinImg.src; @@ -696,7 +765,8 @@ }); Object.defineProperty(SkinViewer.prototype, "width", { get: function () { - return this.renderer.getSize().width; + var target = new three.Vector2(); + return this.renderer.getSize(target).width; }, set: function (newWidth) { this.setSize(newWidth, this.height); @@ -706,7 +776,8 @@ }); Object.defineProperty(SkinViewer.prototype, "height", { get: function () { - return this.renderer.getSize().height; + var target = new three.Vector2(); + return this.renderer.getSize(target).height; }, set: function (newHeight) { this.setSize(this.width, newHeight); @@ -740,7 +811,7 @@ // Set to false to disable this control _this.enabled = true; // "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 ) _this.minDistance = 0; _this.maxDistance = Infinity; @@ -778,37 +849,37 @@ // The four arrow keys _this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 }; // 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 _this.target0 = _this.target.clone(); _this.position0 = _this.object.position.clone(); _this.zoom0 = _this.object.zoom; // for update speedup - _this.updateOffset = new THREE.Vector3(); + _this.updateOffset = new three.Vector3(); // 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.updateLastPosition = new THREE.Vector3(); - _this.updateLastQuaternion = new THREE.Quaternion(); + _this.updateLastPosition = new three.Vector3(); + _this.updateLastQuaternion = new three.Quaternion(); _this.state = STATE.NONE; _this.scale = 1; // current position in spherical coordinates - _this.spherical = new THREE.Spherical(); - _this.sphericalDelta = new THREE.Spherical(); - _this.panOffset = new THREE.Vector3(); + _this.spherical = new three.Spherical(); + _this.sphericalDelta = new three.Spherical(); + _this.panOffset = new three.Vector3(); _this.zoomChanged = false; - _this.rotateStart = new THREE.Vector2(); - _this.rotateEnd = new THREE.Vector2(); - _this.rotateDelta = new THREE.Vector2(); - _this.panStart = new THREE.Vector2(); - _this.panEnd = new THREE.Vector2(); - _this.panDelta = new THREE.Vector2(); - _this.dollyStart = new THREE.Vector2(); - _this.dollyEnd = new THREE.Vector2(); - _this.dollyDelta = new THREE.Vector2(); - _this.panLeftV = new THREE.Vector3(); - _this.panUpV = new THREE.Vector3(); - _this.panInternalOffset = new THREE.Vector3(); + _this.rotateStart = new three.Vector2(); + _this.rotateEnd = new three.Vector2(); + _this.rotateDelta = new three.Vector2(); + _this.panStart = new three.Vector2(); + _this.panEnd = new three.Vector2(); + _this.panDelta = new three.Vector2(); + _this.dollyStart = new three.Vector2(); + _this.dollyEnd = new three.Vector2(); + _this.dollyDelta = new three.Vector2(); + _this.panLeftV = new three.Vector3(); + _this.panUpV = new three.Vector3(); + _this.panInternalOffset = new three.Vector3(); // event handlers - FSM: listen for events and reset state _this.onMouseDown = function (event) { if (_this.enabled === false) @@ -1113,7 +1184,7 @@ // deltaX and deltaY are in pixels; right and down are positive OrbitControls.prototype.pan = function (deltaX, deltaY) { var element = this.domElement === document ? this.domElement.body : this.domElement; - if (this.object instanceof THREE.PerspectiveCamera) { + if (this.object instanceof three.PerspectiveCamera) { // perspective var position = this.object.position; this.panInternalOffset.copy(position).sub(this.target); @@ -1124,7 +1195,7 @@ this.panLeft(2 * deltaX * 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 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); @@ -1136,10 +1207,10 @@ } }; OrbitControls.prototype.dollyIn = function (dollyScale) { - if (this.object instanceof THREE.PerspectiveCamera) { + if (this.object instanceof three.PerspectiveCamera) { 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.updateProjectionMatrix(); this.zoomChanged = true; @@ -1150,10 +1221,10 @@ } }; OrbitControls.prototype.dollyOut = function (dollyScale) { - if (this.object instanceof THREE.PerspectiveCamera) { + if (this.object instanceof three.PerspectiveCamera) { 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.updateProjectionMatrix(); this.zoomChanged = true; @@ -1203,30 +1274,31 @@ this.state = STATE.NONE; }; return OrbitControls; - }(THREE.EventDispatcher)); + }(three.EventDispatcher)); function createOrbitControls(skinViewer) { var control = new OrbitControls(skinViewer.camera, skinViewer.renderer.domElement); // default configuration control.enablePan = false; - control.target = new THREE.Vector3(0, -12, 0); + control.target = new three.Vector3(0, -12, 0); control.minDistance = 10; control.maxDistance = 256; control.update(); return control; } - exports.SkinObject = SkinObject; exports.BodyPart = BodyPart; exports.CapeObject = CapeObject; - exports.PlayerObject = PlayerObject; - exports.SkinViewer = SkinViewer; + exports.CompositeAnimation = CompositeAnimation; 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.invokeAnimation = invokeAnimation; - exports.CompositeAnimation = CompositeAnimation; - exports.WalkingAnimation = WalkingAnimation; - exports.RunningAnimation = RunningAnimation; - exports.RotatingAnimation = RotatingAnimation; exports.isSlimSkin = isSlimSkin; Object.defineProperty(exports, '__esModule', { value: true }); diff --git a/js/dist/skinview3d.min.js b/js/dist/skinview3d.min.js index 452294a..3a09d3c 100644 --- a/js/dist/skinview3d.min.js +++ b/js/dist/skinview3d.min.js @@ -4,4 +4,18 @@ * MIT License */ -!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("three")):"function"==typeof define&&define.amd?define(["exports","three"],t):t(e.skinview3d={},e.THREE)}(this,function(e,U){"use strict";var a=function(e,t){return(a=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};function t(e,t){function n(){this.constructor=e}a(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}function i(e,t,n,a,i,o){return[new U.Vector2(e/i,1-a/o),new U.Vector2(n/i,1-a/o),new U.Vector2(n/i,1-t/o),new U.Vector2(e/i,1-t/o)]}function V(e,t,n,a){return i(e,t,n,a,64,64)}function o(e,t,n,a){return i(e,t,n,a,64,32)}function A(e,t,n,a,i,o,s){e.faceVertexUvs[0]=[],e.faceVertexUvs[0][0]=[o[3],o[0],o[2]],e.faceVertexUvs[0][1]=[o[0],o[1],o[2]],e.faceVertexUvs[0][2]=[a[3],a[0],a[2]],e.faceVertexUvs[0][3]=[a[0],a[1],a[2]],e.faceVertexUvs[0][4]=[t[3],t[0],t[2]],e.faceVertexUvs[0][5]=[t[0],t[1],t[2]],e.faceVertexUvs[0][6]=[n[0],n[3],n[1]],e.faceVertexUvs[0][7]=[n[3],n[2],n[1]],e.faceVertexUvs[0][8]=[i[3],i[0],i[2]],e.faceVertexUvs[0][9]=[i[0],i[1],i[2]],e.faceVertexUvs[0][10]=[s[3],s[0],s[2]],e.faceVertexUvs[0][11]=[s[0],s[1],s[2]]}var C=.002,z=function(a){function e(e,t){var n=a.call(this)||this;return n.innerLayer=e,n.outerLayer=t,n}return t(e,a),e}(U.Group),s=function(D){function e(e,t){var n=D.call(this)||this;n.modelListeners=[],n._slim=!1;var a=new U.BoxGeometry(8,8,8,0,0,0);A(a,V(8,0,16,8),V(16,0,24,8),V(0,8,8,16),V(8,8,16,16),V(16,8,24,16),V(24,8,32,16));var i=new U.Mesh(a,e),o=new U.BoxGeometry(9,9,9,0,0,0);A(o,V(40,0,48,8),V(48,0,56,8),V(32,8,40,16),V(40,8,48,16),V(48,8,56,16),V(56,8,64,16));var s=new U.Mesh(o,t);s.renderOrder=-1,n.head=new z(i,s),n.head.add(i,s),n.add(n.head);var r=new U.BoxGeometry(8,12,4,0,0,0);A(r,V(20,16,28,20),V(28,16,36,20),V(16,20,20,32),V(20,20,28,32),V(28,20,32,32),V(32,20,40,32));var h=new U.Mesh(r,e),c=new U.BoxGeometry(9,13.5,4.5,0,0,0);A(c,V(20,32,28,36),V(28,32,36,36),V(16,36,20,48),V(20,36,28,48),V(28,36,32,48),V(32,36,40,48));var d=new U.Mesh(c,t);n.body=new z(h,d),n.body.add(h,d),n.body.position.y=-10,n.add(n.body);var l=new U.BoxGeometry(1,1,1,0,0,0),p=new U.Mesh(l,e);n.modelListeners.push(function(){p.scale.x=(n.slim?3:4)-C,p.scale.y=12-C,p.scale.z=4-C,n.slim?A(l,V(44,16,47,20),V(47,16,50,20),V(40,20,44,32),V(44,20,47,32),V(47,20,51,32),V(51,20,54,32)):A(l,V(44,16,48,20),V(48,16,52,20),V(40,20,44,32),V(44,20,48,32),V(48,20,52,32),V(52,20,56,32)),l.uvsNeedUpdate=!0,l.elementsNeedUpdate=!0});var u=new U.BoxGeometry(1,1,1,0,0,0),m=new U.Mesh(u,t);m.renderOrder=1,n.modelListeners.push(function(){m.scale.x=(n.slim?3.375:4.5)-C,m.scale.y=13.498,m.scale.z=4.498,n.slim?A(u,V(44,32,47,36),V(47,32,50,36),V(40,36,44,48),V(44,36,47,48),V(47,36,51,48),V(51,36,54,48)):A(u,V(44,32,48,36),V(48,32,52,36),V(40,36,44,48),V(44,36,48,48),V(48,36,52,48),V(52,36,56,48)),u.uvsNeedUpdate=!0,u.elementsNeedUpdate=!0});var f=new U.Group;f.add(p,m),f.position.y=-6,n.rightArm=new z(p,m),n.rightArm.add(f),n.rightArm.position.y=-4,n.modelListeners.push(function(){n.rightArm.position.x=n.slim?-5.5:-6}),n.add(n.rightArm);var y=new U.BoxGeometry(1,1,1,0,0,0),g=new U.Mesh(y,e);n.modelListeners.push(function(){g.scale.x=(n.slim?3:4)-C,g.scale.y=12-C,g.scale.z=4-C,n.slim?A(y,V(36,48,39,52),V(39,48,42,52),V(32,52,36,64),V(36,52,39,64),V(39,52,43,64),V(43,52,46,64)):A(y,V(36,48,40,52),V(40,48,44,52),V(32,52,36,64),V(36,52,40,64),V(40,52,44,64),V(44,52,48,64)),y.uvsNeedUpdate=!0,y.elementsNeedUpdate=!0});var v=new U.BoxGeometry(1,1,1,0,0,0),w=new U.Mesh(v,t);w.renderOrder=1,n.modelListeners.push(function(){w.scale.x=(n.slim?3.375:4.5)-C,w.scale.y=13.498,w.scale.z=4.498,n.slim?A(v,V(52,48,55,52),V(55,48,58,52),V(48,52,52,64),V(52,52,55,64),V(55,52,59,64),V(59,52,62,64)):A(v,V(52,48,56,52),V(56,48,60,52),V(48,52,52,64),V(52,52,56,64),V(56,52,60,64),V(60,52,64,64)),v.uvsNeedUpdate=!0,v.elementsNeedUpdate=!0});var b=new U.Group;b.add(g,w),b.position.y=-6,n.leftArm=new z(g,w),n.leftArm.add(b),n.leftArm.position.y=-4,n.modelListeners.push(function(){n.leftArm.position.x=n.slim?5.5:6}),n.add(n.leftArm);var M=new U.BoxGeometry(4-C,12-C,4-C,0,0,0);A(M,V(4,16,8,20),V(8,16,12,20),V(0,20,4,32),V(4,20,8,32),V(8,20,12,32),V(12,20,16,32));var x=new U.Mesh(M,e),E=new U.BoxGeometry(4.498,13.498,4.498,0,0,0);A(E,V(4,32,8,36),V(8,32,12,36),V(0,36,4,48),V(4,36,8,48),V(8,36,12,48),V(12,36,16,48));var L=new U.Mesh(E,t);L.renderOrder=1;var S=new U.Group;S.add(x,L),S.position.y=-6,n.rightLeg=new z(x,L),n.rightLeg.add(S),n.rightLeg.position.y=-16,n.rightLeg.position.x=-2,n.add(n.rightLeg);var P=new U.BoxGeometry(4-C,12-C,4-C,0,0,0);A(P,V(20,48,24,52),V(24,48,28,52),V(16,52,20,64),V(20,52,24,64),V(24,52,28,64),V(28,52,32,64));var O=new U.Mesh(P,e),k=new U.BoxGeometry(4.498,13.498,4.498,0,0,0);A(k,V(4,48,8,52),V(8,48,12,52),V(0,52,4,64),V(4,52,8,64),V(8,52,12,64),V(12,52,16,64));var I=new U.Mesh(k,t);I.renderOrder=1;var j=new U.Group;return j.add(O,I),j.position.y=-6,n.leftLeg=new z(O,I),n.leftLeg.add(j),n.leftLeg.position.y=-16,n.leftLeg.position.x=2,n.add(n.leftLeg),n.slim=!1,n}return t(e,D),Object.defineProperty(e.prototype,"slim",{get:function(){return this._slim},set:function(e){this._slim=e,this.modelListeners.forEach(function(e){return e()})},enumerable:!0,configurable:!0}),e.prototype.getBodyParts=function(){return this.children.filter(function(e){return e instanceof z})},e.prototype.setInnerLayerVisible=function(t){this.getBodyParts().forEach(function(e){return e.innerLayer.visible=t})},e.prototype.setOuterLayerVisible=function(t){this.getBodyParts().forEach(function(e){return e.outerLayer.visible=t})},e}(U.Group),r=function(a){function e(e){var t=a.call(this)||this,n=new U.BoxGeometry(10,16,1,0,0,0);return A(n,o(1,0,11,1),o(11,0,21,1),o(11,1,12,17),o(12,1,22,17),o(0,1,1,17),o(1,1,11,17)),t.cape=new U.Mesh(n,e),t.cape.position.y=-8,t.cape.position.z=-.5,t.add(t.cape),t}return t(e,a),e}(U.Group),h=function(i){function e(e,t,n){var a=i.call(this)||this;return a.skin=new s(e,t),a.skin.visible=!1,a.add(a.skin),a.cape=new r(n),a.cape.position.z=-2,a.cape.position.y=-4,a.cape.rotation.x=25*Math.PI/180,a.cape.visible=!1,a.add(a.cape),a}return t(e,i),e}(U.Group);function c(e,t,n){e instanceof Function?e(t,n):e.play(t,n)}var d=function(){function e(e){this.paused=!1,this.speed=1,this._paused=!1,this._lastChange=null,this._speed=1,this._lastChangeX=null,this.animation=e}return e.prototype.play=function(e,t){if(null===this._lastChange)this._lastChange=t,this._lastChangeX=0;else if(this.paused!==this._paused||this.speed!==this._speed){var n=t-this._lastChange;!1===this._paused&&(this._lastChangeX+=n*this._speed),this._paused=this.paused,this._speed=this.speed,this._lastChange=t}if(!1===this.paused){n=t-this._lastChange;var a=this._lastChangeX+this.speed*n;c(this.animation,e,a)}},e.prototype.reset=function(){this._lastChange=null},e.prototype.remove=function(){},e}(),n=function(){function e(){this.handles=new Set}return e.prototype.add=function(e){var t=this,n=new d(e);return n.remove=function(){return t.handles.delete(n)},this.handles.add(n),n},e.prototype.play=function(t,n){this.handles.forEach(function(e){return e.play(t,n)})},e}();function l(e,t,n,a,i){for(var o=e.getImageData(t,n,a,i),s=0;s0?i.dollyIn(i.getZoomScale()):i.dollyDelta.y<0&&i.dollyOut(i.getZoomScale()),i.dollyStart.copy(i.dollyEnd),i.update()}else if(i.state===x.PAN){if(!1===i.enablePan)return;i.panEnd.set(e.clientX,e.clientY),i.panDelta.subVectors(i.panEnd,i.panStart),i.pan(i.panDelta.x,i.panDelta.y),i.panStart.copy(i.panEnd),i.update()}},i.onMouseUp=function(e){!1!==i.enabled&&(document.removeEventListener("mousemove",i.onMouseMove,!1),document.removeEventListener("mouseup",i.onMouseUp,!1),i.dispatchEvent(P),i.state=x.NONE)},i.onMouseWheel=function(e){!1===i.enabled||!1===i.enableZoom||i.state!==x.NONE&&i.state!==x.ROTATE||(e.preventDefault(),e.stopPropagation(),e.deltaY<0?i.dollyOut(i.getZoomScale()):e.deltaY>0&&i.dollyIn(i.getZoomScale()),i.update(),i.dispatchEvent(L),i.dispatchEvent(P))},i.onKeyDown=function(e){if(!1!==i.enabled&&!1!==i.enableKeys&&!1!==i.enablePan)switch(e.keyCode){case i.keys.UP:i.pan(0,i.keyPanSpeed),i.update();break;case i.keys.BOTTOM:i.pan(0,-i.keyPanSpeed),i.update();break;case i.keys.LEFT:i.pan(i.keyPanSpeed,0),i.update();break;case i.keys.RIGHT:i.pan(-i.keyPanSpeed,0),i.update()}},i.onTouchStart=function(e){if(!1!==i.enabled){switch(e.touches.length){case 1:if(!1===i.enableRotate)return;i.rotateStart.set(e.touches[0].pageX,e.touches[0].pageY),i.state=x.TOUCH_ROTATE;break;case 2:if(!1===i.enableZoom)return;var t=e.touches[0].pageX-e.touches[1].pageX,n=e.touches[0].pageY-e.touches[1].pageY,a=Math.sqrt(t*t+n*n);i.dollyStart.set(0,a),i.state=x.TOUCH_DOLLY;break;case 3:if(!1===i.enablePan)return;i.panStart.set(e.touches[0].pageX,e.touches[0].pageY),i.state=x.TOUCH_PAN;break;default:i.state=x.NONE}i.state!==x.NONE&&i.dispatchEvent(L)}},i.onTouchMove=function(e){if(!1!==i.enabled)switch(e.preventDefault(),e.stopPropagation(),e.touches.length){case 1:if(!1===i.enableRotate)return;if(i.state!==x.TOUCH_ROTATE)return;i.rotateEnd.set(e.touches[0].pageX,e.touches[0].pageY),i.rotateDelta.subVectors(i.rotateEnd,i.rotateStart);var t=i.domElement===document?i.domElement.body:i.domElement;i.rotateLeft(2*Math.PI*i.rotateDelta.x/t.clientWidth*i.rotateSpeed),i.rotateUp(2*Math.PI*i.rotateDelta.y/t.clientHeight*i.rotateSpeed),i.rotateStart.copy(i.rotateEnd),i.update();break;case 2:if(!1===i.enableZoom)return;if(i.state!==x.TOUCH_DOLLY)return;var n=e.touches[0].pageX-e.touches[1].pageX,a=e.touches[0].pageY-e.touches[1].pageY,o=Math.sqrt(n*n+a*a);i.dollyEnd.set(0,o),i.dollyDelta.subVectors(i.dollyEnd,i.dollyStart),i.dollyDelta.y>0?i.dollyOut(i.getZoomScale()):i.dollyDelta.y<0&&i.dollyIn(i.getZoomScale()),i.dollyStart.copy(i.dollyEnd),i.update();break;case 3:if(!1===i.enablePan)return;if(i.state!==x.TOUCH_PAN)return;i.panEnd.set(e.touches[0].pageX,e.touches[0].pageY),i.panDelta.subVectors(i.panEnd,i.panStart),i.pan(i.panDelta.x,i.panDelta.y),i.panStart.copy(i.panEnd),i.update();break;default:i.state=x.NONE}},i.onTouchEnd=function(e){!1!==i.enabled&&(i.dispatchEvent(P),i.state=x.NONE)},i.onContextMenu=function(e){e.preventDefault()},i.domElement.addEventListener("contextmenu",i.onContextMenu,!1),i.domElement.addEventListener("mousedown",i.onMouseDown,!1),i.domElement.addEventListener("wheel",i.onMouseWheel,!1),i.domElement.addEventListener("touchstart",i.onTouchStart,!1),i.domElement.addEventListener("touchend",i.onTouchEnd,!1),i.domElement.addEventListener("touchmove",i.onTouchMove,!1),i.window.addEventListener("keydown",i.onKeyDown,!1),i.update(),i}return a(n,e),n.prototype.update=function(){var e=this.object.position;return this.updateOffset.copy(e).sub(this.target),this.updateOffset.applyQuaternion(this.updateQuat),this.spherical.setFromVector3(this.updateOffset),this.autoRotate&&this.state===x.NONE&&this.rotateLeft(this.getAutoRotationAngle()),this.spherical.theta+=this.sphericalDelta.theta,this.spherical.phi+=this.sphericalDelta.phi,this.spherical.theta=Math.max(this.minAzimuthAngle,Math.min(this.maxAzimuthAngle,this.spherical.theta)),this.spherical.phi=Math.max(this.minPolarAngle,Math.min(this.maxPolarAngle,this.spherical.phi)),this.spherical.makeSafe(),this.spherical.radius*=this.scale,this.spherical.radius=Math.max(this.minDistance,Math.min(this.maxDistance,this.spherical.radius)),this.target.add(this.panOffset),this.updateOffset.setFromSpherical(this.spherical),this.updateOffset.applyQuaternion(this.updateQuatInverse),e.copy(this.target).add(this.updateOffset),this.object.lookAt(this.target),!0===this.enableDamping?(this.sphericalDelta.theta*=1-this.dampingFactor,this.sphericalDelta.phi*=1-this.dampingFactor):this.sphericalDelta.set(0,0,0),this.scale=1,this.panOffset.set(0,0,0),!!(this.zoomChanged||this.updateLastPosition.distanceToSquared(this.object.position)>1e-6||8*(1-this.updateLastQuaternion.dot(this.object.quaternion))>1e-6)&&(this.dispatchEvent(O),this.updateLastPosition.copy(this.object.position),this.updateLastQuaternion.copy(this.object.quaternion),this.zoomChanged=!1,!0)},n.prototype.panLeft=function(e,t){this.panLeftV.setFromMatrixColumn(t,0),this.panLeftV.multiplyScalar(-e),this.panOffset.add(this.panLeftV)},n.prototype.panUp=function(e,t){this.panUpV.setFromMatrixColumn(t,1),this.panUpV.multiplyScalar(e),this.panOffset.add(this.panUpV)},n.prototype.pan=function(e,n){var a=this.domElement===document?this.domElement.body:this.domElement;if(this.object instanceof t.PerspectiveCamera){var o=this.object.position;this.panInternalOffset.copy(o).sub(this.target);var i=this.panInternalOffset.length();i*=Math.tan(this.object.fov/2*Math.PI/180),this.panLeft(2*e*i/a.clientHeight,this.object.matrix),this.panUp(2*n*i/a.clientHeight,this.object.matrix)}else this.object instanceof t.OrthographicCamera?(this.panLeft(e*(this.object.right-this.object.left)/this.object.zoom/a.clientWidth,this.object.matrix),this.panUp(n*(this.object.top-this.object.bottom)/this.object.zoom/a.clientHeight,this.object.matrix)):(console.warn("WARNING: OrbitControls.js encountered an unknown camera type - pan disabled."),this.enablePan=!1)},n.prototype.dollyIn=function(e){this.object instanceof t.PerspectiveCamera?this.scale/=e:this.object instanceof t.OrthographicCamera?(this.object.zoom=Math.max(this.minZoom,Math.min(this.maxZoom,this.object.zoom*e)),this.object.updateProjectionMatrix(),this.zoomChanged=!0):(console.warn("WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled."),this.enableZoom=!1)},n.prototype.dollyOut=function(e){this.object instanceof t.PerspectiveCamera?this.scale*=e:this.object instanceof t.OrthographicCamera?(this.object.zoom=Math.max(this.minZoom,Math.min(this.maxZoom,this.object.zoom/e)),this.object.updateProjectionMatrix(),this.zoomChanged=!0):(console.warn("WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled."),this.enableZoom=!1)},n.prototype.getAutoRotationAngle=function(){return 2*Math.PI/60/60*this.autoRotateSpeed},n.prototype.getZoomScale=function(){return Math.pow(.95,this.zoomSpeed)},n.prototype.rotateLeft=function(e){this.sphericalDelta.theta-=e},n.prototype.rotateUp=function(e){this.sphericalDelta.phi-=e},n.prototype.getPolarAngle=function(){return this.spherical.phi},n.prototype.getAzimuthalAngle=function(){return this.spherical.theta},n.prototype.dispose=function(){this.domElement.removeEventListener("contextmenu",this.onContextMenu,!1),this.domElement.removeEventListener("mousedown",this.onMouseDown,!1),this.domElement.removeEventListener("wheel",this.onMouseWheel,!1),this.domElement.removeEventListener("touchstart",this.onTouchStart,!1),this.domElement.removeEventListener("touchend",this.onTouchEnd,!1),this.domElement.removeEventListener("touchmove",this.onTouchMove,!1),document.removeEventListener("mousemove",this.onMouseMove,!1),document.removeEventListener("mouseup",this.onMouseUp,!1),this.window.removeEventListener("keydown",this.onKeyDown,!1)},n.prototype.reset=function(){this.target.copy(this.target0),this.object.position.copy(this.position0),this.object.zoom=this.zoom0,this.object.updateProjectionMatrix(),this.dispatchEvent(O),this.update(),this.state=x.NONE},n}(t.EventDispatcher);e.BodyPart=c,e.CapeObject=l,e.CompositeAnimation=f,e.OrbitControls=A,e.PlayerObject=p,e.RootAnimation=y,e.RotatingAnimation=function(e,t){e.rotation.y=t},e.RunningAnimation=function(e,t){var n=e.skin;t*=15,n.leftLeg.rotation.x=1.3*Math.cos(t+Math.PI),n.rightLeg.rotation.x=1.3*Math.cos(t),n.leftArm.rotation.x=1.5*Math.cos(t),n.rightArm.rotation.x=1.5*Math.cos(t+Math.PI);var a=.1*Math.PI;n.leftArm.rotation.z=.1*Math.cos(t)+a,n.rightArm.rotation.z=.1*Math.cos(t+Math.PI)-a,e.position.y=Math.cos(2*t),e.position.x=.15*Math.cos(t),e.rotation.z=.01*Math.cos(t+Math.PI);var o=.3*Math.PI;e.cape.rotation.x=.1*Math.sin(2*t)+o},e.SkinObject=d,e.SkinViewer=E,e.WalkingAnimation=function(e,t){var n=e.skin;t*=8,n.leftLeg.rotation.x=.5*Math.sin(t),n.rightLeg.rotation.x=.5*Math.sin(t+Math.PI),n.leftArm.rotation.x=.5*Math.sin(t+Math.PI),n.rightArm.rotation.x=.5*Math.sin(t);var a=.02*Math.PI;n.leftArm.rotation.z=.03*Math.cos(t)+a,n.rightArm.rotation.z=.03*Math.cos(t+Math.PI)-a,n.head.rotation.y=.2*Math.sin(t/4),n.head.rotation.x=.1*Math.sin(t/5);var o=.06*Math.PI;e.cape.rotation.x=.06*Math.sin(t/1.5)+o},e.createOrbitControls=function(e){var n=new A(e.camera,e.renderer.domElement);return n.enablePan=!1,n.target=new t.Vector3(0,-12,0),n.minDistance=10,n.maxDistance=256,n.update(),n},e.invokeAnimation=u,e.isSlimSkin=M,Object.defineProperty(e,"__esModule",{value:!0})})); diff --git a/js/dist/skinview3d.module.js b/js/dist/skinview3d.module.js index 456e8bd..90b70cf 100644 --- a/js/dist/skinview3d.module.js +++ b/js/dist/skinview3d.module.js @@ -4,7 +4,7 @@ * 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. @@ -74,6 +74,8 @@ var BodyPart = /** @class */ (function (_super) { var _this = _super.call(this) || this; _this.innerLayer = innerLayer; _this.outerLayer = outerLayer; + innerLayer.name = "inner"; + outerLayer.name = "outer"; return _this; } return BodyPart; @@ -93,6 +95,7 @@ var SkinObject = /** @class */ (function (_super) { var head2Mesh = new Mesh(head2Box, layer2Material); head2Mesh.renderOrder = -1; _this.head = new BodyPart(headMesh, head2Mesh); + _this.head.name = "head"; _this.head.add(headMesh, head2Mesh); _this.add(_this.head); // 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)); var body2Mesh = new Mesh(body2Box, layer2Material); _this.body = new BodyPart(bodyMesh, body2Mesh); + _this.body.name = "body"; _this.body.add(bodyMesh, body2Mesh); _this.body.position.y = -10; _this.add(_this.body); @@ -142,6 +146,7 @@ var SkinObject = /** @class */ (function (_super) { rightArmPivot.add(rightArmMesh, rightArm2Mesh); rightArmPivot.position.y = -6; _this.rightArm = new BodyPart(rightArmMesh, rightArm2Mesh); + _this.rightArm.name = "rightArm"; _this.rightArm.add(rightArmPivot); _this.rightArm.position.y = -4; _this.modelListeners.push(function () { @@ -184,6 +189,7 @@ var SkinObject = /** @class */ (function (_super) { leftArmPivot.add(leftArmMesh, leftArm2Mesh); leftArmPivot.position.y = -6; _this.leftArm = new BodyPart(leftArmMesh, leftArm2Mesh); + _this.leftArm.name = "leftArm"; _this.leftArm.add(leftArmPivot); _this.leftArm.position.y = -4; _this.modelListeners.push(function () { @@ -202,6 +208,7 @@ var SkinObject = /** @class */ (function (_super) { rightLegPivot.add(rightLegMesh, rightLeg2Mesh); rightLegPivot.position.y = -6; _this.rightLeg = new BodyPart(rightLegMesh, rightLeg2Mesh); + _this.rightLeg.name = "rightLeg"; _this.rightLeg.add(rightLegPivot); _this.rightLeg.position.y = -16; _this.rightLeg.position.x = -2; @@ -218,6 +225,7 @@ var SkinObject = /** @class */ (function (_super) { leftLegPivot.add(leftLegMesh, leftLeg2Mesh); leftLegPivot.position.y = -6; _this.leftLeg = new BodyPart(leftLegMesh, leftLeg2Mesh); + _this.leftLeg.name = "leftLeg"; _this.leftLeg.add(leftLegPivot); _this.leftLeg.position.y = -16; _this.leftLeg.position.x = 2; @@ -268,9 +276,11 @@ var PlayerObject = /** @class */ (function (_super) { function PlayerObject(layer1Material, layer2Material, capeMaterial) { var _this = _super.call(this) || this; _this.skin = new SkinObject(layer1Material, layer2Material); + _this.skin.name = "skin"; _this.skin.visible = false; _this.add(_this.skin); _this.cape = new CapeObject(capeMaterial); + _this.cape.name = "cape"; _this.cape.position.z = -2; _this.cape.position.y = -4; _this.cape.rotation.x = 25 * Math.PI / 180; @@ -292,40 +302,43 @@ function invokeAnimation(animation, player, time) { } var AnimationWrapper = /** @class */ (function () { function AnimationWrapper(animation) { - this.paused = false; this.speed = 1.0; - this._paused = false; - this._lastChange = null; - this._speed = 1.0; - this._lastChangeX = null; + this.paused = false; + this.progress = 0; + this.lastTime = 0; + this.started = false; + this.toResetAndRemove = false; this.animation = animation; } AnimationWrapper.prototype.play = function (player, time) { - if (this._lastChange === null) { - this._lastChange = time; - this._lastChangeX = 0; + if (this.toResetAndRemove) { + invokeAnimation(this.animation, player, 0); + this.remove(); + return; } - else if (this.paused !== this._paused || this.speed !== this._speed) { - var dt = time - this._lastChange; - if (this._paused === false) { - this._lastChangeX += dt * this._speed; - } - this._paused = this.paused; - this._speed = this.speed; - this._lastChange = time; + var delta; + if (this.started) { + delta = time - this.lastTime; } - if (this.paused === false) { - var dt = time - this._lastChange; - var x = this._lastChangeX + this.speed * dt; - invokeAnimation(this.animation, player, x); + else { + delta = 0; + this.started = true; } + this.lastTime = time; + if (!this.paused) { + this.progress += delta * this.speed; + } + invokeAnimation(this.animation, player, this.progress); }; AnimationWrapper.prototype.reset = function () { - this._lastChange = null; + this.progress = 0; }; AnimationWrapper.prototype.remove = function () { // stub get's overriden }; + AnimationWrapper.prototype.resetAndRemove = function () { + this.toResetAndRemove = true; + }; return AnimationWrapper; }()); var CompositeAnimation = /** @class */ (function () { @@ -335,7 +348,9 @@ var CompositeAnimation = /** @class */ (function () { CompositeAnimation.prototype.add = function (animation) { var _this = this; var handle = new AnimationWrapper(animation); - handle.remove = function () { return _this.handles.delete(handle); }; + handle.remove = function () { + _this.handles.delete(handle); + }; this.handles.add(handle); return handle; }; @@ -344,6 +359,49 @@ var CompositeAnimation = /** @class */ (function () { }; 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 skin = player.skin; // Multiply by animation's natural speed @@ -580,12 +638,11 @@ function isSlimSkin(canvasOrImage) { var SkinViewer = /** @class */ (function () { function SkinViewer(options) { var _this = this; + this.animations = new RootAnimation(); this.detectModel = true; - this.animationPaused = false; - this.animationTime = 0; this.disposed = false; + this._renderPaused = false; this.domElement = options.domElement; - this.animation = options.animation || null; if (options.detectModel === false) { this.detectModel = false; } @@ -611,9 +668,9 @@ var SkinViewer = /** @class */ (function () { this.camera.position.z = 60; this.renderer = new WebGLRenderer({ alpha: true, antialias: false }); this.renderer.setSize(300, 300); // default size - this.renderer.context.getShaderInfoLog = function () { return ""; }; // shut firefox up this.domElement.appendChild(this.renderer.domElement); this.playerObject = new PlayerObject(this.layer1Material, this.layer2Material, this.capeMaterial); + this.playerObject.name = "player"; this.scene.add(this.playerObject); // texture loading this.skinImg.crossOrigin = "anonymous"; @@ -644,20 +701,17 @@ var SkinViewer = /** @class */ (function () { this.width = options.width; if (options.height) this.height = options.height; - var draw = function () { - if (_this.disposed) - return; - window.requestAnimationFrame(draw); - if (!_this.animationPaused) { - _this.animationTime++; - if (_this.animation) { - invokeAnimation(_this.animation, _this.playerObject, _this.animationTime / 100.0); - } - } - _this.renderer.render(_this.scene, _this.camera); - }; - draw(); + window.requestAnimationFrame(function () { return _this.draw(); }); } + SkinViewer.prototype.draw = function () { + var _this = this; + if (this.disposed || this._renderPaused) { + return; + } + this.animations.runAnimationLoop(this.playerObject); + this.renderer.render(this.scene, this.camera); + window.requestAnimationFrame(function () { return _this.draw(); }); + }; SkinViewer.prototype.setSize = function (width, height) { this.camera.aspect = width / height; this.camera.updateProjectionMatrix(); @@ -670,6 +724,21 @@ var SkinViewer = /** @class */ (function () { this.skinTexture.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", { get: function () { return this.skinImg.src; @@ -692,7 +761,8 @@ var SkinViewer = /** @class */ (function () { }); Object.defineProperty(SkinViewer.prototype, "width", { get: function () { - return this.renderer.getSize().width; + var target = new Vector2(); + return this.renderer.getSize(target).width; }, set: function (newWidth) { this.setSize(newWidth, this.height); @@ -702,7 +772,8 @@ var SkinViewer = /** @class */ (function () { }); Object.defineProperty(SkinViewer.prototype, "height", { get: function () { - return this.renderer.getSize().height; + var target = new Vector2(); + return this.renderer.getSize(target).height; }, set: function (newHeight) { this.setSize(this.width, newHeight); @@ -1211,4 +1282,4 @@ function createOrbitControls(skinViewer) { 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 }; diff --git a/js/dist/viewer.d.ts b/js/dist/viewer.d.ts index 6a89653..26572f1 100644 --- a/js/dist/viewer.d.ts +++ b/js/dist/viewer.d.ts @@ -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"; export interface SkinViewerOptions { domElement: Node; @@ -11,29 +12,35 @@ export interface SkinViewerOptions { } export declare class SkinViewer { readonly domElement: Node; - animation: Animation | null; + readonly animations: RootAnimation; detectModel: boolean; - animationPaused: boolean; - animationTime: number; disposed: boolean; readonly skinImg: HTMLImageElement; readonly skinCanvas: HTMLCanvasElement; - readonly skinTexture: THREE.Texture; + readonly skinTexture: 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 capeTexture: Texture; + readonly layer1Material: MeshBasicMaterial; + readonly layer2Material: MeshBasicMaterial; + readonly capeMaterial: MeshBasicMaterial; + readonly scene: Scene; + readonly camera: PerspectiveCamera; + readonly renderer: WebGLRenderer; readonly playerObject: PlayerObject; + private _renderPaused; constructor(options: SkinViewerOptions); - setSize(width: any, height: any): void; + private draw; + setSize(width: number, height: number): void; dispose(): void; - skinUrl: string; - capeUrl: string; - width: number; - height: number; + get renderPaused(): boolean; + set renderPaused(value: boolean); + get skinUrl(): string; + 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); }