Added THREE.Timer.

examples/js/misc/Timer.js

@@ -0,0 +1,151 @@
+/**
+ * @author Mugen87 / https://github.com/Mugen87
+ */
+
+THREE.Timer = ( function () {
+
+	function Timer() {
+
+		this._previousTime = 0;
+		this._currentTime = 0;
+
+		this._deltaTime = 0;
+		this._elapsedTime = 0;
+
+		this._timeScale = 1;
+
+		this._useFixedDeltaTime = false;
+		this._fixedDeltaTime = 16.67; // ms, corresponds to approx. 60 FPS
+
+		// use Page Visibility API to avoid large time delta values
+
+		this._usePageVisibilityAPI = ( typeof document !== 'undefined' && document.hidden !== undefined );
+
+		if ( this._usePageVisibilityAPI === true ) {
+
+			this._pageVisibilityHandler = handleVisibilityChange.bind( this );
+
+			document.addEventListener( 'visibilitychange', this._pageVisibilityHandler, false );
+
+		}
+
+ 	}
+
+	Object.assign( Timer.prototype, {
+
+		disableFixedDeltaTime: function () {
+
+			this._useFixedDeltaTime = false;
+
+			return this;
+
+		},
+
+		dispose: function () {
+
+			if ( this._usePageVisibilityAPI === true ) {
+
+				document.removeEventListener( 'visibilitychange', this._pageVisibilityHandler );
+
+			}
+
+			return this;
+
+		},
+
+		enableFixedDeltaTime: function () {
+
+			this._useFixedDeltaTime = true;
+
+			return this;
+
+		},
+
+		getDeltaTime: function () {
+
+			return this._deltaTime / 1000;
+
+		},
+
+		getElapsedTime: function () {
+
+			return this._elapsedTime / 1000;
+
+		},
+
+		getFixedDeltaTime: function () {
+
+			return this._fixedDeltaTime / 1000;
+
+		},
+
+		getTimeScale: function () {
+
+			return this._timeScale;
+
+		},
+
+		reset: function () {
+
+			this._currentTime = this.now();
+
+			return this;
+
+		},
+
+		setFixedDeltaTime: function ( fixedDeltaTime ) {
+
+			this._fixedDeltaTime = fixedDeltaTime * 1000;
+
+			return this;
+
+		},
+
+		setTimeScale: function ( timeScale ) {
+
+			this._timeScale = timeScale;
+
+			return this;
+
+		},
+
+		now: function () {
+
+			return ( typeof performance === 'undefined' ? Date : performance ).now();
+
+		},
+
+		update: function () {
+
+			if ( this._useFixedDeltaTime === true ) {
+
+				this._deltaTime = this._fixedDeltaTime;
+
+			} else {
+
+				this._previousTime = this._currentTime;
+				this._currentTime = this.now();
+
+				this._deltaTime = this._currentTime - this._previousTime;
+
+			}
+
+			this._deltaTime *= this._timeScale;
+
+			this._elapsedTime += this._deltaTime; // _elapsedTime is the accumulation of all previous deltas
+
+			return this;
+
+		}
+
+	} );
+
+	function handleVisibilityChange() {
+
+		if ( document.hidden === false ) this.reset();
+
+	}
+
+	return Timer;
+
+} )();

examples/jsm/misc/Timer.js

