Replace animationPaused with animationSpeed

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;
 </script>
 ```
 

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;
 
 	</script>
 

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);
 		};