First attempt at Clock object.

Got tired of redoing deltas all the time. Not sure about API or implementation details, but so far seems to be useful.

In future, we could for example have clocks that are slower / faster than realtime, or fixed step based.

build/Three.js

@@ -1,5 +1,6 @@
 // Three.js r46dev - http://github.com/mrdoob/three.js
-var THREE=THREE||{};if(!self.Int32Array)self.Int32Array=Array,self.Float32Array=Array;THREE.Color=function(b){b!==void 0&&this.setHex(b);return this};
+var THREE=THREE||{};if(!self.Int32Array)self.Int32Array=Array,self.Float32Array=Array;THREE.Clock=function(b){this.autoStart=b!==void 0?b:!0;this.elapsedTime=this.oldTime=this.startTime=0;this.running=!1};THREE.Clock.prototype.start=function(){this.oldTime=this.startTime=Date.now();this.running=!0};THREE.Clock.prototype.stop=function(){this.elapsed();this.running=!1};THREE.Clock.prototype.elapsed=function(){this.elapsedTime+=this.delta();return this.elapsedTime};
+THREE.Clock.prototype.delta=function(){var b=0;this.autoStart&&!this.running&&this.start();if(this.running){var c=Date.now(),b=c-this.oldTime;this.oldTime=c;this.elapsedTime+=b}return b};THREE.Color=function(b){b!==void 0&&this.setHex(b);return this};
 THREE.Color.prototype={constructor:THREE.Color,r:1,g:1,b:1,copy:function(b){this.r=b.r;this.g=b.g;this.b=b.b;return this},copyGammaToLinear:function(b){this.r=b.r*b.r;this.g=b.g*b.g;this.b=b.b*b.b;return this},copyLinearToGamma:function(b){this.r=Math.sqrt(b.r);this.g=Math.sqrt(b.g);this.b=Math.sqrt(b.b);return this},setRGB:function(b,c,e){this.r=b;this.g=c;this.b=e;return this},setHSV:function(b,c,e){var f,h,k;if(e==0)this.r=this.g=this.b=0;else switch(f=Math.floor(b*6),h=b*6-f,b=e*(1-c),k=e*(1-
 c*h),c=e*(1-c*(1-h)),f){case 1:this.r=k;this.g=e;this.b=b;break;case 2:this.r=b;this.g=e;this.b=c;break;case 3:this.r=b;this.g=k;this.b=e;break;case 4:this.r=c;this.g=b;this.b=e;break;case 5:this.r=e;this.g=b;this.b=k;break;case 6:case 0:this.r=e,this.g=c,this.b=b}return this},setHex:function(b){b=Math.floor(b);this.r=(b>>16&255)/255;this.g=(b>>8&255)/255;this.b=(b&255)/255;return this},getHex:function(){return~~(this.r*255)<<16^~~(this.g*255)<<8^~~(this.b*255)},getContextStyle:function(){return"rgb("+
 Math.floor(this.r*255)+","+Math.floor(this.g*255)+","+Math.floor(this.b*255)+")"},clone:function(){return(new THREE.Color).setRGB(this.r,this.g,this.b)}};THREE.Vector2=function(b,c){this.x=b||0;this.y=c||0};

examples/misc_sound.html

@@ -60,6 +60,8 @@
 
 			var sound1, sound2;
 