@@ -0,0 +1,155 @@
+/**
+ * @author Mugen87 / https://github.com/Mugen87
+ */
+
+
+
+var Timer = ( function () {
+
+	function Timer() {
+
+		this._previousTime = 0;
+		this._currentTime = 0;
+
+		this._deltaTime = 0;
+		this._elapsedTime = 0;
+
+		this._timeScale = 1;
+
+		this._useFixedDeltaTime = false;
+		this._fixedDeltaTime = 16.67; // ms, corresponds to approx. 60 FPS
+
+		// use Page Visibility API to avoid large time delta values
+
+		this._usePageVisibilityAPI = ( typeof document !== 'undefined' && document.hidden !== undefined );
+
+		if ( this._usePageVisibilityAPI === true ) {
+
+			this._pageVisibilityHandler = handleVisibilityChange.bind( this );
+
+			document.addEventListener( 'visibilitychange', this._pageVisibilityHandler, false );
+
+		}
+
+ 	}
+
+	Object.assign( Timer.prototype, {
+
+		disableFixedDeltaTime: function () {
+
+			this._useFixedDeltaTime = false;
+
+			return this;
+
+		},
+
+		dispose: function () {
+
+			if ( this._usePageVisibilityAPI === true ) {
+
+				document.removeEventListener( 'visibilitychange', this._pageVisibilityHandler );
+
+			}
+
+			return this;
+
+		},
+
+		enableFixedDeltaTime: function () {
+
+			this._useFixedDeltaTime = true;
+
+			return this;
+
+		},
+
+		getDeltaTime: function () {
+
+			return this._deltaTime / 1000;
+
+		},
+
+		getElapsedTime: function () {
+
+			return this._elapsedTime / 1000;
+
+		},
+
+		getFixedDeltaTime: function () {
+
+			return this._fixedDeltaTime / 1000;
+
+		},
+
+		getTimeScale: function () {
+
+			return this._timeScale;
+
+		},
+
+		reset: function () {
+
+			this._currentTime = this.now();
+
+			return this;
+
+		},
+
+		setFixedDeltaTime: function ( fixedDeltaTime ) {
+
+			this._fixedDeltaTime = fixedDeltaTime * 1000;
+
+			return this;
+
+		},
+
+		setTimeScale: function ( timeScale ) {
+
+			this._timeScale = timeScale;
+
+			return this;
+
+		},
+
+		now: function () {
+
+			return ( typeof performance === 'undefined' ? Date : performance ).now();
+
+		},
+
+		update: function () {
+
+			if ( this._useFixedDeltaTime === true ) {
+
+				this._deltaTime = this._fixedDeltaTime;
+
+			} else {
+
+				this._previousTime = this._currentTime;
+				this._currentTime = this.now();
+
+				this._deltaTime = this._currentTime - this._previousTime;
+
+			}
+
+			this._deltaTime *= this._timeScale;
+
+			this._elapsedTime += this._deltaTime; // _elapsedTime is the accumulation of all previous deltas
+
+			return this;
+
+		}
+
+	} );
+
+	function handleVisibilityChange() {
+
+		if ( document.hidden === false ) this.reset();
+
+	}
+
+	return Timer;
+
+} )();
+
+export { Timer };

examples/webgl_morphtargets_sphere.html

@@ -19,10 +19,11 @@
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
+			import { Timer } from './jsm/misc/Timer.js';
 
 			var container;
 
-			var camera, scene, renderer, clock;
+			var camera, scene, renderer, timer;
 
 			var mesh;
 
@@ -41,7 +42,7 @@
 
 				scene = new THREE.Scene();
 
-				clock = new THREE.Clock();
+				timer = new Timer();
 
 				var light = new THREE.PointLight( 0xff2200, 0.7 );
 				light.position.set( 100, 100, 100 );
@@ -109,8 +110,6 @@
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
-				document.addEventListener( 'visibilitychange', onVisibilityChange );
-
 			}
 
 			function onWindowResize() {
@@ -122,30 +121,17 @@
 
 			}
 
-			function onVisibilityChange() {
-
-				if ( document.hidden === true ) {
-
-					clock.stop();
-
-				} else {
-
-					clock.start();
-
-				}
-
-			}
-
 			function animate() {
 
 				requestAnimationFrame( animate );
+				timer.update();
 				render();
 
 			}
 
 			function render() {
 
-				var delta = clock.getDelta();
+				var delta = timer.getDeltaTime();
 
 				if ( mesh !== undefined ) {
 

utils/modularize.js

@@ -124,6 +124,7 @@ var files = [
 	{ path: 'misc/MorphBlendMesh.js', dependencies: [], ignoreList: [] },
 	{ path: 'misc/Ocean.js', dependencies: [ { name: 'OceanShaders', path: 'shaders/OceanShaders.js' } ], ignoreList: [] },
 	{ path: 'misc/RollerCoaster.js', dependencies: [], ignoreList: [] },
+	{ path: 'misc/Timer.js', dependencies: [], ignoreList: [] },
 	{ path: 'misc/Volume.js', dependencies: [ { name: 'VolumeSlice', path: 'misc/VolumeSlice.js' } ], ignoreList: [] },
 	{ path: 'misc/VolumeSlice.js', dependencies: [], ignoreList: [] },