From 2725925fe49ac7b22092e4d3aa9bf39bdbf5f70a Mon Sep 17 00:00:00 2001 From: printempw Date: Sun, 11 Feb 2018 18:43:54 +0800 Subject: [PATCH 01/12] update `MouseControl` and remove event listener --- src/viewer.js | 21 ++++++++++----------- types/viewer.d.ts | 6 ++++-- 2 files changed, 14 insertions(+), 13 deletions(-) diff --git a/src/viewer.js b/src/viewer.js index 313ab53..d022a21 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -227,9 +227,9 @@ class SkinViewer { } } -class SkinControl { +class MouseControl { constructor(skinViewer) { - this.enableAnimationControl = true; + this.enableMouseControl = true; this.skinViewer = skinViewer; this.orbitControls = new OrbitControls(skinViewer.camera, skinViewer.renderer.domElement); @@ -238,20 +238,19 @@ class SkinControl { this.orbitControls.minDistance = 10; this.orbitControls.maxDistance = 256; this.orbitControls.update(); + } - this.animationPauseListener = e => { - if (this.enableAnimationControl) { - e.preventDefault(); - this.skinViewer.animationPaused = !this.skinViewer.animationPaused; - } - }; - this.skinViewer.domElement.addEventListener("contextmenu", this.animationPauseListener, false); + enable() { + this.enableMouseControl = this.orbitControls.enableRotate = this.orbitControls.enableZoom = true; + } + + disable() { + this.enableMouseControl = this.orbitControls.enableRotate = this.orbitControls.enableZoom = false; } dispose() { - this.skinViewer.domElement.removeEventListener("contextmenu", this.animationPauseListener, false); this.orbitControls.dispose(); } } -export { SkinViewer, SkinControl }; +export { SkinViewer, MouseControl }; diff --git a/types/viewer.d.ts b/types/viewer.d.ts index f4bafd6..c0d8929 100644 --- a/types/viewer.d.ts +++ b/types/viewer.d.ts @@ -34,11 +34,13 @@ export class SkinViewer { public dispose(): void; } -export class SkinControl { - public enableAnimationControl: boolean; +export class MouseControl { + public enableMouseControl: boolean; public readonly skinViewer: SkinViewer; constructor(skinViewer: SkinViewer); + public enable(): void; + public disable(): void; public dispose(): void; } From 180af1563b24c753f177b7f1ff02668b74c96111 Mon Sep 17 00:00:00 2001 From: printempw Date: Sun, 11 Feb 2018 19:21:33 +0800 Subject: [PATCH 02/12] adjust camera fov to avoid perspective distortion --- src/viewer.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/viewer.js b/src/viewer.js index d022a21..83ceac2 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -81,9 +81,10 @@ class SkinViewer { // scene this.scene = new THREE.Scene(); - this.camera = new THREE.PerspectiveCamera(75); + // Use smaller fov to avoid distortion + this.camera = new THREE.PerspectiveCamera(40); this.camera.position.y = -12; - this.camera.position.z = 30; + this.camera.position.z = 60; this.renderer = new THREE.WebGLRenderer({ angleRot: true, alpha: true, antialias: false }); this.renderer.setSize(300, 300); // default size From 8797cb6664988052ed658ea85122578095b19874 Mon Sep 17 00:00:00 2001 From: printempw Date: Sun, 11 Feb 2018 20:16:43 +0800 Subject: [PATCH 03/12] expose some methods for mouse control --- src/viewer.js | 13 ++++++++----- types/viewer.d.ts | 5 +++-- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/src/viewer.js b/src/viewer.js index 83ceac2..14e9047 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -230,7 +230,6 @@ class SkinViewer { class MouseControl { constructor(skinViewer) { - this.enableMouseControl = true; this.skinViewer = skinViewer; this.orbitControls = new OrbitControls(skinViewer.camera, skinViewer.renderer.domElement); @@ -241,12 +240,16 @@ class MouseControl { this.orbitControls.update(); } - enable() { - this.enableMouseControl = this.orbitControls.enableRotate = this.orbitControls.enableZoom = true; + togglePan(value) { + this.orbitControls.enablePan = (typeof value === "boolean") ? value : !this.orbitControls.enablePan; } - disable() { - this.enableMouseControl = this.orbitControls.enableRotate = this.orbitControls.enableZoom = false; + toggleZoom(value) { + this.orbitControls.enableZoom = (typeof value === "boolean") ? value : !this.orbitControls.enableZoom; + } + + toggleRotate(value) { + this.orbitControls.enableRotate = (typeof value === "boolean") ? value : !this.orbitControls.enableRotate; } dispose() { diff --git a/types/viewer.d.ts b/types/viewer.d.ts index c0d8929..3d7c66e 100644 --- a/types/viewer.d.ts +++ b/types/viewer.d.ts @@ -40,7 +40,8 @@ export class MouseControl { constructor(skinViewer: SkinViewer); - public enable(): void; - public disable(): void; + public togglePan(): void; + public toggleZoom(): void; + public toggleRotate(): void; public dispose(): void; } From d27b9e649384b5e04ba296a0420f9f2fdb5be486 Mon Sep 17 00:00:00 2001 From: printempw Date: Sun, 11 Feb 2018 22:40:13 +0800 Subject: [PATCH 04/12] refactor animations - update walking animation - add running, rotating animation - add natural speed for animations --- src/animation.js | 78 ++++++++++++++++++++++++++++++++++++++------ src/skinview3d.js | 10 ++++-- types/animation.d.ts | 2 ++ 3 files changed, 78 insertions(+), 12 deletions(-) diff --git a/src/animation.js b/src/animation.js index 7f53b04..848bfee 100644 --- a/src/animation.js +++ b/src/animation.js @@ -15,6 +15,7 @@ class AnimationHandle { this.speed = this._speed = 1.0; this._lastChange = null; this._lastChangeX = null; + this._animationNaturalSpeed = animation.naturalSpeed; } play(player, time) { if (this._lastChange === null) { @@ -31,7 +32,7 @@ class AnimationHandle { } if (this.paused === false) { let dt = time - this._lastChange; - let x = this._lastChangeX + this.speed * dt; + let x = this._lastChangeX + (this.speed * this._animationNaturalSpeed) * dt; invokeAnimation(this.animation, player, x); } } @@ -55,17 +56,74 @@ class CompositeAnimation { } } -let WalkAnimation = (player, time) => { +let WalkingAnimation = (player, time) => { let skin = player.skin; - let angleRot = time + Math.PI / 2; - // Leg Swing - skin.leftLeg.rotation.x = Math.cos(angleRot); - skin.rightLeg.rotation.x = Math.cos(angleRot + (Math.PI)); + // Leg swing + skin.leftLeg.rotation.x = Math.sin(time) * 0.3; + skin.rightLeg.rotation.x = Math.sin(time + Math.PI) * 0.3; - // Arm Swing - skin.leftArm.rotation.x = Math.cos(angleRot + (Math.PI)); - skin.rightArm.rotation.x = Math.cos(angleRot); + // 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; + skin.leftArm.rotation.z = Math.cos(time) * 0.03 + basicArmRotationZ; + skin.rightArm.rotation.z = Math.cos(time + Math.PI) * 0.03 - basicArmRotationZ; + + // Head shaking with different frequency & amplitude + skin.head.rotation.y = Math.sin(time / 2) * 0.2; + skin.head.rotation.x = Math.sin(time / 3) * 0.15; + + // Always add an angle for cape around the x axis + let basicCapeRotationX = Math.PI * 0.06; + player.cape.rotation.x = Math.sin(time / 1.5) * 0.06 + basicCapeRotationX; }; -export { CompositeAnimation, WalkAnimation, invokeAnimation }; +WalkingAnimation.naturalSpeed = 5; + +let RunningAnimation = (player, time) => { + let skin = player.skin; + + // Leg swing with larger amplitude + skin.leftLeg.rotation.x = Math.cos(time + Math.PI) * 1.3; + skin.rightLeg.rotation.x = Math.cos(time) * 1.3; + + // 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; + skin.leftArm.rotation.z = Math.cos(time) * 0.1 + basicArmRotationZ; + skin.rightArm.rotation.z = Math.cos(time + Math.PI) * 0.1 - basicArmRotationZ; + + // Jumping + player.position.y = Math.cos(time * 2); + // Dodging when running + player.position.x = Math.cos(time) * 0.15; + // Slightly tilting when running + player.rotation.z = Math.cos(time + Math.PI) * 0.01; + + // Apply higher swing frequency, lower amplitude, + // and greater basic rotation around x axis, + // to cape when running. + let 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 +}; + +RunningAnimation.naturalSpeed = 13; + +let RotatingAnimation = (player, time) => { + player.rotation.y = time; +}; + +RotatingAnimation.naturalSpeed = 1; + +export { + CompositeAnimation, + invokeAnimation, + WalkingAnimation, + RunningAnimation, + RotatingAnimation +}; diff --git a/src/skinview3d.js b/src/skinview3d.js index b5d5c86..a2a5644 100644 --- a/src/skinview3d.js +++ b/src/skinview3d.js @@ -1,3 +1,9 @@ export { SkinObject, CapeObject, PlayerObject } from "./model"; -export { SkinViewer, SkinControl } from "./viewer"; -export { invokeAnimation, CompositeAnimation, WalkAnimation } from "./animation"; +export { SkinViewer, MouseControl } from "./viewer"; +export { + invokeAnimation, + CompositeAnimation, + WalkingAnimation, + RunningAnimation, + RotatingAnimation +} from "./animation"; diff --git a/types/animation.d.ts b/types/animation.d.ts index 8fa4d62..0d00231 100644 --- a/types/animation.d.ts +++ b/types/animation.d.ts @@ -29,3 +29,5 @@ export class CompositeAnimation implements IAnimation { } export const WalkAnimation: AnimationFn; +export const RunningAnimation: AnimationFn; +export const RotatingAnimation: AnimationFn; From d9fa502cab2dd3d6a3e4ffab61c6ae1859d3bd03 Mon Sep 17 00:00:00 2001 From: printempw Date: Sun, 11 Feb 2018 23:38:10 +0800 Subject: [PATCH 05/12] expose properties instead of methods on `MouseControl` --- src/viewer.js | 24 ++++++++++++++++++------ types/viewer.d.ts | 7 +++---- 2 files changed, 21 insertions(+), 10 deletions(-) diff --git a/src/viewer.js b/src/viewer.js index 14e9047..660db0e 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -240,16 +240,28 @@ class MouseControl { this.orbitControls.update(); } - togglePan(value) { - this.orbitControls.enablePan = (typeof value === "boolean") ? value : !this.orbitControls.enablePan; + get rotation() { + return this.orbitControls.enableRotate; } - toggleZoom(value) { - this.orbitControls.enableZoom = (typeof value === "boolean") ? value : !this.orbitControls.enableZoom; + set rotation(value) { + this.orbitControls.enableRotate = value; } - toggleRotate(value) { - this.orbitControls.enableRotate = (typeof value === "boolean") ? value : !this.orbitControls.enableRotate; + get zoom() { + return this.orbitControls.enableZoom; + } + + set zoom(value) { + this.orbitControls.enableZoom = value; + } + + get pan() { + return this.orbitControls.enablePan; + } + + set pan(value) { + this.orbitControls.enablePan = value; } dispose() { diff --git a/types/viewer.d.ts b/types/viewer.d.ts index 3d7c66e..e6e64d0 100644 --- a/types/viewer.d.ts +++ b/types/viewer.d.ts @@ -35,13 +35,12 @@ export class SkinViewer { } export class MouseControl { - public enableMouseControl: boolean; + public pan: boolean; + public zoom: boolean; + public rotation: boolean; public readonly skinViewer: SkinViewer; constructor(skinViewer: SkinViewer); - public togglePan(): void; - public toggleZoom(): void; - public toggleRotate(): void; public dispose(): void; } From b616ce8cf2d569b488b930f2228695d5f4aac494 Mon Sep 17 00:00:00 2001 From: printempw Date: Sun, 11 Feb 2018 23:39:33 +0800 Subject: [PATCH 06/12] update README --- README.md | 39 ++++++++++++++++++++++++--------------- 1 file changed, 24 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 81e6094..deb8c37 100644 --- a/README.md +++ b/README.md @@ -28,28 +28,37 @@ Three.js powered Minecraft skin viewer. capeUrl: "img/cape.png" }); - // change the skin and cape - // skinViewer.skinUrl = "img/skin.png"; - // skinViewer.capeUrl = "img/cape.png"; + // Change the textures + skinViewer.skinUrl = "img/skin2.png"; + skinViewer.capeUrl = "img/cape2.png"; - // change the width and height - // skinViewer.width = 300; - // skinViewer.height = 400; + // Resize the skin viewer + skinViewer.width = 300; + skinViewer.height = 400; - // enable the mouse control feature + // Control objects with your mouse! let control = new skinview3d.SkinControl(skinViewer); - - // disable the 'right click to play/pause' feature - // control.enableAnimationControl = false; + control.rotation = true; + control.zoom = false; + control.pan = false; skinViewer.animation = new skinview3d.CompositeAnimation(); - // add an animation - let walk = skinViewer.animation.add(skinview3d.WalkAnimation); + // Add an animation + let walk = skinViewer.animation.add(skinview3d.WalkingAnimation); + // Add another animation + let rotate = skinViewer.animation.add(skinview3d.RotatingAnimation); + // Remove an animation, stop walking dude + walk.remove(); + // And run for now! + let run = skinViewer.animation.add(skinview3d.RunningAnimation); - // set its speed and some others - walk.speed = 1.5; - // walk.paused = true; + // Set the speed of an animation + run.speed = 3; + // Pause single animation + run.paused = true; + // Pause all animations! + skinViewer.animationPaused = true; ``` From 58a9df63bfb2696091a37922bd3a5504007ff298 Mon Sep 17 00:00:00 2001 From: yushijinhun Date: Mon, 12 Feb 2018 09:46:07 +0800 Subject: [PATCH 07/12] remove MouseControl --- README.md | 8 ++++---- src/orbit_controls.js | 15 ++++++++++++++- src/skinview3d.js | 3 ++- src/viewer.js | 44 +------------------------------------------ 4 files changed, 21 insertions(+), 49 deletions(-) diff --git a/README.md b/README.md index deb8c37..bf0bc10 100644 --- a/README.md +++ b/README.md @@ -37,10 +37,10 @@ Three.js powered Minecraft skin viewer. skinViewer.height = 400; // Control objects with your mouse! - let control = new skinview3d.SkinControl(skinViewer); - control.rotation = true; - control.zoom = false; - control.pan = false; + let control = skinview3d.createOrbitControls(skinViewer); + control.enableRotate = true; + control.enableZoom = false; + control.enablePan = false; skinViewer.animation = new skinview3d.CompositeAnimation(); diff --git a/src/orbit_controls.js b/src/orbit_controls.js index 08f8af2..633ee47 100644 --- a/src/orbit_controls.js +++ b/src/orbit_controls.js @@ -593,4 +593,17 @@ class OrbitControls extends THREE.EventDispatcher { } } -export { OrbitControls }; +function createOrbitControls(skinViewer) { + let control = new OrbitControls(skinViewer.camera, skinViewer.renderer.domElement); + + // default configuration + control.enablePan = false; + control.target = new THREE.Vector3(0, -12, 0); + control.minDistance = 10; + control.maxDistance = 256; + control.update(); + + return control; +} + +export { OrbitControls, createOrbitControls }; diff --git a/src/skinview3d.js b/src/skinview3d.js index a2a5644..f4069d9 100644 --- a/src/skinview3d.js +++ b/src/skinview3d.js @@ -1,5 +1,6 @@ export { SkinObject, CapeObject, PlayerObject } from "./model"; -export { SkinViewer, MouseControl } from "./viewer"; +export { SkinViewer } from "./viewer"; +export { OrbitControls, createOrbitControls } from "./orbit_controls"; export { invokeAnimation, CompositeAnimation, diff --git a/src/viewer.js b/src/viewer.js index 660db0e..964157a 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -1,6 +1,5 @@ import * as THREE from "three"; import { PlayerObject } from "./model"; -import { OrbitControls } from "./orbit_controls"; import { invokeAnimation } from "./animation"; function copyImage(context, sX, sY, w, h, dX, dY, flipHorizontal) { @@ -228,45 +227,4 @@ class SkinViewer { } } -class MouseControl { - constructor(skinViewer) { - this.skinViewer = skinViewer; - - this.orbitControls = new OrbitControls(skinViewer.camera, skinViewer.renderer.domElement); - this.orbitControls.enablePan = false; - this.orbitControls.target = new THREE.Vector3(0, -12, 0); - this.orbitControls.minDistance = 10; - this.orbitControls.maxDistance = 256; - this.orbitControls.update(); - } - - get rotation() { - return this.orbitControls.enableRotate; - } - - set rotation(value) { - this.orbitControls.enableRotate = value; - } - - get zoom() { - return this.orbitControls.enableZoom; - } - - set zoom(value) { - this.orbitControls.enableZoom = value; - } - - get pan() { - return this.orbitControls.enablePan; - } - - set pan(value) { - this.orbitControls.enablePan = value; - } - - dispose() { - this.orbitControls.dispose(); - } -} - -export { SkinViewer, MouseControl }; +export { SkinViewer }; From b6533842b42f4239df575670cbf6185e72464bec Mon Sep 17 00:00:00 2001 From: yushijinhun Date: Mon, 12 Feb 2018 10:12:44 +0800 Subject: [PATCH 08/12] add ts defs for OrbitControls --- types/orbit_controls.d.ts | 57 +++++++++++++++++++++++++++++++++++++++ types/skinview3d.d.ts | 1 + 2 files changed, 58 insertions(+) create mode 100644 types/orbit_controls.d.ts diff --git a/types/orbit_controls.d.ts b/types/orbit_controls.d.ts new file mode 100644 index 0000000..98c5dea --- /dev/null +++ b/types/orbit_controls.d.ts @@ -0,0 +1,57 @@ +import * as THREE from "three"; +import { SkinViewer } from "./viewer"; + +export class OrbitControls { + + public readonly object: THREE.Camera; + public readonly domElement: HTMLElement | HTMLDocument; + + public enabled: boolean; + public target: THREE.Vector3; + + public minDistance: number; + public maxDistance: number; + + public minZoom: number; + public maxZoom: number; + + public minPolarAngle: number; + public maxPolarAngle: number; + + public minAzimuthAngle: number; + public maxAzimuthAngle: number; + + public enableDamping: boolean; + public dampingFactor: number; + + public enableZoom: boolean; + public zoomSpeed: number; + + public enableRotate: boolean; + public rotateSpeed: number; + + public enablePan: boolean; + public keyPanSpeed: number; + + public autoRotate: boolean; + public autoRotateSpeed: number; + + public enableKeys: boolean; + public keys: { LEFT: number, UP: number, RIGHT: number, BOTTOM: number }; + + public mouseButtons = { ORBIT: THREE.MOUSE, ZOOM: THREE.MOUSE, PAN: THREE.MOUSE }; + + constructor(object: THREE.Camera, domElement: HTMLElement); + + public getPolarAngle(): number; + public getAzimuthalAngle(): number; + + public saveState(): void; + public reset(): void; + + public update(): void; + + public dispose(): void; +} + +export function createOrbitControls(skinViewer: SkinViewer): OrbitControls; diff --git a/types/skinview3d.d.ts b/types/skinview3d.d.ts index 43581bc..befec93 100644 --- a/types/skinview3d.d.ts +++ b/types/skinview3d.d.ts @@ -1,3 +1,4 @@ export * from "./model"; export * from "./animation"; export * from "./viewer"; +export * from "./orbit_controls"; From 8f9127777e38bb04157efdcb0cc5f4b3ce66fdcf Mon Sep 17 00:00:00 2001 From: printempw Date: Mon, 12 Feb 2018 10:16:26 +0800 Subject: [PATCH 09/12] fix type definition of animation functions --- src/animation.js | 2 +- types/animation.d.ts | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/animation.js b/src/animation.js index 848bfee..d12f0d2 100644 --- a/src/animation.js +++ b/src/animation.js @@ -15,7 +15,7 @@ class AnimationHandle { this.speed = this._speed = 1.0; this._lastChange = null; this._lastChangeX = null; - this._animationNaturalSpeed = animation.naturalSpeed; + this._animationNaturalSpeed = animation.naturalSpeed || 1.0; } play(player, time) { if (this._lastChange === null) { diff --git a/types/animation.d.ts b/types/animation.d.ts index 0d00231..e508bb7 100644 --- a/types/animation.d.ts +++ b/types/animation.d.ts @@ -28,6 +28,6 @@ export class CompositeAnimation implements IAnimation { public play(player: PlayerObject, time: number): void; } -export const WalkAnimation: AnimationFn; -export const RunningAnimation: AnimationFn; -export const RotatingAnimation: AnimationFn; +export const WalkingAnimation: AnimationFn & { naturalSpeed?: number }; +export const RunningAnimation: AnimationFn & { naturalSpeed?: number }; +export const RotatingAnimation: AnimationFn & { naturalSpeed?: number }; From 5b215cdccad9ffeeaea9950dd0737464ceb64b7c Mon Sep 17 00:00:00 2001 From: printempw Date: Mon, 12 Feb 2018 10:39:20 +0800 Subject: [PATCH 10/12] update type definition of naturalSpeed --- types/animation.d.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/types/animation.d.ts b/types/animation.d.ts index e508bb7..31f2f3e 100644 --- a/types/animation.d.ts +++ b/types/animation.d.ts @@ -1,9 +1,10 @@ import { PlayerObject } from "./model"; export interface IAnimation { + naturalSpeed?: number; play(player: PlayerObject, time: number): void; } -export type AnimationFn = (player: PlayerObject, time: number) => void; +export type AnimationFn = ((player: PlayerObject, time: number) => void) & { naturalSpeed?: number }; export type Animation = AnimationFn | IAnimation; export function invokeAnimation( @@ -28,6 +29,6 @@ export class CompositeAnimation implements IAnimation { public play(player: PlayerObject, time: number): void; } -export const WalkingAnimation: AnimationFn & { naturalSpeed?: number }; -export const RunningAnimation: AnimationFn & { naturalSpeed?: number }; -export const RotatingAnimation: AnimationFn & { naturalSpeed?: number }; +export const WalkingAnimation: AnimationFn; +export const RunningAnimation: AnimationFn; +export const RotatingAnimation: AnimationFn; From c8b290157602e939371bf510abcbd4a95b6033ff Mon Sep 17 00:00:00 2001 From: yushijinhun Date: Mon, 12 Feb 2018 11:15:17 +0800 Subject: [PATCH 11/12] fixes --- types/orbit_controls.d.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/types/orbit_controls.d.ts b/types/orbit_controls.d.ts index 98c5dea..73cdcac 100644 --- a/types/orbit_controls.d.ts +++ b/types/orbit_controls.d.ts @@ -39,9 +39,9 @@ export class OrbitControls { public enableKeys: boolean; public keys: { LEFT: number, UP: number, RIGHT: number, BOTTOM: number }; - public mouseButtons = { ORBIT: THREE.MOUSE, ZOOM: THREE.MOUSE, PAN: THREE.MOUSE }; + public mouseButtons: { ORBIT: THREE.MOUSE, ZOOM: THREE.MOUSE, PAN: THREE.MOUSE }; - constructor(object: THREE.Camera, domElement: HTMLElement); + constructor(object: THREE.Camera, domElement?: HTMLElement); public getPolarAngle(): number; public getAzimuthalAngle(): number; @@ -49,7 +49,7 @@ export class OrbitControls { public saveState(): void; public reset(): void; - public update(): void; + public update(): boolean; public dispose(): void; } From a0730f8da8d1d3d3b7a6d55e81073847f30a304a Mon Sep 17 00:00:00 2001 From: printempw Date: Mon, 12 Feb 2018 12:23:05 +0800 Subject: [PATCH 12/12] remove naturalSpeed property of animation function --- src/animation.js | 36 +++++++++++++++++------------------- types/animation.d.ts | 3 +-- 2 files changed, 18 insertions(+), 21 deletions(-) diff --git a/src/animation.js b/src/animation.js index d12f0d2..bbacf6a 100644 --- a/src/animation.js +++ b/src/animation.js @@ -15,7 +15,6 @@ class AnimationHandle { this.speed = this._speed = 1.0; this._lastChange = null; this._lastChangeX = null; - this._animationNaturalSpeed = animation.naturalSpeed || 1.0; } play(player, time) { if (this._lastChange === null) { @@ -32,7 +31,7 @@ class AnimationHandle { } if (this.paused === false) { let dt = time - this._lastChange; - let x = this._lastChangeX + (this.speed * this._animationNaturalSpeed) * dt; + let x = this._lastChangeX + this.speed * dt; invokeAnimation(this.animation, player, x); } } @@ -59,40 +58,43 @@ class CompositeAnimation { let WalkingAnimation = (player, time) => { let skin = player.skin; + // Multiply by animation's natural speed + time *= 8; + // Leg swing - skin.leftLeg.rotation.x = Math.sin(time) * 0.3; - skin.rightLeg.rotation.x = Math.sin(time + Math.PI) * 0.3; + skin.leftLeg.rotation.x = Math.sin(time) * 0.5; + skin.rightLeg.rotation.x = Math.sin(time + Math.PI) * 0.5; // Arm swing - skin.leftArm.rotation.x = Math.sin(time + Math.PI) * 0.5; + 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; - skin.leftArm.rotation.z = Math.cos(time) * 0.03 + basicArmRotationZ; + let 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; // Head shaking with different frequency & amplitude - skin.head.rotation.y = Math.sin(time / 2) * 0.2; - skin.head.rotation.x = Math.sin(time / 3) * 0.15; + skin.head.rotation.y = Math.sin(time / 4) * 0.2; + 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; player.cape.rotation.x = Math.sin(time / 1.5) * 0.06 + basicCapeRotationX; }; -WalkingAnimation.naturalSpeed = 5; - let RunningAnimation = (player, time) => { let skin = player.skin; + time *= 15; + // Leg swing with larger amplitude - skin.leftLeg.rotation.x = Math.cos(time + Math.PI) * 1.3; + skin.leftLeg.rotation.x = Math.cos(time + Math.PI) * 1.3; skin.rightLeg.rotation.x = Math.cos(time) * 1.3; // Arm swing - skin.leftArm.rotation.x = Math.cos(time) * 1.5; + 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; - skin.leftArm.rotation.z = Math.cos(time) * 0.1 + basicArmRotationZ; + let 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; // Jumping @@ -112,14 +114,10 @@ let RunningAnimation = (player, time) => { // You shouldn't glance right and left when running dude :P }; -RunningAnimation.naturalSpeed = 13; - let RotatingAnimation = (player, time) => { player.rotation.y = time; }; -RotatingAnimation.naturalSpeed = 1; - export { CompositeAnimation, invokeAnimation, diff --git a/types/animation.d.ts b/types/animation.d.ts index 31f2f3e..9b89563 100644 --- a/types/animation.d.ts +++ b/types/animation.d.ts @@ -1,10 +1,9 @@ import { PlayerObject } from "./model"; export interface IAnimation { - naturalSpeed?: number; play(player: PlayerObject, time: number): void; } -export type AnimationFn = ((player: PlayerObject, time: number) => void) & { naturalSpeed?: number }; +export type AnimationFn = (player: PlayerObject, time: number) => void; export type Animation = AnimationFn | IAnimation; export function invokeAnimation(