+			var clock = new THREE.Clock();
+
 			var Sound = function ( sources, radius, volume ) {
 
 				var audio = document.createElement( 'audio' );
@@ -190,7 +192,7 @@
 
 			function render() {
 
-				var time = new Date().getTime() * 0.005;
+				var time = clock.elapsed() * 0.005;
 
 				controls.update();
 

examples/webgl_animation_skinning.html

@@ -71,6 +71,8 @@
 
 			var floor, dz = 0, dstep = -10, playback = false;
 
+			var clock = new THREE.Clock();
+
 			function init() {
 
 				container = document.getElementById( 'container' );
@@ -198,28 +200,26 @@
 
 			}
 
-			var oldTime = new Date().getTime();
-
 			function loop() {
 
 				requestAnimationFrame( loop, renderer.domElement );
 
-				var time = new Date().getTime();
+				var delta = clock.delta();
 
-				THREE.AnimationHandler.update( 0.001 * ( time - oldTime ) );
-
-				oldTime = time;
+				THREE.AnimationHandler.update( 0.001 * delta );
 
 				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 				camera.lookAt( scene.position );
 
 				if ( buffalos && playback ) {
 
-					camera.position.z += 2 * Math.sin( new Date().getTime() * 0.001 );
+					var elapsed = clock.elapsed() * 0.001;
+
+					camera.position.z += 2 * Math.sin( elapsed );
 
 					for( i = 0; i < buffalos.length; i++ ) {
 
-						buffalos[ i ].position.z += 2 * Math.sin( new Date().getTime() * 0.001  + offset[ i ] );
+						buffalos[ i ].position.z += 2 * Math.sin( elapsed + offset[ i ] );
 
 					}
 

examples/webgl_materials_cars.html

@@ -153,6 +153,8 @@
 			var loader = new THREE.BinaryLoader( true );
 			document.body.appendChild( loader.statusDomElement );
 
+			var clock = new THREE.Clock();
+
 			init();
 			animate();
 
@@ -601,7 +603,7 @@
 
 			function render() {
 
-				var timer = - Date.now() * 0.0002;
+				var timer = -0.0002 * clock.elapsed();
 
 				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 

examples/webgl_materials_cubemap_dynamic.html

@@ -93,7 +93,7 @@
 
 			var cubeCamera;
 
-			var oldTime = Date.now();
+			var clock = new THREE.Clock();
 
 			var controlsGallardo = {
 
@@ -875,9 +875,7 @@
 
 			function render() {
 
-				var newTime = Date.now();
-				var delta = 0.001 * ( newTime - oldTime );
-				oldTime = newTime;
+				var delta = 0.001 * clock.delta();
 
 				// day / night
 

examples/webgl_shader_lava.html

@@ -121,7 +121,7 @@
 
 			var container, stats;
 
-			var start_time;
+			var clock = new THREE.Clock();
 
 			var camera, scene, renderer, composer;
 
@@ -145,8 +145,6 @@
 
 				scene = new THREE.Scene();
 
-				start_time = Date.now();
-
 				uniforms = {
 
 					fogDensity: { type: "f", value: 0.45 },
@@ -240,10 +238,12 @@
 
 			function render() {
 
-				uniforms.time.value += 0.02;
+				var delta = 0.05 * clock.delta();
+
+				uniforms.time.value += 0.02 * delta;
 
-				mesh.rotation.y += 0.00125;
-				mesh.rotation.x += 0.005;
+				mesh.rotation.y += 0.00125 * delta;
+				mesh.rotation.x += 0.005 * delta;
 
 				renderer.clear();
 				composer.render( 0.01 );

examples/webgl_shading_physical.html

@@ -42,6 +42,7 @@
 
 		<script type="text/javascript" src="../src/Three.js"></script>
 		<script type="text/javascript" src="../src/core/Color.js"></script>
+		<script type="text/javascript" src="../src/core/Clock.js"></script>
 		<script type="text/javascript" src="../src/core/Vector2.js"></script>
 		<script type="text/javascript" src="../src/core/Vector3.js"></script>
 		<script type="text/javascript" src="../src/core/Vector4.js"></script>
@@ -198,7 +199,7 @@
 
 			var parameters, tweenDirection, tweenDay, tweenNight;
 
-			var oldTime;
+			var clock = new THREE.Clock();
 
 			init();
 			animate();
@@ -592,11 +593,7 @@
 
 			function render() {
 
-				if ( oldTime === undefined ) oldTime = Date.now();
-
-				var newTime = Date.now();
-				var delta = newTime - oldTime;
-				oldTime = newTime;
+				var delta = clock.delta();
 
 				TWEEN.update();
 				controls.update();

examples/webgl_shadowmap.html

@@ -64,7 +64,7 @@
 
 			var light;
 
-			var delta, newTime, oldTime;
+			var clock = new THREE.Clock();
 
 			init();
 			animate();
@@ -364,11 +364,7 @@
 
 			function render() {
 
-				if ( oldTime === undefined ) oldTime = Date.now();
-
-				newTime = Date.now();
-				delta = newTime - oldTime;
-				oldTime = newTime;
+				var delta = clock.delta();
 
 				for ( var i = 0; i < morphs.length; i ++ ) {
 

src/core/Clock.js

@@ -0,0 +1,65 @@
+/**
+ * @author alteredq / http://alteredqualia.com/
+ */
+
+THREE.Clock = function ( autoStart ) {
+
+	this.autoStart = ( autoStart !== undefined ) ? autoStart : true;
+
+	this.startTime = 0;
+	this.oldTime = 0;
+	this.elapsedTime = 0;
+
+	this.running = false;
+
+};
+
+THREE.Clock.prototype.start = function () {
+
+	this.startTime = Date.now();
+	this.oldTime = this.startTime;
+
+	this.running = true;
+
+};
+
+THREE.Clock.prototype.stop = function () {
+
+	this.elapsed();
+
+	this.running = false;
+
+};
+
+THREE.Clock.prototype.elapsed = function () {
+
+	this.elapsedTime += this.delta();
+
+	return this.elapsedTime;
+
+};
+
+
+THREE.Clock.prototype.delta = function () {
+
+	var diff = 0;
+
+	if ( this.autoStart && ! this.running ) {
+
+		this.start();
+
+	}
+
+	if ( this.running ) {
+
+		var newTime = Date.now();
+		diff = newTime - this.oldTime;
+		this.oldTime = newTime;
+
+		this.elapsedTime += diff;
+
+	}
+
+	return diff;
+
+};

utils/build.py

@@ -13,6 +13,7 @@ import sys
 
 COMMON_FILES = [
 'Three.js',
+'core/Clock.js',
 'core/Color.js',
 'core/Vector2.js',
 'core/Vector3.js',