diff --git a/README.md b/README.md index 027ddb3..d8fad98 100644 --- a/README.md +++ b/README.md @@ -58,7 +58,7 @@ Three.js powered Minecraft skin viewer. // Pause single animation run.paused = true; // Pause all animations! - skinViewer.animationPaused = true; + skinViewer.animationSpeed = 0; ``` diff --git a/examples/index.html b/examples/index.html index f8e0e7a..c8dbe0b 100644 --- a/examples/index.html +++ b/examples/index.html @@ -36,10 +36,8 @@ // skinViewer.playerObject.skin.slim = true; let control = new skinview3d.createOrbitControls(skinViewer); - skinViewer.animation = new skinview3d.CompositeAnimation(); - - let walk = skinViewer.animation.add(skinview3d.WalkingAnimation); - walk.speed = 1.5; + skinViewer.animation = skinview3d.WalkingAnimation; + skinViewer.animationSpeed = 1.5; diff --git a/src/viewer.ts b/src/viewer.ts index e7e8ed7..d8e02ab 100644 --- a/src/viewer.ts +++ b/src/viewer.ts @@ -18,7 +18,7 @@ export class SkinViewer { public readonly domElement: Node; public animation: Animation | null; public detectModel: boolean = true; - public animationPaused: boolean = false; + public animationSpeed: number = 1; public animationTime: number = 0; public disposed: boolean = false; @@ -40,6 +40,8 @@ export class SkinViewer { public readonly playerObject: PlayerObject; + private readonly clock: THREE.Clock; + constructor(options: SkinViewerOptions) { this.domElement = options.domElement; this.animation = options.animation || null; @@ -114,14 +116,13 @@ export class SkinViewer { if (options.width) this.width = options.width; if (options.height) this.height = options.height; + this.clock = new THREE.Clock(true); const draw = () => { 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.animationTime += this.clock.getDelta() * this.animationSpeed; + if (this.animation) { + invokeAnimation(this.animation, this.playerObject, this.animationTime); } this.renderer.render(this.scene, this.camera); };