Fix many linting issues
This commit is contained in:
Sean Boult
parent
1b5b93bb8f
commit
16d0e8f8ea
File diff suppressed because it is too large
Load Diff
|
|
@ -8,7 +8,7 @@
|
|||
"scripts": {
|
||||
"build": "tsc --p tsconfig.json && rollup -c tools/rollup.module.js && rollup -c tools/rollup.browser.js && rollup -c tools/rollup.browser.min.js",
|
||||
"prepare": "npm test && rimraf build && npm run build",
|
||||
"lint": "eslint src/** tools/** && tslint -c tslint.json types/**.ts",
|
||||
"lint": "tslint -c tslint.json src/**.ts",
|
||||
"dev": "npm-run-all --parallel watch serve",
|
||||
"watch": "rollup -w -c tools/rollup.browser.js",
|
||||
"test": "karma start && npm run lint",
|
||||
|
|
@ -38,6 +38,8 @@
|
|||
"three": "^0.94.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/chai": "^4.1.4",
|
||||
"@types/mocha": "^5.2.5",
|
||||
"@types/three": "^0.92.12",
|
||||
"babel-cli": "^6.26.0",
|
||||
"babel-plugin-external-helpers": "^6.22.0",
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { PlayerObject } from "./model"
|
||||
import { PlayerObject } from "./model";
|
||||
|
||||
function invokeAnimation(animation: Animation, player: PlayerObject, time: number) {
|
||||
if (animation instanceof CompositeAnimation) {
|
||||
|
|
@ -6,7 +6,7 @@ function invokeAnimation(animation: Animation, player: PlayerObject, time: numbe
|
|||
} else if (animation instanceof Function) {
|
||||
animation(player, time);
|
||||
} else {
|
||||
throw `Not an animation: ${animation}`;
|
||||
throw new Error(`Not an animation: ${animation}`);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -18,10 +18,10 @@ type AnimationFn = (player: PlayerObject, time: number) => void;
|
|||
type Animation = AnimationFn | IAnimation;
|
||||
|
||||
class AnimationHandle implements IAnimation {
|
||||
animation: Animation;
|
||||
paused = false;
|
||||
speed: number = 1.0;
|
||||
public paused = false;
|
||||
public speed: number = 1.0;
|
||||
|
||||
private animation: Animation;
|
||||
private _paused = false;
|
||||
private _lastChange: number = null;
|
||||
private _speed: number = 1.0;
|
||||
|
|
@ -36,7 +36,7 @@ class AnimationHandle implements IAnimation {
|
|||
this._lastChange = time;
|
||||
this._lastChangeX = 0;
|
||||
} else if (this.paused !== this._paused || this.speed !== this._speed) {
|
||||
let dt = time - this._lastChange;
|
||||
const dt = time - this._lastChange;
|
||||
if (this._paused === false) {
|
||||
this._lastChangeX += dt * this._speed;
|
||||
}
|
||||
|
|
@ -45,8 +45,8 @@ class AnimationHandle implements IAnimation {
|
|||
this._lastChange = time;
|
||||
}
|
||||
if (this.paused === false) {
|
||||
let dt = time - this._lastChange;
|
||||
let x = this._lastChangeX + this.speed * dt;
|
||||
const dt = time - this._lastChange;
|
||||
const x = this._lastChangeX + this.speed * dt;
|
||||
invokeAnimation(this.animation, player, x);
|
||||
}
|
||||
}
|
||||
|
|
@ -78,8 +78,8 @@ class CompositeAnimation {
|
|||
}
|
||||
}
|
||||
|
||||
let WalkingAnimation: Animation = (player: PlayerObject, time: number) => {
|
||||
let skin = player.skin;
|
||||
const WalkingAnimation: Animation = (player: PlayerObject, time: number) => {
|
||||
const skin = player.skin;
|
||||
|
||||
// Multiply by animation's natural speed
|
||||
time *= 8;
|
||||
|
|
@ -91,7 +91,7 @@ let WalkingAnimation: Animation = (player: PlayerObject, time: number) => {
|
|||
// Arm swing
|
||||
skin.leftArm.rotation.x = Math.sin(time + Math.PI) * 0.5;
|
||||
skin.rightArm.rotation.x = Math.sin(time) * 0.5;
|
||||
let basicArmRotationZ = Math.PI * 0.02;
|
||||
const basicArmRotationZ = Math.PI * 0.02;
|
||||
skin.leftArm.rotation.z = Math.cos(time) * 0.03 + basicArmRotationZ;
|
||||
skin.rightArm.rotation.z = Math.cos(time + Math.PI) * 0.03 - basicArmRotationZ;
|
||||
|
||||
|
|
@ -100,12 +100,12 @@ let WalkingAnimation: Animation = (player: PlayerObject, time: number) => {
|
|||
skin.head.rotation.x = Math.sin(time / 5) * 0.1;
|
||||
|
||||
// Always add an angle for cape around the x axis
|
||||
let basicCapeRotationX = Math.PI * 0.06;
|
||||
const basicCapeRotationX = Math.PI * 0.06;
|
||||
player.cape.rotation.x = Math.sin(time / 1.5) * 0.06 + basicCapeRotationX;
|
||||
};
|
||||
|
||||
let RunningAnimation: Animation = (player: PlayerObject, time: number) => {
|
||||
let skin = player.skin;
|
||||
const RunningAnimation: Animation = (player: PlayerObject, time: number) => {
|
||||
const skin = player.skin;
|
||||
|
||||
time *= 15;
|
||||
|
||||
|
|
@ -116,7 +116,7 @@ let RunningAnimation: Animation = (player: PlayerObject, time: number) => {
|
|||
// Arm swing
|
||||
skin.leftArm.rotation.x = Math.cos(time) * 1.5;
|
||||
skin.rightArm.rotation.x = Math.cos(time + Math.PI) * 1.5;
|
||||
let basicArmRotationZ = Math.PI * 0.1;
|
||||
const basicArmRotationZ = Math.PI * 0.1;
|
||||
skin.leftArm.rotation.z = Math.cos(time) * 0.1 + basicArmRotationZ;
|
||||
skin.rightArm.rotation.z = Math.cos(time + Math.PI) * 0.1 - basicArmRotationZ;
|
||||
|
||||
|
|
@ -130,14 +130,14 @@ let RunningAnimation: Animation = (player: PlayerObject, time: number) => {
|
|||
// Apply higher swing frequency, lower amplitude,
|
||||
// and greater basic rotation around x axis,
|
||||
// to cape when running.
|
||||
let basicCapeRotationX = Math.PI * 0.3;
|
||||
const basicCapeRotationX = Math.PI * 0.3;
|
||||
player.cape.rotation.x = Math.sin(time * 2) * 0.1 + basicCapeRotationX;
|
||||
|
||||
// What about head shaking?
|
||||
// You shouldn't glance right and left when running dude :P
|
||||
};
|
||||
|
||||
let RotatingAnimation: Animation = (player: PlayerObject, time: number) => {
|
||||
const RotatingAnimation: Animation = (player: PlayerObject, time: number) => {
|
||||
player.rotation.y = time;
|
||||
};
|
||||
|
||||
|
|
|
|||
67
src/model.ts
67
src/model.ts
|
|
@ -21,8 +21,7 @@ function toCapeVertices(x1: number, y1: number, x2: number, y2: number) {
|
|||
}
|
||||
|
||||
// TODO move to a util class
|
||||
function setVertices(box: THREE.BoxGeometry, top: Array<THREE.Vector2>, bottom: Array<THREE.Vector2>,
|
||||
left: Array<THREE.Vector2>, front: Array<THREE.Vector2>, right: Array<THREE.Vector2>, back: Array<THREE.Vector2>) {
|
||||
function setVertices(box: THREE.BoxGeometry, top: Array<THREE.Vector2>, bottom: Array<THREE.Vector2>, left: Array<THREE.Vector2>, front: Array<THREE.Vector2>, right: Array<THREE.Vector2>, back: Array<THREE.Vector2>) {
|
||||
|
||||
box.faceVertexUvs[0] = [];
|
||||
box.faceVertexUvs[0][0] = [right[3], right[0], right[2]];
|
||||
|
|
@ -52,7 +51,7 @@ class SkinObject extends THREE.Group {
|
|||
rightLeg: THREE.Group;
|
||||
leftLeg: THREE.Group;
|
||||
|
||||
private modelListeners: Array<Function>;
|
||||
private modelListeners: Array<() => void>;
|
||||
private _slim = false;
|
||||
|
||||
constructor(layer1Material: THREE.MeshBasicMaterial, layer2Material: THREE.MeshBasicMaterial) {
|
||||
|
|
@ -63,7 +62,7 @@ class SkinObject extends THREE.Group {
|
|||
// Head
|
||||
this.head = new THREE.Group();
|
||||
|
||||
let headBox = new THREE.BoxGeometry(8, 8, 8, 0, 0, 0);
|
||||
const headBox = new THREE.BoxGeometry(8, 8, 8, 0, 0, 0);
|
||||
setVertices(headBox,
|
||||
toSkinVertices(8, 0, 16, 8),
|
||||
toSkinVertices(16, 0, 24, 8),
|
||||
|
|
@ -72,10 +71,10 @@ class SkinObject extends THREE.Group {
|
|||
toSkinVertices(16, 8, 24, 16),
|
||||
toSkinVertices(24, 8, 32, 16)
|
||||
);
|
||||
let headMesh = new THREE.Mesh(headBox, layer1Material);
|
||||
const headMesh = new THREE.Mesh(headBox, layer1Material);
|
||||
this.head.add(headMesh);
|
||||
|
||||
let head2Box = new THREE.BoxGeometry(9, 9, 9, 0, 0, 0);
|
||||
const head2Box = new THREE.BoxGeometry(9, 9, 9, 0, 0, 0);
|
||||
setVertices(head2Box,
|
||||
toSkinVertices(40, 0, 48, 8),
|
||||
toSkinVertices(48, 0, 56, 8),
|
||||
|
|
@ -84,17 +83,16 @@ class SkinObject extends THREE.Group {
|
|||
toSkinVertices(48, 8, 56, 16),
|
||||
toSkinVertices(56, 8, 64, 16)
|
||||
);
|
||||
let head2Mesh = new THREE.Mesh(head2Box, layer2Material);
|
||||
const head2Mesh = new THREE.Mesh(head2Box, layer2Material);
|
||||
head2Mesh.renderOrder = -1;
|
||||
this.head.add(head2Mesh);
|
||||
|
||||
this.add(this.head);
|
||||
|
||||
|
||||
// Body
|
||||
this.body = new THREE.Group();
|
||||
|
||||
let bodyBox = new THREE.BoxGeometry(8, 12, 4, 0, 0, 0);
|
||||
const bodyBox = new THREE.BoxGeometry(8, 12, 4, 0, 0, 0);
|
||||
setVertices(bodyBox,
|
||||
toSkinVertices(20, 16, 28, 20),
|
||||
toSkinVertices(28, 16, 36, 20),
|
||||
|
|
@ -103,10 +101,10 @@ class SkinObject extends THREE.Group {
|
|||
toSkinVertices(28, 20, 32, 32),
|
||||
toSkinVertices(32, 20, 40, 32)
|
||||
);
|
||||
let bodyMesh = new THREE.Mesh(bodyBox, layer1Material);
|
||||
const bodyMesh = new THREE.Mesh(bodyBox, layer1Material);
|
||||
this.body.add(bodyMesh);
|
||||
|
||||
let body2Box = new THREE.BoxGeometry(9, 13.5, 4.5, 0, 0, 0);
|
||||
const body2Box = new THREE.BoxGeometry(9, 13.5, 4.5, 0, 0, 0);
|
||||
setVertices(body2Box,
|
||||
toSkinVertices(20, 32, 28, 36),
|
||||
toSkinVertices(28, 32, 36, 36),
|
||||
|
|
@ -115,19 +113,18 @@ class SkinObject extends THREE.Group {
|
|||
toSkinVertices(28, 36, 32, 48),
|
||||
toSkinVertices(32, 36, 40, 48)
|
||||
);
|
||||
let body2Mesh = new THREE.Mesh(body2Box, layer2Material);
|
||||
const body2Mesh = new THREE.Mesh(body2Box, layer2Material);
|
||||
this.body.add(body2Mesh);
|
||||
|
||||
this.body.position.y = -10;
|
||||
this.add(this.body);
|
||||
|
||||
|
||||
// Right Arm
|
||||
this.rightArm = new THREE.Group();
|
||||
let rightArmPivot = new THREE.Group();
|
||||
const rightArmPivot = new THREE.Group();
|
||||
|
||||
let rightArmBox = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
|
||||
let rightArmMesh = new THREE.Mesh(rightArmBox, layer1Material);
|
||||
const rightArmBox = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
|
||||
const rightArmMesh = new THREE.Mesh(rightArmBox, layer1Material);
|
||||
rightArmPivot.add(rightArmMesh);
|
||||
this.modelListeners.push(() => {
|
||||
rightArmMesh.scale.x = (this.slim ? 3 : 4) - esp;
|
||||
|
|
@ -156,8 +153,8 @@ class SkinObject extends THREE.Group {
|
|||
rightArmBox.elementsNeedUpdate = true;
|
||||
});
|
||||
|
||||
let rightArm2Box = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
|
||||
let rightArm2Mesh = new THREE.Mesh(rightArm2Box, layer2Material);
|
||||
const rightArm2Box = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
|
||||
const rightArm2Mesh = new THREE.Mesh(rightArm2Box, layer2Material);
|
||||
rightArm2Mesh.renderOrder = 1;
|
||||
rightArmPivot.add(rightArm2Mesh);
|
||||
this.modelListeners.push(() => {
|
||||
|
|
@ -195,13 +192,12 @@ class SkinObject extends THREE.Group {
|
|||
});
|
||||
this.add(this.rightArm);
|
||||
|
||||
|
||||
// Left Arm
|
||||
this.leftArm = new THREE.Group();
|
||||
let leftArmPivot = new THREE.Group();
|
||||
const leftArmPivot = new THREE.Group();
|
||||
|
||||
let leftArmBox = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
|
||||
let leftArmMesh = new THREE.Mesh(leftArmBox, layer1Material);
|
||||
const leftArmBox = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
|
||||
const leftArmMesh = new THREE.Mesh(leftArmBox, layer1Material);
|
||||
leftArmPivot.add(leftArmMesh);
|
||||
this.modelListeners.push(() => {
|
||||
leftArmMesh.scale.x = (this.slim ? 3 : 4) - esp;
|
||||
|
|
@ -230,8 +226,8 @@ class SkinObject extends THREE.Group {
|
|||
leftArmBox.elementsNeedUpdate = true;
|
||||
});
|
||||
|
||||
let leftArm2Box = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
|
||||
let leftArm2Mesh = new THREE.Mesh(leftArm2Box, layer2Material);
|
||||
const leftArm2Box = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
|
||||
const leftArm2Mesh = new THREE.Mesh(leftArm2Box, layer2Material);
|
||||
leftArm2Mesh.renderOrder = 1;
|
||||
leftArmPivot.add(leftArm2Mesh);
|
||||
this.modelListeners.push(() => {
|
||||
|
|
@ -269,12 +265,11 @@ class SkinObject extends THREE.Group {
|
|||
});
|
||||
this.add(this.leftArm);
|
||||
|
||||
|
||||
// Right Leg
|
||||
this.rightLeg = new THREE.Group();
|
||||
let rightLegPivot = new THREE.Group();
|
||||
const rightLegPivot = new THREE.Group();
|
||||
|
||||
let rightLegBox = new THREE.BoxGeometry(4 - esp, 12 - esp, 4 - esp, 0, 0, 0);
|
||||
const 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),
|
||||
|
|
@ -283,10 +278,10 @@ class SkinObject extends THREE.Group {
|
|||
toSkinVertices(8, 20, 12, 32),
|
||||
toSkinVertices(12, 20, 16, 32)
|
||||
);
|
||||
let rightLegMesh = new THREE.Mesh(rightLegBox, layer1Material);
|
||||
const rightLegMesh = new THREE.Mesh(rightLegBox, layer1Material);
|
||||
rightLegPivot.add(rightLegMesh);
|
||||
|
||||
let rightLeg2Box = new THREE.BoxGeometry(4.5 - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0);
|
||||
const 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),
|
||||
|
|
@ -295,7 +290,7 @@ class SkinObject extends THREE.Group {
|
|||
toSkinVertices(8, 36, 12, 48),
|
||||
toSkinVertices(12, 36, 16, 48)
|
||||
);
|
||||
let rightLeg2Mesh = new THREE.Mesh(rightLeg2Box, layer2Material);
|
||||
const rightLeg2Mesh = new THREE.Mesh(rightLeg2Box, layer2Material);
|
||||
rightLeg2Mesh.renderOrder = 1;
|
||||
rightLegPivot.add(rightLeg2Mesh);
|
||||
|
||||
|
|
@ -307,9 +302,9 @@ class SkinObject extends THREE.Group {
|
|||
|
||||
// Left Leg
|
||||
this.leftLeg = new THREE.Group();
|
||||
let leftLegPivot = new THREE.Group();
|
||||
const leftLegPivot = new THREE.Group();
|
||||
|
||||
let leftLegBox = new THREE.BoxGeometry(4 - esp, 12 - esp, 4 - esp, 0, 0, 0);
|
||||
const 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),
|
||||
|
|
@ -318,10 +313,10 @@ class SkinObject extends THREE.Group {
|
|||
toSkinVertices(24, 52, 28, 64),
|
||||
toSkinVertices(28, 52, 32, 64)
|
||||
);
|
||||
let leftLegMesh = new THREE.Mesh(leftLegBox, layer1Material);
|
||||
const leftLegMesh = new THREE.Mesh(leftLegBox, layer1Material);
|
||||
leftLegPivot.add(leftLegMesh);
|
||||
|
||||
let leftLeg2Box = new THREE.BoxGeometry(4.5 - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0);
|
||||
const 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),
|
||||
|
|
@ -330,7 +325,7 @@ class SkinObject extends THREE.Group {
|
|||
toSkinVertices(8, 52, 12, 64),
|
||||
toSkinVertices(12, 52, 16, 64)
|
||||
);
|
||||
let leftLeg2Mesh = new THREE.Mesh(leftLeg2Box, layer2Material);
|
||||
const leftLeg2Mesh = new THREE.Mesh(leftLeg2Box, layer2Material);
|
||||
leftLeg2Mesh.renderOrder = 1;
|
||||
leftLegPivot.add(leftLeg2Mesh);
|
||||
|
||||
|
|
@ -362,7 +357,7 @@ class CapeObject extends THREE.Group {
|
|||
|
||||
// back = outside
|
||||
// front = inside
|
||||
let capeBox = new THREE.BoxGeometry(10, 16, 1, 0, 0, 0);
|
||||
const capeBox = new THREE.BoxGeometry(10, 16, 1, 0, 0, 0);
|
||||
setVertices(capeBox,
|
||||
toCapeVertices(1, 0, 11, 1),
|
||||
toCapeVertices(11, 0, 21, 1),
|
||||
|
|
|
|||
|
|
@ -10,26 +10,53 @@ const STATE = {
|
|||
TOUCH_PAN: 5
|
||||
};
|
||||
|
||||
const CHANGE_EVENT = { type: 'change' };
|
||||
const START_EVENT = { type: 'start' };
|
||||
const END_EVENT = { type: 'end' };
|
||||
const CHANGE_EVENT = { type: "change" };
|
||||
const START_EVENT = { type: "start" };
|
||||
const END_EVENT = { type: "end" };
|
||||
const EPS = 0.000001;
|
||||
|
||||
/**
|
||||
* @author qiao / https://github.com/qiao
|
||||
* @author mrdoob / http://mrdoob.com
|
||||
* @author alteredq / http://alteredqualia.com/
|
||||
* @author WestLangley / http://github.com/WestLangley
|
||||
* @author erich666 / http://erichaines.com
|
||||
* @author nicolaspanel / http://github.com/nicolaspanel
|
||||
*
|
||||
* This set of controls performs orbiting, dollying (zooming), and panning.
|
||||
* Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).
|
||||
* Orbit - left mouse / touch: one finger move
|
||||
* Zoom - middle mouse, or mousewheel / touch: two finger spread or squish
|
||||
* Pan - right mouse, or arrow keys / touch: three finger swipe
|
||||
*/
|
||||
export class OrbitControls extends THREE.EventDispatcher {
|
||||
/**
|
||||
* @preserve
|
||||
* The code was originally from https://github.com/mrdoob/three.js/blob/d45a042cf962e9b1aa9441810ba118647b48aacb/examples/js/controls/OrbitControls.js
|
||||
*/
|
||||
/**
|
||||
* @license
|
||||
* Copyright (C) 2010-2017 three.js authors
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in
|
||||
* all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
* THE SOFTWARE.
|
||||
*
|
||||
*
|
||||
* @author qiao / https://github.com/qiao
|
||||
* @author mrdoob / http://mrdoob.com
|
||||
* @author alteredq / http://alteredqualia.com/
|
||||
* @author WestLangley / http://github.com/WestLangley
|
||||
* @author erich666 / http://erichaines.com
|
||||
*/
|
||||
|
||||
// This set of controls performs orbiting, dollying (zooming), and panning.
|
||||
// Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).
|
||||
//
|
||||
// Orbit - left mouse / touch: one finger move
|
||||
// Zoom - middle mouse, or mousewheel / touch: two finger spread or squish
|
||||
// Pan - right mouse, or arrow keys / touch: three finger swipe
|
||||
|
||||
object: THREE.Camera;
|
||||
domElement: HTMLElement | HTMLDocument;
|
||||
window: Window;
|
||||
|
|
@ -72,7 +99,7 @@ export class OrbitControls extends THREE.EventDispatcher {
|
|||
|
||||
private rotateStart: THREE.Vector2;
|
||||
private rotateEnd: THREE.Vector2;
|
||||
private rotateDelta: THREE.Vector2
|
||||
private rotateDelta: THREE.Vector2;
|
||||
|
||||
private panStart: THREE.Vector2;
|
||||
private panEnd: THREE.Vector2;
|
||||
|
|
@ -224,8 +251,8 @@ export class OrbitControls extends THREE.EventDispatcher {
|
|||
}
|
||||
|
||||
if (this.state !== STATE.NONE) {
|
||||
document.addEventListener('mousemove', this.onMouseMove, false);
|
||||
document.addEventListener('mouseup', this.onMouseUp, false);
|
||||
document.addEventListener("mousemove", this.onMouseMove, false);
|
||||
document.addEventListener("mouseup", this.onMouseUp, false);
|
||||
this.dispatchEvent(START_EVENT);
|
||||
}
|
||||
};
|
||||
|
|
@ -274,12 +301,12 @@ export class OrbitControls extends THREE.EventDispatcher {
|
|||
this.panStart.copy(this.panEnd);
|
||||
this.update();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.onMouseUp = (event: ThreeEvent) => {
|
||||
if (this.enabled === false) return;
|
||||
document.removeEventListener('mousemove', this.onMouseMove, false);
|
||||
document.removeEventListener('mouseup', this.onMouseUp, false);
|
||||
document.removeEventListener("mousemove", this.onMouseMove, false);
|
||||
document.removeEventListener("mouseup", this.onMouseUp, false);
|
||||
|
||||
this.dispatchEvent(END_EVENT);
|
||||
this.state = STATE.NONE;
|
||||
|
|
@ -312,19 +339,23 @@ export class OrbitControls extends THREE.EventDispatcher {
|
|||
case this.keys.UP: {
|
||||
this.pan(0, this.keyPanSpeed);
|
||||
this.update();
|
||||
} break;
|
||||
break;
|
||||
}
|
||||
case this.keys.BOTTOM: {
|
||||
this.pan(0, - this.keyPanSpeed);
|
||||
this.update();
|
||||
} break;
|
||||
break;
|
||||
}
|
||||
case this.keys.LEFT: {
|
||||
this.pan(this.keyPanSpeed, 0);
|
||||
this.update();
|
||||
} break;
|
||||
break;
|
||||
}
|
||||
case this.keys.RIGHT: {
|
||||
this.pan(- this.keyPanSpeed, 0);
|
||||
this.update();
|
||||
} break;
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -339,25 +370,28 @@ export class OrbitControls extends THREE.EventDispatcher {
|
|||
|
||||
this.rotateStart.set(event.touches[0].pageX, event.touches[0].pageY);
|
||||
this.state = STATE.TOUCH_ROTATE;
|
||||
} break;
|
||||
break;
|
||||
}
|
||||
// two-fingered touch: dolly
|
||||
case 2: {
|
||||
if (this.enableZoom === false) return;
|
||||
|
||||
var dx = event.touches[0].pageX - event.touches[1].pageX;
|
||||
var dy = event.touches[0].pageY - event.touches[1].pageY;
|
||||
const dx = event.touches[0].pageX - event.touches[1].pageX;
|
||||
const dy = event.touches[0].pageY - event.touches[1].pageY;
|
||||
|
||||
var distance = Math.sqrt(dx * dx + dy * dy);
|
||||
const distance = Math.sqrt(dx * dx + dy * dy);
|
||||
this.dollyStart.set(0, distance);
|
||||
this.state = STATE.TOUCH_DOLLY;
|
||||
} break;
|
||||
break;
|
||||
}
|
||||
// three-fingered touch: pan
|
||||
case 3: {
|
||||
if (this.enablePan === false) return;
|
||||
|
||||
this.panStart.set(event.touches[0].pageX, event.touches[0].pageY);
|
||||
this.state = STATE.TOUCH_PAN;
|
||||
} break;
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
this.state = STATE.NONE;
|
||||
}
|
||||
|
|
@ -383,7 +417,7 @@ export class OrbitControls extends THREE.EventDispatcher {
|
|||
this.rotateEnd.set(event.touches[0].pageX, event.touches[0].pageY);
|
||||
this.rotateDelta.subVectors(this.rotateEnd, this.rotateStart);
|
||||
|
||||
var element = this.domElement === document ? this.domElement.body : this.domElement;
|
||||
const element = this.domElement === document ? this.domElement.body : this.domElement;
|
||||
|
||||
// rotating across whole screen goes 360 degrees around
|
||||
this.rotateLeft(2 * Math.PI * this.rotateDelta.x / (element as any).clientWidth * this.rotateSpeed);
|
||||
|
|
@ -394,17 +428,18 @@ export class OrbitControls extends THREE.EventDispatcher {
|
|||
this.rotateStart.copy(this.rotateEnd);
|
||||
|
||||
this.update();
|
||||
} break;
|
||||
break;
|
||||
}
|
||||
// two-fingered touch: dolly
|
||||
case 2: {
|
||||
if (this.enableZoom === false) return;
|
||||
if (this.state !== STATE.TOUCH_DOLLY) return; // is this needed?...
|
||||
|
||||
//console.log( 'handleTouchMoveDolly' );
|
||||
var dx = event.touches[0].pageX - event.touches[1].pageX;
|
||||
var dy = event.touches[0].pageY - event.touches[1].pageY;
|
||||
// console.log( "handleTouchMoveDolly" );
|
||||
const dx = event.touches[0].pageX - event.touches[1].pageX;
|
||||
const dy = event.touches[0].pageY - event.touches[1].pageY;
|
||||
|
||||
var distance = Math.sqrt(dx * dx + dy * dy);
|
||||
const distance = Math.sqrt(dx * dx + dy * dy);
|
||||
|
||||
this.dollyEnd.set(0, distance);
|
||||
|
||||
|
|
@ -418,7 +453,8 @@ export class OrbitControls extends THREE.EventDispatcher {
|
|||
|
||||
this.dollyStart.copy(this.dollyEnd);
|
||||
this.update();
|
||||
} break;
|
||||
break;
|
||||
}
|
||||
// three-fingered touch: pan
|
||||
case 3: {
|
||||
if (this.enablePan === false) return;
|
||||
|
|
@ -428,7 +464,8 @@ export class OrbitControls extends THREE.EventDispatcher {
|
|||
this.pan(this.panDelta.x, this.panDelta.y);
|
||||
this.panStart.copy(this.panEnd);
|
||||
this.update();
|
||||
} break;
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
this.state = STATE.NONE;
|
||||
}
|
||||
|
|
@ -440,22 +477,22 @@ export class OrbitControls extends THREE.EventDispatcher {
|
|||
if (this.enabled === false) return;
|
||||
this.dispatchEvent(END_EVENT);
|
||||
this.state = STATE.NONE;
|
||||
}
|
||||
};
|
||||
|
||||
this.onContextMenu = (event) => {
|
||||
this.onContextMenu = event => {
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
this.domElement.addEventListener('contextmenu', this.onContextMenu, false);
|
||||
this.domElement.addEventListener("contextmenu", this.onContextMenu, false);
|
||||
|
||||
this.domElement.addEventListener('mousedown', this.onMouseDown, false);
|
||||
this.domElement.addEventListener('wheel', this.onMouseWheel, false);
|
||||
this.domElement.addEventListener("mousedown", this.onMouseDown, false);
|
||||
this.domElement.addEventListener("wheel", this.onMouseWheel, false);
|
||||
|
||||
this.domElement.addEventListener('touchstart', this.onTouchStart, false);
|
||||
this.domElement.addEventListener('touchend', this.onTouchEnd, false);
|
||||
this.domElement.addEventListener('touchmove', this.onTouchMove, false);
|
||||
this.domElement.addEventListener("touchstart", this.onTouchStart, false);
|
||||
this.domElement.addEventListener("touchend", this.onTouchEnd, false);
|
||||
this.domElement.addEventListener("touchmove", this.onTouchMove, false);
|
||||
|
||||
this.window.addEventListener('keydown', this.onKeyDown, false);
|
||||
this.window.addEventListener("keydown", this.onKeyDown, false);
|
||||
|
||||
// force an update at start
|
||||
this.update();
|
||||
|
|
@ -554,12 +591,12 @@ export class OrbitControls extends THREE.EventDispatcher {
|
|||
// perspective
|
||||
const position = this.object.position;
|
||||
this.panInternalOffset.copy(position).sub(this.target);
|
||||
var targetDistance = this.panInternalOffset.length();
|
||||
let targetDistance = this.panInternalOffset.length();
|
||||
|
||||
// half of the fov is center to top of screen
|
||||
targetDistance *= Math.tan((this.object.fov / 2) * Math.PI / 180.0);
|
||||
|
||||
// we actually don't use screenWidth, since perspective camera is fixed to screen height
|
||||
// we actually don"t use screenWidth, since perspective camera is fixed to screen height
|
||||
this.panLeft(2 * deltaX * targetDistance / (element as any).clientHeight, this.object.matrix);
|
||||
this.panUp(2 * deltaY * targetDistance / (element as any).clientHeight, this.object.matrix);
|
||||
} else if (this.object instanceof THREE.OrthographicCamera) {
|
||||
|
|
@ -568,7 +605,7 @@ export class OrbitControls extends THREE.EventDispatcher {
|
|||
this.panUp(deltaY * (this.object.top - this.object.bottom) / this.object.zoom / (element as any).clientHeight, this.object.matrix);
|
||||
} else {
|
||||
// camera neither orthographic nor perspective
|
||||
console.warn('WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.');
|
||||
console.warn("WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.");
|
||||
this.enablePan = false;
|
||||
}
|
||||
}
|
||||
|
|
@ -581,7 +618,7 @@ export class OrbitControls extends THREE.EventDispatcher {
|
|||
this.object.updateProjectionMatrix();
|
||||
this.zoomChanged = true;
|
||||
} else {
|
||||
console.warn('WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.');
|
||||
console.warn("WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.");
|
||||
this.enableZoom = false;
|
||||
}
|
||||
}
|
||||
|
|
@ -594,7 +631,7 @@ export class OrbitControls extends THREE.EventDispatcher {
|
|||
this.object.updateProjectionMatrix();
|
||||
this.zoomChanged = true;
|
||||
} else {
|
||||
console.warn('WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.');
|
||||
console.warn("WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.");
|
||||
this.enableZoom = false;
|
||||
}
|
||||
}
|
||||
|
|
@ -624,19 +661,19 @@ export class OrbitControls extends THREE.EventDispatcher {
|
|||
}
|
||||
|
||||
dispose(): void {
|
||||
this.domElement.removeEventListener('contextmenu', this.onContextMenu, false);
|
||||
this.domElement.removeEventListener('mousedown', this.onMouseDown, false);
|
||||
this.domElement.removeEventListener('wheel', this.onMouseWheel, false);
|
||||
this.domElement.removeEventListener("contextmenu", this.onContextMenu, false);
|
||||
this.domElement.removeEventListener("mousedown", this.onMouseDown, false);
|
||||
this.domElement.removeEventListener("wheel", this.onMouseWheel, false);
|
||||
|
||||
this.domElement.removeEventListener('touchstart', this.onTouchStart, false);
|
||||
this.domElement.removeEventListener('touchend', this.onTouchEnd, false);
|
||||
this.domElement.removeEventListener('touchmove', this.onTouchMove, false);
|
||||
this.domElement.removeEventListener("touchstart", this.onTouchStart, false);
|
||||
this.domElement.removeEventListener("touchend", this.onTouchEnd, false);
|
||||
this.domElement.removeEventListener("touchmove", this.onTouchMove, false);
|
||||
|
||||
document.removeEventListener('mousemove', this.onMouseMove, false);
|
||||
document.removeEventListener('mouseup', this.onMouseUp, false);
|
||||
document.removeEventListener("mousemove", this.onMouseMove, false);
|
||||
document.removeEventListener("mouseup", this.onMouseUp, false);
|
||||
|
||||
this.window.removeEventListener('keydown', this.onKeyDown, false);
|
||||
//this.dispatchEvent( { type: 'dispose' } ); // should this be added here?
|
||||
this.window.removeEventListener("keydown", this.onKeyDown, false);
|
||||
// this.dispatchEvent( { type: "dispose" } ); // should this be added here?
|
||||
}
|
||||
|
||||
reset(): void {
|
||||
|
|
@ -654,16 +691,16 @@ export class OrbitControls extends THREE.EventDispatcher {
|
|||
|
||||
// backward compatibility
|
||||
// get center(): THREE.Vector3 {
|
||||
// console.warn('THREE.OrbitControls: .center has been renamed to .target');
|
||||
// console.warn("THREE.OrbitControls: .center has been renamed to .target");
|
||||
// return this.target;
|
||||
// }
|
||||
// get noZoom(): boolean {
|
||||
// console.warn('THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.');
|
||||
// console.warn("THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.");
|
||||
// return !this.enableZoom;
|
||||
// }
|
||||
|
||||
// set noZoom(value: boolean) {
|
||||
// console.warn('THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.');
|
||||
// console.warn("THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.");
|
||||
// this.enableZoom = !value;
|
||||
// }
|
||||
}
|
||||
|
|
@ -678,7 +715,7 @@ interface ThreeEvent extends Event {
|
|||
}
|
||||
|
||||
export function createOrbitControls(skinViewer) {
|
||||
let control = new OrbitControls(skinViewer.camera, skinViewer.renderer.domElement);
|
||||
const control = new OrbitControls(skinViewer.camera, skinViewer.renderer.domElement);
|
||||
|
||||
// default configuration
|
||||
control.enablePan = false;
|
||||
|
|
|
|||
62
src/utils.ts
62
src/utils.ts
|
|
@ -1,19 +1,19 @@
|
|||
function copyImage(context, sX, sY, w, h, dX, dY, flipHorizontal) {
|
||||
let imgData = context.getImageData(sX, sY, w, h);
|
||||
const imgData = context.getImageData(sX, sY, w, h);
|
||||
if (flipHorizontal) {
|
||||
for (let y = 0; y < h; y++) {
|
||||
for (let x = 0; x < (w / 2); x++) {
|
||||
let index = (x + y * w) * 4;
|
||||
let index2 = ((w - x - 1) + y * w) * 4;
|
||||
let pA1 = imgData.data[index];
|
||||
let pA2 = imgData.data[index + 1];
|
||||
let pA3 = imgData.data[index + 2];
|
||||
let pA4 = imgData.data[index + 3];
|
||||
const index = (x + y * w) * 4;
|
||||
const index2 = ((w - x - 1) + y * w) * 4;
|
||||
const pA1 = imgData.data[index];
|
||||
const pA2 = imgData.data[index + 1];
|
||||
const pA3 = imgData.data[index + 2];
|
||||
const pA4 = imgData.data[index + 3];
|
||||
|
||||
let pB1 = imgData.data[index2];
|
||||
let pB2 = imgData.data[index2 + 1];
|
||||
let pB3 = imgData.data[index2 + 2];
|
||||
let pB4 = imgData.data[index2 + 3];
|
||||
const pB1 = imgData.data[index2];
|
||||
const pB2 = imgData.data[index2 + 1];
|
||||
const pB3 = imgData.data[index2 + 2];
|
||||
const pB4 = imgData.data[index2 + 3];
|
||||
|
||||
imgData.data[index] = pB1;
|
||||
imgData.data[index + 1] = pB2;
|
||||
|
|
@ -31,10 +31,10 @@ function copyImage(context, sX, sY, w, h, dX, dY, flipHorizontal) {
|
|||
}
|
||||
|
||||
function hasTransparency(context, x0, y0, w, h) {
|
||||
let imgData = context.getImageData(x0, y0, w, h);
|
||||
const imgData = context.getImageData(x0, y0, w, h);
|
||||
for (let x = 0; x < w; x++) {
|
||||
for (let y = 0; y < h; y++) {
|
||||
let offset = (x + y * w) * 4;
|
||||
const offset = (x + y * w) * 4;
|
||||
if (imgData.data[offset + 3] !== 0xff) {
|
||||
return true;
|
||||
}
|
||||
|
|
@ -51,8 +51,8 @@ function fixOpaqueSkin(context, width) {
|
|||
// Some ancient skins don't have transparent pixels (nor have helm).
|
||||
// We have to make the helm area transparent, otherwise it will be rendered as black.
|
||||
if (!hasTransparency(context, 0, 0, width, width / 2)) {
|
||||
let scale = computeSkinScale(width);
|
||||
let clearArea = (x, y, w, h) => context.clearRect(x * scale, y * scale, w * scale, h * scale);
|
||||
const scale = computeSkinScale(width);
|
||||
const clearArea = (x, y, w, h) => context.clearRect(x * scale, y * scale, w * scale, h * scale);
|
||||
clearArea(40, 0, 8, 8); // Helm Top
|
||||
clearArea(48, 0, 8, 8); // Helm Bottom
|
||||
clearArea(32, 8, 8, 8); // Helm Right
|
||||
|
|
@ -63,8 +63,8 @@ function fixOpaqueSkin(context, width) {
|
|||
}
|
||||
|
||||
function convertSkinTo1_8(context, width) {
|
||||
let scale = computeSkinScale(width);
|
||||
let copySkin = (sX, sY, w, h, dX, dY, flipHorizontal) => copyImage(context, sX * scale, sY * scale, w * scale, h * scale, dX * scale, dY * scale, flipHorizontal);
|
||||
const scale = computeSkinScale(width);
|
||||
const copySkin = (sX, sY, w, h, dX, dY, flipHorizontal) => copyImage(context, sX * scale, sY * scale, w * scale, h * scale, dX * scale, dY * scale, flipHorizontal);
|
||||
|
||||
fixOpaqueSkin(context, width);
|
||||
|
||||
|
|
@ -88,13 +88,13 @@ function loadSkinToCanvas(canvas, image) {
|
|||
if (image.width === 2 * image.height) {
|
||||
isOldFormat = true;
|
||||
} else {
|
||||
throw `Bad skin size: ${image.width}x${image.height}`;
|
||||
throw new Error(`Bad skin size: ${image.width}x${image.height}`);
|
||||
}
|
||||
}
|
||||
|
||||
let context = canvas.getContext("2d");
|
||||
const context = canvas.getContext("2d");
|
||||
if (isOldFormat) {
|
||||
let sideLength = image.width;
|
||||
const sideLength = image.width;
|
||||
canvas.width = sideLength;
|
||||
canvas.height = sideLength;
|
||||
context.clearRect(0, 0, sideLength, sideLength);
|
||||
|
|
@ -111,17 +111,17 @@ function loadSkinToCanvas(canvas, image) {
|
|||
function loadCapeToCanvas(canvas, image) {
|
||||
let isOldFormat = false;
|
||||
if (image.width !== 2 * image.height) {
|
||||
if (image.width * 17 == image.height * 22) {
|
||||
if (image.width * 17 === image.height * 22) {
|
||||
// width/height = 22/17
|
||||
isOldFormat = true;
|
||||
} else {
|
||||
throw `Bad cape size: ${image.width}x${image.height}`;
|
||||
throw new Error(`Bad cape size: ${image.width}x${image.height}`);
|
||||
}
|
||||
}
|
||||
|
||||
let context = canvas.getContext("2d");
|
||||
const context = canvas.getContext("2d");
|
||||
if (isOldFormat) {
|
||||
let width = image.width * 64 / 22;
|
||||
const width = image.width * 64 / 22;
|
||||
canvas.width = width;
|
||||
canvas.height = width / 2;
|
||||
} else {
|
||||
|
|
@ -175,21 +175,21 @@ function isSlimSkin(canvasOrImage) {
|
|||
// as transparent pixels are not allowed in the first layer.
|
||||
|
||||
if (canvasOrImage instanceof HTMLCanvasElement) {
|
||||
let canvas = canvasOrImage;
|
||||
let scale = computeSkinScale(canvas.width);
|
||||
let context = canvas.getContext("2d");
|
||||
let checkArea = (x, y, w, h) => hasTransparency(context, x * scale, y * scale, w * scale, h * scale);
|
||||
const canvas = canvasOrImage;
|
||||
const scale = computeSkinScale(canvas.width);
|
||||
const context = canvas.getContext("2d");
|
||||
const checkArea = (x, y, w, h) => hasTransparency(context, x * scale, y * scale, w * scale, h * scale);
|
||||
return checkArea(50, 16, 2, 4) ||
|
||||
checkArea(54, 20, 2, 12) ||
|
||||
checkArea(42, 48, 2, 4) ||
|
||||
checkArea(46, 52, 2, 12);
|
||||
} else if (canvasOrImage instanceof HTMLImageElement) {
|
||||
let image = canvasOrImage;
|
||||
let canvas = document.createElement("canvas");
|
||||
const image = canvasOrImage;
|
||||
const canvas = document.createElement("canvas");
|
||||
loadSkinToCanvas(canvas, image);
|
||||
return isSlimSkin(canvas);
|
||||
} else {
|
||||
throw `Illegal argument: ${canvasOrImage}`;
|
||||
throw new Error(`Illegal argument: ${canvasOrImage}`);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,31 +5,31 @@ import { loadSkinToCanvas, loadCapeToCanvas, isSlimSkin } from "./utils";
|
|||
|
||||
class SkinViewer {
|
||||
|
||||
domElement: HTMLElement;
|
||||
animation: Animation;
|
||||
detectModel: boolean = false;
|
||||
animationPaused: boolean = false;
|
||||
animationTime: number = 0;
|
||||
disposed: boolean = false;
|
||||
public domElement: HTMLElement;
|
||||
public animation: Animation;
|
||||
public detectModel: boolean = false;
|
||||
public animationPaused: boolean = false;
|
||||
public animationTime: number = 0;
|
||||
public disposed: boolean = false;
|
||||
|
||||
skinImg: HTMLImageElement;
|
||||
skinCanvas: HTMLCanvasElement;
|
||||
skinTexture: THREE.Texture;
|
||||
public skinImg: HTMLImageElement;
|
||||
public skinCanvas: HTMLCanvasElement;
|
||||
public skinTexture: THREE.Texture;
|
||||
|
||||
capeImg: HTMLImageElement;
|
||||
capeCanvas: HTMLCanvasElement;
|
||||
capeTexture: THREE.Texture;
|
||||
public capeImg: HTMLImageElement;
|
||||
public capeCanvas: HTMLCanvasElement;
|
||||
public capeTexture: THREE.Texture;
|
||||
|
||||
layer1Material: THREE.MeshBasicMaterial;
|
||||
layer2Material: THREE.MeshBasicMaterial;
|
||||
public layer1Material: THREE.MeshBasicMaterial;
|
||||
public layer2Material: THREE.MeshBasicMaterial;
|
||||
|
||||
scene: THREE.Scene;
|
||||
camera: THREE.PerspectiveCamera;
|
||||
public scene: THREE.Scene;
|
||||
public camera: THREE.PerspectiveCamera;
|
||||
|
||||
capeMaterial: THREE.MeshBasicMaterial;
|
||||
renderer: THREE.WebGLRenderer;
|
||||
public capeMaterial: THREE.MeshBasicMaterial;
|
||||
public renderer: THREE.WebGLRenderer;
|
||||
|
||||
playerObject: PlayerObject;
|
||||
public playerObject: PlayerObject;
|
||||
|
||||
constructor(options) {
|
||||
this.domElement = options.domElement;
|
||||
|
|
@ -80,7 +80,6 @@ class SkinViewer {
|
|||
|
||||
if (this.detectModel) {
|
||||
this.playerObject.skin.slim = isSlimSkin(this.skinCanvas);
|
||||
console.log("Loading Slim: " + this.playerObject.skin.slim);
|
||||
}
|
||||
|
||||
this.skinTexture.needsUpdate = true;
|
||||
|
|
@ -106,7 +105,7 @@ class SkinViewer {
|
|||
if (options.width) this.width = options.width;
|
||||
if (options.height) this.height = options.height;
|
||||
|
||||
let draw = () => {
|
||||
const draw = () => {
|
||||
if (this.disposed) return;
|
||||
window.requestAnimationFrame(draw);
|
||||
if (!this.animationPaused) {
|
||||
|
|
@ -120,13 +119,13 @@ class SkinViewer {
|
|||
draw();
|
||||
}
|
||||
|
||||
setSize(width, height) {
|
||||
private setSize(width, height) {
|
||||
this.camera.aspect = width / height;
|
||||
this.camera.updateProjectionMatrix();
|
||||
this.renderer.setSize(width, height);
|
||||
}
|
||||
|
||||
dispose() {
|
||||
private dispose() {
|
||||
this.disposed = true;
|
||||
this.domElement.removeChild(this.renderer.domElement);
|
||||
this.renderer.dispose();
|
||||
|
|
|
|||
Loading…
Reference in New Issue