Examples: Replace `Clock` with `Timer`. (#32782)

examples/css2d_label.html

@@ -65,7 +65,8 @@
 
 			};
 
-			const clock = new THREE.Clock();
+			const timer = new THREE.Timer();
+			timer.connect( document );
 			const textureLoader = new THREE.TextureLoader();
 
 			let moon;
@@ -206,9 +207,11 @@
 
 			function animate() {
 
+				timer.update();
+
 				requestAnimationFrame( animate );
 
-				const elapsed = clock.getElapsedTime();
+				const elapsed = timer.getElapsed();
 
 				moon.position.set( Math.sin( elapsed ) * 5, 0, Math.cos( elapsed ) * 5 );
 

examples/games_fps.html

@@ -38,7 +38,8 @@
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			const clock = new THREE.Clock();
+			const timer = new THREE.Timer();
+			timer.connect( document );
 
 			const scene = new THREE.Scene();
 			scene.background = new THREE.Color( 0x88ccee );
@@ -467,7 +468,9 @@
 
 			function animate() {
 
-				const deltaTime = Math.min( 0.05, clock.getDelta() ) / STEPS_PER_FRAME;
+				timer.update();
+
+				const deltaTime = Math.min( 0.05, timer.getDelta() ) / STEPS_PER_FRAME;
 
 				// we look for collisions in substeps to mitigate the risk of
 				// an object traversing another too quickly for detection.

examples/misc_animation_groups.html

@@ -27,7 +27,7 @@
 
 			import Stats from 'three/addons/libs/stats.module.js';
 
-			let stats, clock;
+			let stats, timer;
 			let scene, camera, renderer, mixer;
 
 			init();
@@ -106,7 +106,8 @@
 
 				//
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				//
 
@@ -125,7 +126,9 @@
 
 			function animate() {
 
-				const delta = clock.getDelta();
+				timer.update();
+
+				const delta = timer.getDelta();
 
 				if ( mixer ) {
 

examples/misc_animation_keys.html

@@ -27,7 +27,7 @@
 
 			import Stats from 'three/addons/libs/stats.module.js';
 
-			let stats, clock;
+			let stats, timer;
 			let scene, camera, renderer, mixer;
 
 			init();
@@ -106,7 +106,8 @@
 
 				//
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				//
 
@@ -125,7 +126,9 @@
 
 			function animate() {
 
-				const delta = clock.getDelta();
+				timer.update();
+
+				const delta = timer.getDelta();
 
 				if ( mixer ) {
 

examples/misc_controls_fly.html

@@ -69,7 +69,8 @@
 			let d, dPlanet, dMoon;
 			const dMoonVec = new THREE.Vector3();
 
-			const clock = new THREE.Clock();
+			const timer = new THREE.Timer();
+			timer.connect( document );
 
 			init();
 
@@ -241,6 +242,8 @@
 
 			function animate() {
 
+				timer.update();
+
 				render();
 				stats.update();
 
@@ -250,7 +253,7 @@
 
 				// rotate the planet and clouds
 
-				const delta = clock.getDelta();
+				const delta = timer.getDelta();
 
 				meshPlanet.rotation.y += rotationSpeed * delta;
 				meshClouds.rotation.y += 1.25 * rotationSpeed * delta;

examples/physics_ammo_break.html

@@ -41,7 +41,8 @@
 		let container, stats;
 		let camera, controls, scene, renderer;
 		let textureLoader;
-		const clock = new THREE.Clock();
+		const timer = new THREE.Timer();
+		timer.connect( document );
 
 		const mouseCoords = new THREE.Vector2();
 		const raycaster = new THREE.Raycaster();
@@ -432,6 +433,8 @@
 
 		function animate() {
 
+			timer.update();
+
 			render();
 			stats.update();
 
@@ -439,7 +442,7 @@
 
 		function render() {
 
-			const deltaTime = clock.getDelta();
+			const deltaTime = timer.getDelta();
 
 			updatePhysics( deltaTime );
 

examples/physics_ammo_cloth.html

@@ -37,7 +37,8 @@
 			let container, stats;
 			let camera, controls, scene, renderer;
 			let textureLoader;
-			const clock = new THREE.Clock();
+			const timer = new THREE.Timer();
+			timer.connect( document );
 
 			// Physics variables
 			const gravityConstant = - 9.8;
@@ -396,6 +397,8 @@
 
 			function animate() {
 
+				timer.update();
+
 				render();
 				stats.update();
 
@@ -403,7 +406,7 @@
 
 			function render() {
 
-				const deltaTime = clock.getDelta();
+				const deltaTime = timer.getDelta();
 
 				updatePhysics( deltaTime );
 

examples/physics_ammo_rope.html

@@ -36,7 +36,8 @@
 		let container, stats;
 		let camera, controls, scene, renderer;
 		let textureLoader;
-		const clock = new THREE.Clock();
+		const timer = new THREE.Timer();
+		timer.connect( document );
 
 		// Physics variables
 		const gravityConstant = - 9.8;
@@ -419,6 +420,8 @@
 
 		function animate() {
 
+			timer.update();
+
 			render();
 			stats.update();
 
@@ -426,7 +429,7 @@
 
 		function render() {
 
-			const deltaTime = clock.getDelta();
+			const deltaTime = timer.getDelta();
 
 			updatePhysics( deltaTime );
 

examples/physics_ammo_terrain.html

@@ -48,7 +48,8 @@
 			let container, stats;
 			let camera, scene, renderer;
 			let terrainMesh;
-			const clock = new THREE.Clock();
+			const timer = new THREE.Timer();
+			timer.connect( document );
 
 			// Physics variables
 			let collisionConfiguration;
@@ -391,6 +392,8 @@
 
 			function animate() {
 
+				timer.update();
+
 				render();
 				stats.update();
 
@@ -398,7 +401,7 @@
 
 			function render() {
 
-				const deltaTime = clock.getDelta();
+				const deltaTime = timer.getDelta();
 
 				if ( dynamicObjects.length < maxNumObjects && time > timeNextSpawn ) {
 

examples/physics_ammo_volume.html

@@ -41,7 +41,8 @@
 			let container, stats;
 			let camera, controls, scene, renderer;
 			let textureLoader;
-			const clock = new THREE.Clock();
+			const timer = new THREE.Timer();
+			timer.connect( document );
 			let clickRequest = false;
 			const mouseCoords = new THREE.Vector2();
 			const raycaster = new THREE.Raycaster();
@@ -414,6 +415,8 @@
 
 			function animate() {
 
+				timer.update();
+
 				render();
 				stats.update();
 
@@ -421,7 +424,7 @@
 
 			function render() {
 
-				const deltaTime = clock.getDelta();
+				const deltaTime = timer.getDelta();
 
 				updatePhysics( deltaTime );
 

examples/physics_rapier_terrain.html

@@ -45,7 +45,8 @@
 			let container, stats;
 			let camera, scene, renderer;
 			let terrainMesh;
-			const clock = new THREE.Clock();
+			const timer = new THREE.Timer();
+			timer.connect( document );
 
 			// Physics variables
 			let physics;
@@ -262,6 +263,8 @@
 
 			function animate() {
 
+				timer.update();
+
 				render();
 				stats.update();
 			
@@ -269,7 +272,7 @@
 
 			function render() {
 
-				const deltaTime = clock.getDelta();
+				const deltaTime = timer.getDelta();
 
 				// Generate new objects with a delay between them
 				if ( dynamicObjects.length < maxNumObjects && time > timeNextSpawn ) {

examples/webaudio_sandbox.html

@@ -53,7 +53,8 @@
 
 			let analyser1, analyser2, analyser3;
 
-			const clock = new THREE.Clock();
+			const timer = new THREE.Timer();
+			timer.connect( document );
 
 			const startButton = document.getElementById( 'startButton' );
 			startButton.addEventListener( 'click', init );
@@ -244,7 +245,9 @@
 
 			function animate() {
 
-				const delta = clock.getDelta();
+				timer.update();
+
+				const delta = timer.getDelta();
 
 				controls.update( delta );
 

examples/webaudio_timing.html

@@ -31,7 +31,7 @@
 
 		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
-		let scene, camera, renderer, clock;
+		let scene, camera, renderer, timer;
 
 		const objects = [];
 
@@ -51,7 +51,8 @@
 
 			scene = new THREE.Scene();
 
-			clock = new THREE.Clock();
+			timer = new THREE.Timer();
+			timer.connect( document );
 
 			//
 
@@ -165,7 +166,9 @@
 
 		function animate() {
 
-			const time = clock.getElapsedTime();
+			timer.update();
+
+			const time = timer.getElapsed();
 
 			for ( let i = 0; i < objects.length; i ++ ) {
 

examples/webgl_animation_keyframes.html

@@ -50,7 +50,8 @@
 
 			let mixer;
 
-			const clock = new THREE.Clock();
+			const timer = new THREE.Timer();
+			timer.connect( document );
 			const container = document.getElementById( 'container' );
 
 			const stats = new Stats();
@@ -122,7 +123,9 @@
 
 			function animate() {
 
-				const delta = clock.getDelta();
+				timer.update();
+
+				const delta = timer.getDelta();
 
 				mixer.update( delta );
 

examples/webgl_animation_multiple.html

@@ -29,7 +29,7 @@
 			import * as SkeletonUtils from 'three/addons/utils/SkeletonUtils.js';
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			let camera, scene, renderer, clock;
+			let camera, scene, renderer, timer;
 			let model, animations;
 
 			const mixers = [], objects = [];
@@ -46,7 +46,8 @@
 				camera.position.set( 2, 3, - 6 );
 				camera.lookAt( 0, 1, 0 );
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xa0a0a0 );
@@ -237,7 +238,9 @@
 
 			function animate() {
 
-				const delta = clock.getDelta();
+				timer.update();
+
+				const delta = timer.getDelta();
 
 				for ( const mixer of mixers ) mixer.update( delta );
 

examples/webgl_animation_skinning_additive_blending.html

@@ -40,7 +40,7 @@
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
 			let scene, renderer, camera, stats;
-			let model, skeleton, mixer, clock;
+			let model, skeleton, mixer, timer;
 
 			const crossFadeControls = [];
 
@@ -64,7 +64,8 @@
 			function init() {
 
 				const container = document.getElementById( 'container' );
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xa0a0a0 );
@@ -392,6 +393,8 @@
 
 			function animate() {
 
+				timer.update();
+
 				// Render loop
 
 				for ( let i = 0; i !== numAnimations; ++ i ) {
@@ -405,7 +408,7 @@
 
 				// Get the time elapsed since the last frame, used for mixer update
 
-				const mixerUpdateDelta = clock.getDelta();
+				const mixerUpdateDelta = timer.getDelta();
 
 				// Update the animation mixer, the stats panel, and render this frame
 

examples/webgl_animation_skinning_blending.html

@@ -38,7 +38,7 @@
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
 			let scene, renderer, camera, stats;
-			let model, skeleton, mixer, clock;
+			let model, skeleton, mixer, timer;
 
 			const crossFadeControls = [];
 
@@ -59,7 +59,8 @@
 				camera.position.set( 1, 2, - 3 );
 				camera.lookAt( 0, 1, 0 );
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xa0a0a0 );
@@ -466,6 +467,8 @@
 
 			function animate() {
 
+				timer.update();
+
 				idleWeight = idleAction.getEffectiveWeight();
 				walkWeight = walkAction.getEffectiveWeight();
 				runWeight = runAction.getEffectiveWeight();
@@ -480,7 +483,7 @@
 
 				// Get the time elapsed since the last frame, used for mixer update (if not in single step mode)
 
-				let mixerUpdateDelta = clock.getDelta();
+				let mixerUpdateDelta = timer.getDelta();
 
 				// If in single step mode, make one step and then do nothing (until the user clicks again)
 

examples/webgl_animation_skinning_morph.html

@@ -52,7 +52,7 @@
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
-			let container, stats, clock, gui, mixer, actions, activeAction, previousAction;
+			let container, stats, timer, gui, mixer, actions, activeAction, previousAction;
 			let camera, scene, renderer, model, face;
 
 			const api = { state: 'Walking' };
@@ -72,7 +72,8 @@
 				scene.background = new THREE.Color( 0xe0e0e0 );
 				scene.fog = new THREE.Fog( 0xe0e0e0, 20, 100 );
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				// lights
 
@@ -252,7 +253,9 @@
 
 			function animate() {
 
-				const dt = clock.getDelta();
+				timer.update();
+
+				const dt = timer.getDelta();
 
 				if ( mixer ) mixer.update( dt );
 

examples/webgl_animation_walk.html

@@ -39,7 +39,7 @@
 			import { HDRLoader } from 'three/addons/loaders/HDRLoader.js';
 
 			let scene, renderer, camera, floor, orbitControls;
-			let group, followGroup, model, skeleton, mixer, clock;
+			let group, followGroup, model, skeleton, mixer, timer;
 
 			let actions;
 
@@ -77,7 +77,8 @@
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 100 );
 				camera.position.set( 0, 2, - 5 );
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0x5e5d5d );
@@ -415,9 +416,11 @@
 
 			function animate() {
 
+				timer.update();
+
 				// Render loop
 
-				const delta = clock.getDelta();
+				const delta = timer.getDelta();
 
 				updateCharacter( delta );
 

examples/webgl_clipculldistance.html

@@ -62,7 +62,7 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import Stats from 'three/addons/libs/stats.module.js';
 
-			let camera, controls, clock, scene, renderer, stats;
+			let camera, controls, timer, scene, renderer, stats;
 
 			let material;
 
@@ -75,7 +75,8 @@
 
 				scene = new THREE.Scene();
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				//
 
@@ -174,10 +175,12 @@
 
 			function animate() {
 
+				timer.update();
+
 				controls.update();
 				stats.update();
 
-				material.uniforms.time.value = clock.getElapsedTime();
+				material.uniforms.time.value = timer.getElapsed();
 
 				renderer.render( scene, camera );
 

examples/webgl_clipping_stencil.html

@@ -27,7 +27,7 @@
 
 			let camera, scene, renderer, object, stats;
 			let planes, planeObjects, planeHelpers;
-			let clock;
+			let timer;
 
 			const params = {
 
@@ -100,7 +100,8 @@
 
 			function init() {
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				scene = new THREE.Scene();
 
@@ -284,7 +285,9 @@
 
 			function animate() {
 
-				const delta = clock.getDelta();
+				timer.update();
+
+				const delta = timer.getDelta();
 
 				if ( params.animate ) {
 

examples/webgl_geometry_minecraft.html

@@ -48,7 +48,8 @@
 			const worldHalfDepth = worldDepth / 2;
 			const data = generateHeight( worldWidth, worldDepth );
 
-			const clock = new THREE.Clock();
+			const timer = new THREE.Timer();
+			timer.connect( document );
 
 			init();
 
@@ -232,6 +233,8 @@
 
 			function animate() {
 
+				timer.update();
+
 				render();
 				stats.update();
 
@@ -239,7 +242,7 @@
 
 			function render() {
 
-				controls.update( clock.getDelta() );
+				controls.update( timer.getDelta() );
 				renderer.render( scene, camera );
 
 			}

examples/webgl_geometry_terrain.html

@@ -43,7 +43,8 @@
 			let mesh, texture;
 
 			const worldWidth = 256, worldDepth = 256;
-			const clock = new THREE.Clock();
+			const timer = new THREE.Timer();
+			timer.connect( document );
 
 			init();
 
@@ -214,6 +215,8 @@
 
 			function animate() {
 
+				timer.update();
+
 				render();
 				stats.update();
 
@@ -222,7 +225,7 @@
 
 			function render() {
 
-				controls.update( clock.getDelta() );
+				controls.update( timer.getDelta() );
 				renderer.render( scene, camera );
 
 			}

examples/webgl_instancing_morph.html

@@ -36,7 +36,8 @@
 
 			}
 
-			const clock = new THREE.Clock( true );
+			const timer = new THREE.Timer();
+			timer.connect( document );
 
 			init();
 
@@ -155,6 +156,8 @@
 
 			function animate() {
 
+				timer.update();
+
 				render();
 
 				stats.update();
@@ -163,7 +166,7 @@
 
 			function render() {
 
-				const time = clock.getElapsedTime();
+				const time = timer.getElapsed();
 
 				const r = 3000;
 				camera.position.set( Math.sin( time / 10 ) * r, 1500 + 1000 * Math.cos( time / 5 ), Math.cos( time / 10 ) * r );

examples/webgl_interactive_raycasting_points.html

@@ -31,7 +31,7 @@
 			let raycaster;
 			let intersection = null;
 			let spheresIndex = 0;
-			let clock;
+			let timer;
 			let toggle = 0;
 
 			const pointer = new THREE.Vector2();
@@ -158,7 +158,8 @@
 
 				scene = new THREE.Scene();
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.set( 10, 10, 10 );
@@ -240,6 +241,8 @@
 
 			function animate() {
 
+				timer.update();
+
 				render();
 				stats.update();
 
@@ -273,7 +276,7 @@
 
 				}
 
-				toggle += clock.getDelta();
+				toggle += timer.getDelta();
 
 				renderer.render( scene, camera );
 

examples/webgl_lensflares.html

@@ -37,7 +37,8 @@
 			let camera, scene, renderer;
 			let controls;
 
-			const clock = new THREE.Clock();
+			const timer = new THREE.Timer();
+			timer.connect( document );
 
 			init();
 
@@ -162,6 +163,8 @@
 
 			function animate() {
 
+				timer.update();
+
 				render();
 				stats.update();
 
@@ -169,7 +172,7 @@
 
 			function render() {
 
-				const delta = clock.getDelta();
+				const delta = timer.getDelta();
 
 				controls.update( delta );
 				renderer.render( scene, camera );

examples/webgl_lights_hemisphere.html

@@ -77,7 +77,8 @@
 			const mixers = [];
 			let stats;
 
-			const clock = new THREE.Clock();
+			const timer = new THREE.Timer();
+			timer.connect( document );
 
 			init();
 
@@ -252,6 +253,8 @@
 
 			function animate() {
 
+				timer.update();
+
 				render();
 				stats.update();
 
@@ -259,7 +262,7 @@
 
 			function render() {
 
-				const delta = clock.getDelta();
+				const delta = timer.getDelta();
 
 				for ( let i = 0; i < mixers.length; i ++ ) {
 

examples/webgl_lines_fat_raycasting.html

@@ -39,7 +39,7 @@
 			let renderer, scene, camera, controls;
 			let sphereInter, sphereOnLine;
 			let gui;
-			let clock;
+			let timer;
 
 			const color = new THREE.Color();
 
@@ -91,7 +91,8 @@
 
 			function init() {
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
@@ -213,7 +214,9 @@
 
 			function animate() {
 
-				const delta = clock.getDelta();
+				timer.update();
+
+				const delta = timer.getDelta();
 
 				const obj = line.visible ? line : segments;
 				thresholdLine.position.copy( line.position );

examples/webgl_loader_bvh.html

@@ -37,7 +37,8 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { BVHLoader } from 'three/addons/loaders/BVHLoader.js';
 
-			const clock = new THREE.Clock();
+			const timer = new THREE.Timer();
+			timer.connect( document );
 
 			let camera, controls, scene, renderer;
 			let mixer;
@@ -94,7 +95,9 @@
 
 			function animate() {
 
-				const delta = clock.getDelta();
+				timer.update();
+
+				const delta = timer.getDelta();
 
 				if ( mixer ) mixer.update( delta );
 

examples/webgl_loader_collada.html

@@ -31,7 +31,7 @@
 
 			import { ColladaLoader } from 'three/addons/loaders/ColladaLoader.js';
 
-			let container, stats, clock;
+			let container, stats, timer;
 			let camera, scene, renderer, elf;
 
 			init();
@@ -46,7 +46,8 @@
 
 				scene = new THREE.Scene();
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				// loading manager
 
@@ -104,6 +105,8 @@
 
 			function animate() {
 
+				timer.update();
+
 				render();
 				stats.update();
 
@@ -111,7 +114,7 @@
 
 			function render() {
 
-				const delta = clock.getDelta();
+				const delta = timer.getDelta();
 
 				if ( elf !== undefined ) {
 

examples/webgl_loader_collada_skinning.html

@@ -32,7 +32,7 @@
 			import { ColladaLoader } from 'three/addons/loaders/ColladaLoader.js';
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
-			let container, stats, clock, controls;
+			let container, stats, timer, controls;
 			let camera, scene, renderer, mixer;
 
 			init();
@@ -46,7 +46,8 @@
 
 				scene = new THREE.Scene();
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				// collada
 
@@ -116,6 +117,8 @@
 
 			function animate() {
 
+				timer.update();
+
 				render();
 				stats.update();
 
@@ -123,7 +126,7 @@
 
 			function render() {
 
-				const delta = clock.getDelta();
+				const delta = timer.getDelta();
 
 				if ( mixer !== undefined ) {
 

examples/webgl_loader_fbx.html

@@ -37,7 +37,8 @@
 			let camera, scene, renderer, stats, object, loader, guiMorphsFolder;
 			let mixer;
 
-			const clock = new THREE.Clock();
+			const timer = new THREE.Timer();
+			timer.connect( document );
 
 			const params = {
 				asset: 'Samba Dancing'
@@ -219,7 +220,9 @@
 
 			function animate() {
 
-				const delta = clock.getDelta();
+				timer.update();
+
+				const delta = timer.getDelta();
 
 				if ( mixer ) mixer.update( delta );
 

examples/webgl_loader_gltf_animation_pointer.html

@@ -52,7 +52,8 @@
 
 			let mixer;
 
-			const clock = new THREE.Clock();
+			const timer = new THREE.Timer();
+			timer.connect( document );
 			const container = document.getElementById( 'container' );
 
 			const stats = new Stats();
@@ -125,7 +126,9 @@
 
 			function animate() {
 
-				const delta = clock.getDelta();
+				timer.update();
+
+				const delta = timer.getDelta();
 
 				mixer.update( delta );
 

examples/webgl_loader_gltf_progressive_lod.html

@@ -192,12 +192,15 @@
 
 			//
 
-			const clock = new THREE.Clock();
+			const timer = new THREE.Timer();
+			timer.connect( document );
 			let time = 0;
 
 			function animate() {
 
-				const dt = clock.getDelta();
+				timer.update();
+
+				const dt = timer.getDelta();
 				time += dt;
 
 				mixer.update( dt );

examples/webgl_loader_gltf_transmission.html

@@ -33,13 +33,14 @@
 
 			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
 
-			let camera, scene, renderer, controls, clock, mixer;
+			let camera, scene, renderer, controls, timer, mixer;
 
 			init();
 
 			function init() {
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
@@ -110,7 +111,9 @@
 
 			function animate() {
 
-				if ( mixer ) mixer.update( clock.getDelta() );
+				timer.update();
+
+				if ( mixer ) mixer.update( timer.getDelta() );
 
 				controls.update();
 

examples/webgl_loader_md2.html

@@ -50,7 +50,8 @@
 
 			let controls;
 
-			const clock = new THREE.Clock();
+			const timer = new THREE.Timer();
+			timer.connect( document );
 
 			let stats;
 
@@ -324,6 +325,8 @@
 
 			function animate() {
 
+				timer.update();
+
 				render();
 
 				stats.update();
@@ -332,7 +335,7 @@
 
 			function render() {
 
-				const delta = clock.getDelta();
+				const delta = timer.getDelta();
 
 				character.update( delta );
 

examples/webgl_loader_md2_control.html

@@ -61,7 +61,8 @@
 
 			};
 
-			const clock = new THREE.Clock();
+			const timer = new THREE.Timer();
+			timer.connect( document );
 
 			init();
 
@@ -306,6 +307,8 @@
 
 			function animate() {
 
+				timer.update();
+
 				render();
 
 				stats.update();
@@ -314,7 +317,7 @@
 
 			function render() {
 
-				const delta = clock.getDelta();
+				const delta = timer.getDelta();
 
 				for ( let i = 0; i < nCharacters; i ++ ) {
 

examples/webgl_loader_mdd.html

@@ -27,7 +27,7 @@
 
 			import { MDDLoader } from 'three/addons/loaders/MDDLoader.js';
 
-			let camera, scene, renderer, mixer, clock;
+			let camera, scene, renderer, mixer, timer;
 
 			init();
 
@@ -39,7 +39,8 @@
 				camera.position.set( 8, 8, 8 );
 				camera.lookAt( scene.position );
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				//
 
@@ -86,7 +87,9 @@
 
 			function animate() {
 
-				const delta = clock.getDelta();
+				timer.update();
+
+				const delta = timer.getDelta();
 
 				if ( mixer ) mixer.update( delta );
 

examples/webgl_loader_xyz.html

@@ -28,7 +28,7 @@
 
 			import { XYZLoader } from 'three/addons/loaders/XYZLoader.js';
 
-			let camera, scene, renderer, clock;
+			let camera, scene, renderer, timer;
 
 			let points;
 
@@ -43,7 +43,8 @@
 				scene.add( camera );
 				camera.lookAt( scene.position );
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				const loader = new XYZLoader();
 				loader.load( 'models/xyz/helix_201.xyz', function ( geometry ) {
@@ -84,7 +85,9 @@
 
 			function animate() {
 
-				const delta = clock.getDelta();
+				timer.update();
+
+				const delta = timer.getDelta();
 
 				if ( points ) {
 

examples/webgl_lod.html

@@ -31,7 +31,8 @@
 
 			let camera, scene, renderer, controls;
 
-			const clock = new THREE.Clock();
+			const timer = new THREE.Timer();
+			timer.connect( document );
 
 			init();
 
@@ -119,7 +120,9 @@
 
 			function animate() {
 
-				controls.update( clock.getDelta() );
+				timer.update();
+
+				controls.update( timer.getDelta() );
 
 				renderer.render( scene, camera );
 

examples/webgl_marchingcubes.html

@@ -49,7 +49,8 @@
 
 		let time = 0;
 
-		const clock = new THREE.Clock();
+		const timer = new THREE.Timer();
+		timer.connect( document );
 
 		init();
 
@@ -321,6 +322,8 @@
 
 		function animate() {
 
+			timer.update();
+
 			render();
 			stats.update();
 
@@ -328,7 +331,7 @@
 
 		function render() {
 
-			const delta = clock.getDelta();
+			const delta = timer.getDelta();
 
 			time += delta * effectController.speed * 0.5;
 

examples/webgl_materials_texture_partialupdate.html

@@ -26,7 +26,7 @@
 
 			import * as THREE from 'three';
 
-			let camera, scene, renderer, clock, dataTexture, diffuseMap;
+			let camera, scene, renderer, timer, dataTexture, diffuseMap;
 
 			let last = 0;
 			const position = new THREE.Vector2();
@@ -41,7 +41,8 @@
 
 				scene = new THREE.Scene();
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				const loader = new THREE.TextureLoader();
 				diffuseMap = await loader.loadAsync( 'textures/floors/FloorsCheckerboard_S_Diffuse.jpg' );
@@ -88,7 +89,9 @@
 
 			function animate() {
 
-				const elapsedTime = clock.getElapsedTime();
+				timer.update();
+
+				const elapsedTime = timer.getElapsed();
 
 				if ( elapsedTime - last > 0.1 ) {
 

examples/webgl_math_obb.html

@@ -39,7 +39,7 @@
 
 			import Stats from 'three/addons/libs/stats.module.js';
 
-			let camera, scene, renderer, clock, controls, stats, raycaster, hitbox;
+			let camera, scene, renderer, timer, controls, stats, raycaster, hitbox;
 
 			const objects = [], mouse = new THREE.Vector2();
 
@@ -53,7 +53,8 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xffffff );
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				raycaster = new THREE.Raycaster();
 
@@ -192,11 +193,13 @@
 
 			function animate() {
 
+				timer.update();
+
 				controls.update();
 
 				// transform cubes
 
-				const delta = clock.getDelta();
+				const delta = timer.getDelta();
 
 				for ( let i = 0, il = objects.length; i < il; i ++ ) {
 

examples/webgl_math_orientation_transform.html

@@ -33,7 +33,8 @@
 			const spherical = new THREE.Spherical();
 			const rotationMatrix = new THREE.Matrix4();
 			const targetQuaternion = new THREE.Quaternion();
-			const clock = new THREE.Clock();
+			const timer = new THREE.Timer();
+			timer.connect( document );
 			const speed = Math.PI / 2;
 
 			const params = {
@@ -106,7 +107,9 @@
 
 			function animate() {
 
-				const delta = clock.getDelta();
+				timer.update();
+
+				const delta = timer.getDelta();
 
 				if ( mesh.quaternion.equals( targetQuaternion ) === false ) {
 

examples/webgl_morphtargets_face.html

@@ -43,13 +43,14 @@
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			let camera, scene, renderer, stats, mixer, clock, controls;
+			let camera, scene, renderer, stats, mixer, timer, controls;
 
 			init();
 
 			function init() {
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
@@ -135,7 +136,9 @@
 
 			function animate() {
 
-				const delta = clock.getDelta();
+				timer.update();
+
+				const delta = timer.getDelta();
 
 				if ( mixer ) {
 

examples/webgl_multiple_elements_text.html

@@ -67,7 +67,8 @@
 
 			const scenes = [];
 
-			const clock = new THREE.Clock();
+			const timer = new THREE.Timer();
+			timer.connect( document );
 
 			let views, t, canvas, renderer;
 
@@ -185,6 +186,8 @@
 
 			function animate() {
 
+				timer.update();
+
 				updateSize();
 
 				renderer.setClearColor( 0xffffff );
@@ -239,7 +242,7 @@
 
 				} );
 
-				t += clock.getDelta() * 60;
+				t += timer.getDelta() * 60;
 
 			}
 

examples/webgl_points_dynamic.html

@@ -47,7 +47,8 @@
 
 			let composer, effectFocus;
 
-			const clock = new THREE.Clock();
+			const timer = new THREE.Timer();
+			timer.connect( document );
 
 			let stats;
 
@@ -237,6 +238,8 @@
 
 			function animate() {
 
+				timer.update();
+
 				render();
 				stats.update();
 
@@ -244,7 +247,7 @@
 
 			function render() {
 
-				let delta = 10 * clock.getDelta();
+				let delta = 10 * timer.getDelta();
 
 				delta = delta < 2 ? delta : 2;
 

examples/webgl_postprocessing_gtao.html

@@ -43,7 +43,7 @@
 			import { GTAOPass } from 'three/addons/postprocessing/GTAOPass.js';
 			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 
-			let camera, scene, renderer, composer, controls, clock, stats, mixer;
+			let camera, scene, renderer, composer, controls, timer, stats, mixer;
 
 			init();
 
@@ -56,7 +56,8 @@
 				loader.setDRACOLoader( dracoLoader );
 				loader.setPath( 'models/gltf/' );
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
@@ -186,7 +187,9 @@
 
 			function animate() {
 
-				const delta = clock.getDelta();
+				timer.update();
+
+				const delta = timer.getDelta();
 
 				if ( mixer ) {
 

examples/webgl_postprocessing_pixel.html

@@ -35,7 +35,7 @@
 		import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 		import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-		let camera, scene, renderer, composer, crystalMesh, clock;
+		let camera, scene, renderer, composer, crystalMesh, timer;
 		let gui, params;
 
 		init();
@@ -51,7 +51,8 @@
 			scene = new THREE.Scene();
 			scene.background = new THREE.Color( 0x151729 );
 
-			clock = new THREE.Clock();
+			timer = new THREE.Timer();
+			timer.connect( document );
 
 			renderer = new THREE.WebGLRenderer();
 			renderer.shadowMap.enabled = true;
@@ -172,7 +173,9 @@
 
 		function animate() {
 
-			const t = clock.getElapsedTime();
+			timer.update();
+
+			const t = timer.getElapsed();
 
 			crystalMesh.material.emissiveIntensity = Math.sin( t * 3 ) * .5 + .5;
 			crystalMesh.position.y = .7 + Math.sin( t * 2 ) * .05;

examples/webgl_postprocessing_rgb_halftone.html

@@ -33,7 +33,7 @@
 			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
 			import { HalftonePass } from 'three/addons/postprocessing/HalftonePass.js';
 
-			let renderer, clock, camera, stats;
+			let renderer, timer, camera, stats;
 
 			const rotationSpeed = Math.PI / 64;
 
@@ -48,7 +48,8 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.z = 12;
@@ -193,7 +194,9 @@
 
 			function animate() {
 
-				const delta = clock.getDelta();
+				timer.update();
+
+				const delta = timer.getDelta();
 				stats.update();
 				group.rotation.y += delta * rotationSpeed;
 				composer.render( delta );

examples/webgl_postprocessing_transition.html

@@ -37,7 +37,8 @@
 			let renderer, composer, renderTransitionPass;
 
 			const textures = [];
-			const clock = new THREE.Clock();
+			const timer = new THREE.Timer();
+			timer.connect( document );
 
 			const params = {
 				sceneAnimate: true,
@@ -116,10 +117,12 @@
 
 			function animate() {
 
+				timer.update();
+
 				// Transition animation
 				if ( params.transitionAnimate ) TWEEN.update();
 
-				const delta = clock.getDelta();
+				const delta = timer.getDelta();
 				fxSceneA.update( delta );
 				fxSceneB.update( delta );
 

examples/webgl_postprocessing_unreal_bloom.html

@@ -48,7 +48,7 @@
 			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 
 			let camera, stats;
-			let composer, renderer, mixer, clock;
+			let composer, renderer, mixer, timer;
 
 			const params = {
 				threshold: 0,
@@ -63,7 +63,8 @@
 
 				const container = document.getElementById( 'container' );
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				const scene = new THREE.Scene();
 
@@ -174,7 +175,9 @@
 
 			function animate() {
 
-				const delta = clock.getDelta();
+				timer.update();
+
+				const delta = timer.getDelta();
 
 				mixer.update( delta );
 

examples/webgl_refraction.html

@@ -38,7 +38,7 @@
 			import { Refractor } from 'three/addons/objects/Refractor.js';
 			import { WaterRefractionShader } from 'three/addons/shaders/WaterRefractionShader.js';
 
-			let camera, scene, renderer, clock;
+			let camera, scene, renderer, timer;
 
 			let refractor, smallSphere;
 
@@ -48,7 +48,8 @@
 
 				const container = document.getElementById( 'container' );
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				// scene
 				scene = new THREE.Scene();
@@ -162,7 +163,9 @@
 
 			function animate() {
 
-				const time = clock.getElapsedTime();
+				timer.update();
+
+				const time = timer.getElapsed();
 
 				refractor.material.uniforms.time.value = time;
 

examples/webgl_shader_lava.html

@@ -92,7 +92,7 @@
 			import { BloomPass } from 'three/addons/postprocessing/BloomPass.js';
 			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 
-			let camera, renderer, composer, clock;
+			let camera, renderer, composer, timer;
 
 			let uniforms, mesh;
 
@@ -107,7 +107,8 @@
 
 				const scene = new THREE.Scene();
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				const textureLoader = new THREE.TextureLoader();
 
@@ -185,7 +186,9 @@
 
 			function animate() {
 
-				const delta = 5 * clock.getDelta();
+				timer.update();
+
+				const delta = 5 * timer.getDelta();
 
 				uniforms[ 'time' ].value += 0.2 * delta;
 

examples/webgl_shadowmap.html

@@ -53,7 +53,8 @@
 			let light;
 			let lightShadowMapViewer;
 
-			const clock = new THREE.Clock();
+			const timer = new THREE.Timer();
+			timer.connect( document );
 
 			let showHUD = false;
 
@@ -328,6 +329,8 @@
 
 			function animate() {
 
+				timer.update();
+
 				render();
 				stats.update();
 
@@ -335,7 +338,7 @@
 
 			function render() {
 
-				const delta = clock.getDelta();
+				const delta = timer.getDelta();
 
 				mixer.update( delta );
 

examples/webgl_shadowmap_performance.html

@@ -51,7 +51,8 @@
 
 			const morphs = [], animGroups = [];
 
-			const clock = new THREE.Clock();
+			const timer = new THREE.Timer();
+			timer.connect( document );
 
 			init();
 
@@ -303,6 +304,8 @@
 
 			function animate() {
 
+				timer.update();
+
 				stats.begin();
 				render();
 				stats.end();
@@ -311,7 +314,7 @@
 
 			function render() {
 
-				const delta = clock.getDelta();
+				const delta = timer.getDelta();
 
 				if ( mixer ) mixer.update( delta );
 

examples/webgl_shadowmap_viewer.html

@@ -29,7 +29,7 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { ShadowMapViewer } from 'three/addons/utils/ShadowMapViewer.js';
 
-			let camera, scene, renderer, clock, stats;
+			let camera, scene, renderer, timer, stats;
 			let dirLight, spotLight;
 			let torusKnot, cube;
 			let dirLightShadowMapViewer, spotLightShadowMapViewer;
@@ -147,7 +147,8 @@
 				controls.target.set( 0, 2, 0 );
 				controls.update();
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				stats = new Stats();
 				document.body.appendChild( stats.dom );
@@ -185,6 +186,8 @@
 
 			function animate() {
 
+				timer.update();
+
 				render();
 
 				stats.update();
@@ -206,7 +209,7 @@
 
 			function render() {
 
-				const delta = clock.getDelta();
+				const delta = timer.getDelta();
 
 				renderScene();
 				renderShadowMapViewers();

examples/webgl_shadowmap_vsm.html

@@ -29,7 +29,7 @@
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
-			let camera, scene, renderer, clock, stats;
+			let camera, scene, renderer, timer, stats;
 			let dirLight, spotLight;
 			let torusKnot, dirGroup;
 
@@ -193,7 +193,8 @@
 				controls.target.set( 0, 2, 0 );
 				controls.update();
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				stats = new Stats();
 				document.body.appendChild( stats.dom );
@@ -211,7 +212,9 @@
 
 			function animate( time ) {
 
-				const delta = clock.getDelta();
+				timer.update();
+
+				const delta = timer.getDelta();
 
 				torusKnot.rotation.x += 0.25 * delta;
 				torusKnot.rotation.y += 0.5 * delta;

examples/webgl_shadowmesh.html

@@ -34,7 +34,8 @@
 
 			const scene = new THREE.Scene();
 			const camera = new THREE.PerspectiveCamera( 55, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 3000 );
-			const clock = new THREE.Clock();
+			const timer = new THREE.Timer();
+			timer.connect( document );
 			const renderer = new THREE.WebGLRenderer( { stencil: true } );
 
 			const sunLight = new THREE.DirectionalLight( 'rgb(255,255,255)', 3 );
@@ -179,7 +180,9 @@
 
 			function animate() {
 
-				frameTime = clock.getDelta();
+				timer.update();
+
+				frameTime = timer.getDelta();
 
 				cube.rotation.x += 1.0 * frameTime;
 				cube.rotation.y += 1.0 * frameTime;

examples/webgl_texture2darray_compressed.html

@@ -65,7 +65,7 @@
 			import Stats from 'three/addons/libs/stats.module.js';
 			import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';
 
-			let camera, scene, mesh, renderer, stats, clock;
+			let camera, scene, mesh, renderer, stats, timer;
 
 			const planeWidth = 50;
 			const planeHeight = 25;
@@ -85,7 +85,8 @@
 				scene = new THREE.Scene();
 
 				//
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
@@ -139,9 +140,11 @@
 
 			function animate() {
 
+				timer.update();
+
 				if ( mesh ) {
 
-					const delta = clock.getDelta() * 10;
+					const delta = timer.getDelta() * 10;
 
 					depthStep += delta;
 

examples/webgl_ubo.html

@@ -188,7 +188,7 @@
 
 			import * as THREE from 'three';
 
-			let camera, scene, renderer, clock;
+			let camera, scene, renderer, timer;
 
 			init();
 
@@ -202,7 +202,8 @@
 				scene = new THREE.Scene();
 				camera.lookAt( scene.position );
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				// geometry
 
@@ -323,7 +324,9 @@
 
 			function animate() {
 
-				const delta = clock.getDelta();
+				timer.update();
+
+				const delta = timer.getDelta();
 
 				scene.traverse( function ( child ) {
 

examples/webgl_ubo_arrays.html

@@ -115,7 +115,7 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			let camera, scene, renderer, clock, stats;
+			let camera, scene, renderer, timer, stats;
 
 			let lightingUniformsGroup, lightCenters;
 
@@ -137,7 +137,8 @@
 				scene = new THREE.Scene();
 				camera.lookAt( scene.position );
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				// geometry
 
@@ -267,7 +268,9 @@
 
 			function animate() {
 
-				const elapsedTime = clock.getElapsedTime();
+				timer.update();
+
+				const elapsedTime = timer.getElapsed();
 
 				const lights = lightingUniformsGroup.uniforms[ 0 ];
 			

examples/webgl_volume_instancing.html

@@ -26,7 +26,7 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { VOXLoader, buildData3DTexture } from 'three/addons/loaders/VOXLoader.js';
 
-			let renderer, scene, camera, controls, clock;
+			let renderer, scene, camera, controls, timer;
 
 			init();
 
@@ -48,7 +48,8 @@
 				controls.autoRotateSpeed = - 1.0;
 				controls.enableDamping = true;
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				// Material
 
@@ -249,7 +250,9 @@
 
 			function animate() {
 
-				const delta = clock.getDelta();
+				timer.update();
+
+				const delta = timer.getDelta();
 				controls.update( delta );
 
 				renderer.render( scene, camera );

examples/webgpu_animation_retargeting.html

@@ -59,7 +59,8 @@
 
 			//
 
-			const clock = new THREE.Clock();
+			const timer = new THREE.Timer();
+			timer.connect( document );
 
 			export const lightSpeed = /*#__PURE__*/ Fn( ( [ suv_immutable ] ) => {
 
@@ -287,7 +288,9 @@
 
 			function animate() {
 
-				const delta = clock.getDelta();
+				timer.update();
+
+				const delta = timer.getDelta();
 
 				source.mixer.update( delta );
 				mixer.update( delta );

examples/webgpu_animation_retargeting_readyplayer.html

@@ -60,7 +60,8 @@
 
 			//
 
-			const clock = new THREE.Clock();
+			const timer = new THREE.Timer();
+			timer.connect( document );
 
 			// scene
 
@@ -197,7 +198,9 @@
 
 			function animate() {
 
-				const delta = clock.getDelta();
+				timer.update();
+
+				const delta = timer.getDelta();
 
 				source.mixer.update( delta );
 				mixer.update( delta );

examples/webgpu_backdrop.html

@@ -40,7 +40,7 @@
 
 			let camera, scene, renderer;
 			let portals, rotate = true;
-			let mixer, clock;
+			let mixer, timer;
 
 			init();
 
@@ -53,7 +53,8 @@
 				scene.backgroundNode = screenUV.y.mix( color( 0x66bbff ), color( 0x4466ff ) );
 				camera.lookAt( 0, 1, 0 );
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				// lights
 
@@ -149,7 +150,9 @@
 
 			function animate() {
 
-				const delta = clock.getDelta();
+				timer.update();
+
+				const delta = timer.getDelta();
 
 				if ( mixer ) mixer.update( delta );
 

examples/webgpu_backdrop_area.html

@@ -44,7 +44,7 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 			let camera, scene, renderer;
-			let mixer, clock;
+			let mixer, timer;
 
 			init();
 
@@ -57,7 +57,8 @@
 				scene.backgroundNode = hue( screenUV.y.mix( color( 0x66bbff ), color( 0x4466ff ) ), time.mul( 0.1 ) );
 				camera.lookAt( 0, 1, 0 );
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				const ambient = new THREE.AmbientLight( 0xffffff, 2.5 );
 				scene.add( ambient );
@@ -175,7 +176,9 @@
 
 			function animate() {
 
-				const delta = clock.getDelta();
+				timer.update();
+
+				const delta = timer.getDelta();
 
 				if ( mixer ) mixer.update( delta );
 

examples/webgpu_backdrop_water.html

@@ -42,7 +42,7 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 			let camera, scene, renderer;
-			let mixer, objects, clock;
+			let mixer, objects, timer;
 			let model, floor, floorPosition;
 			let postProcessing;
 			let controls;
@@ -69,7 +69,8 @@
 				scene.add( skyAmbientLight );
 				scene.add( waterAmbientLight );
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				// animated model
 
@@ -128,11 +129,11 @@
 
 				// water
 
-				const timer = time.mul( .8 );
+				const t = time.mul( .8 );
 				const floorUV = positionWorld.xzy;
 
-				const waterLayer0 = mx_worley_noise_float( floorUV.mul( 4 ).add( timer ) );
-				const waterLayer1 = mx_worley_noise_float( floorUV.mul( 2 ).add( timer ) );
+				const waterLayer0 = mx_worley_noise_float( floorUV.mul( 4 ).add( t ) );
+				const waterLayer1 = mx_worley_noise_float( floorUV.mul( 2 ).add( t ) );
 
 				const waterIntensity = waterLayer0.mul( waterLayer1 );
 				const waterColor = waterIntensity.mul( 1.4 ).mix( color( 0x0487e2 ), color( 0x74ccf4 ) );
@@ -240,9 +241,11 @@
 
 			function animate() {
 
+				timer.update();
+
 				controls.update();
 
-				const delta = clock.getDelta();
+				const delta = timer.getDelta();
 
 				floor.position.y = floorPosition.y - 5;
 
@@ -256,7 +259,7 @@
 
 				for ( const object of objects.children ) {
 
-					object.position.y = Math.sin( clock.elapsedTime + object.id ) * .3;
+					object.position.y = Math.sin( timer.getElapsed() + object.id ) * .3;
 					object.rotation.y += delta * .3;
 
 				}

examples/webgpu_compute_cloth.html

@@ -62,7 +62,8 @@
 			const verletSprings = [];
 			const verletVertexColumns = [];
 
-			const clock = new THREE.Clock();
+			const timer = new THREE.Timer();
+			timer.connect( document );
 
 			const params = {
 				wireframe: false,
@@ -558,6 +559,8 @@
 
 			async function render() {
 
+				timer.update();
+
 				sphere.visible = params.sphere;
 				sphereUniform.value = params.sphere ? 1 : 0;
 				windUniform.value = params.wind;
@@ -565,7 +568,7 @@
 				vertexWireframeObject.visible = params.wireframe;
 				springWireframeObject.visible = params.wireframe;
 
-				const deltaTime = Math.min( clock.getDelta(), 1 / 60 ); // don't advance the time too far, for example when the window is out of focus
+				const deltaTime = Math.min( timer.getDelta(), 1 / 60 ); // don't advance the time too far, for example when the window is out of focus
 				const stepsPerSecond = 360; // ensure the same amount of simulation steps per second on all systems, independent of refresh rate
 				const timePerStep = 1 / stepsPerSecond;
 

examples/webgpu_compute_particles_fluid.html

@@ -44,7 +44,8 @@
 
 			let renderer, scene, camera, controls;
 
-			const clock = new THREE.Clock();
+			const timer = new THREE.Timer();
+			timer.connect( document );
 
 			const maxParticles = 8192 * 16;
 			const gridSize1d = 64;
@@ -567,7 +568,9 @@
 
 			async function render() {
 
-				const deltaTime = THREE.MathUtils.clamp( clock.getDelta(), 0.00001, 1 / 60 ); // don't advance the time too far, for example when the window is out of focus
+				timer.update();
+
+				const deltaTime = THREE.MathUtils.clamp( timer.getDelta(), 0.00001, 1 / 60 ); // don't advance the time too far, for example when the window is out of focus
 				dtUniform.value = deltaTime;
 
 				mouseForceUniform.value.copy( mouseCoord ).sub( prevMouseCoord ).multiplyScalar( 2 );

examples/webgpu_compute_particles_rain.html

@@ -46,7 +46,7 @@
 			let controls;
 			let computeParticles;
 			let monkey;
-			let clock;
+			let timer;
 
 			let collisionBox, collisionCamera, collisionPosRT, collisionPosMaterial;
 			let collisionBoxPos, collisionBoxPosUI;
@@ -267,7 +267,8 @@
 
 				//
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				//
 
@@ -322,7 +323,9 @@
 
 			function animate() {
 
-				const delta = clock.getDelta();
+				timer.update();
+
+				const delta = timer.getDelta();
 
 				if ( monkey ) {
 

examples/webgpu_instancing_morph.html

@@ -50,7 +50,9 @@
 
 			}
 
-			const clock = new THREE.Clock( true );
+			const timer = new THREE.Timer();
+			timer.connect( document );
+
 
 			init();
 
@@ -168,7 +170,9 @@
 
 			function animate() {
 
-				const time = clock.getElapsedTime();
+				timer.update();
+
+				const time = timer.getElapsed();
 
 				const r = 3000;
 				camera.position.set( Math.sin( time / 10 ) * r, 1500 + 1000 * Math.cos( time / 5 ), Math.cos( time / 10 ) * r );

examples/webgpu_lensflares.html

@@ -46,7 +46,8 @@
 			let camera, scene, renderer;
 			let controls;
 
-			const clock = new THREE.Clock();
+			const timer = new THREE.Timer();
+			timer.connect( document );
 
 			init();
 
@@ -170,13 +171,15 @@
 
 			function animate() {
 
+				timer.update();
+
 				render();
 
 			}
 
 			function render() {
 
-				const delta = clock.getDelta();
+				const delta = timer.getDelta();
 
 				controls.update( delta );
 				renderer.render( scene, camera );

examples/webgpu_lines_fat_raycasting.html

@@ -52,7 +52,7 @@
 			let renderer, scene, camera, controls;
 			let sphereInter, sphereOnLine;
 			let gui;
-			let clock;
+			let timer;
 
 			const color = new THREE.Color();
 
@@ -104,7 +104,8 @@
 
 			function init() {
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				renderer = new THREE.WebGPURenderer( { antialias: true, alpha: true, trackTimestamp: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
@@ -229,7 +230,9 @@
 
 			async function animate() {
 
-				const delta = clock.getDelta();
+				timer.update();
+
+				const delta = timer.getDelta();
 
 				const obj = line.visible ? line : segments;
 				thresholdLine.position.copy( line.position );

examples/webgpu_loader_gltf_transmission.html

@@ -42,13 +42,14 @@
 
 			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
 
-			let camera, scene, renderer, controls, clock, mixer;
+			let camera, scene, renderer, controls, timer, mixer;
 
 			init();
 
 			function init() {
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
@@ -119,7 +120,9 @@
 
 			function render() {
 
-				if ( mixer ) mixer.update( clock.getDelta() );
+				timer.update();
+
+				if ( mixer ) mixer.update( timer.getDelta() );
 
 				controls.update();
 

examples/webgpu_morphtargets_face.html

@@ -48,7 +48,8 @@
 
 				let mixer;
 
-				const clock = new THREE.Clock();
+				const timer = new THREE.Timer();
+				timer.connect( document );
 
 				const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 20 );
 				camera.position.set( - 1.8, 0.8, 3 );
@@ -118,7 +119,9 @@
 
 				function animate() {
 
-					const delta = clock.getDelta();
+					timer.update();
+
+					const delta = timer.getDelta();
 
 					if ( mixer ) {
 

examples/webgpu_mrt_mask.html

@@ -44,7 +44,7 @@
 			let camera, scene, renderer;
 			let postProcessing;
 			let spheres, rotate = true;
-			let mixer, clock;
+			let mixer, timer;
 
 			init();
 
@@ -57,7 +57,8 @@
 				scene.backgroundNode = screenUV.y.mix( color( 0x66bbff ), color( 0x4466ff ) ).mul( .05 );
 				camera.lookAt( 0, 1, 0 );
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				// lights
 
@@ -164,7 +165,9 @@
 
 			function animate() {
 
-				const delta = clock.getDelta();
+				timer.update();
+
+				const delta = timer.getDelta();
 
 				if ( mixer ) mixer.update( delta );
 

examples/webgpu_portal.html

@@ -43,7 +43,7 @@
 			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 			let camera, sceneMain, scenePortal, renderer;
-			let clock;
+			let timer;
 
 			const mixers = [];
 
@@ -68,7 +68,8 @@
 				camera.position.multiplyScalar( .8 );
 				camera.lookAt( 0, 1, 0 );
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				// lights
 
@@ -182,7 +183,9 @@
 
 			function animate() {
 
-				const delta = clock.getDelta();
+				timer.update();
+
+				const delta = timer.getDelta();
 
 				for ( const mixer of mixers ) {
 

examples/webgpu_postprocessing_bloom.html

@@ -46,7 +46,7 @@
 
 
 			let camera;
-			let postProcessing, renderer, mixer, clock;
+			let postProcessing, renderer, mixer, timer;
 
 			const params = {
 				threshold: 0,
@@ -59,7 +59,8 @@
 
 			async function init() {
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				const scene = new THREE.Scene();
 
@@ -160,7 +161,9 @@
 
 			function animate() {
 
-				const delta = clock.getDelta();
+				timer.update();
+
+				const delta = timer.getDelta();
 
 				mixer.update( delta );
 

examples/webgpu_postprocessing_ca.html

@@ -51,7 +51,7 @@
 				cameraDistance: 40
 			};
 
-			let camera, scene, renderer, clock, mainGroup;
+			let camera, scene, renderer, timer, mainGroup;
 			let controls, postProcessing;
 
 			init();
@@ -84,7 +84,8 @@
 				const pmremGenerator = new THREE.PMREMGenerator( renderer );
 				scene.environment = pmremGenerator.fromScene( new RoomEnvironment(), 0.04 ).texture;
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				// Create main group
 				mainGroup = new THREE.Group();
@@ -296,7 +297,9 @@
 
 			function animate() {
 
-				const time = clock.getElapsedTime();
+				timer.update();
+
+				const time = timer.getElapsed();
 
 				controls.update();
 

examples/webgpu_postprocessing_fxaa.html

@@ -43,7 +43,7 @@
 				animated: false
 			};
 
-			let camera, scene, renderer, clock, group;
+			let camera, scene, renderer, timer, group;
 			let postProcessing;
 
 			init();
@@ -56,7 +56,8 @@
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xffffff );
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				//
 
@@ -163,7 +164,9 @@
 
 			function animate() {
 
-				const delta = clock.getDelta();
+				timer.update();
+
+				const delta = timer.getDelta();
 
 				if ( params.animated === true ) {
 

examples/webgpu_postprocessing_motion_blur.html

@@ -42,7 +42,7 @@
 			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 			let camera, scene, renderer;
-			let boxLeft, boxRight, model, mixer, clock;
+			let boxLeft, boxRight, model, mixer, timer;
 			let postProcessing;
 			let controls;
 
@@ -79,7 +79,8 @@
 				scene.add( skyAmbientLight );
 				scene.add( waterAmbientLight );
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				// animated model
 
@@ -219,13 +220,15 @@
 
 			function animate() {
 
+				timer.update();
+
 				controls.update();
 
-				const delta = clock.getDelta();
+				const delta = timer.getDelta();
 				const speed = params.speed;
 
 				boxRight.rotation.y += delta * 4 * speed;
-				boxLeft.scale.setScalar( 1 + Math.sin( clock.elapsedTime * 10 * speed ) * .2 );
+				boxLeft.scale.setScalar( 1 + Math.sin( timer.getElapsed() * 10 * speed ) * .2 );
 
 				if ( model ) {
 

examples/webgpu_postprocessing_pixel.html

@@ -41,7 +41,7 @@
 		import { uniform } from 'three/tsl';
 		import { pixelationPass } from 'three/addons/tsl/display/PixelationPassNode.js';
 
-		let camera, scene, renderer, postProcessing, crystalMesh, clock;
+		let camera, scene, renderer, postProcessing, crystalMesh, timer;
 		let effectController;
 
 		init();
@@ -57,7 +57,8 @@
 			scene = new THREE.Scene();
 			scene.background = new THREE.Color( 0x151729 );
 
-			clock = new THREE.Clock();
+			timer = new THREE.Timer();
+			timer.connect( document );
 
 			// textures
 
@@ -176,7 +177,9 @@
 
 		function animate() {
 
-			const t = clock.getElapsedTime();
+			timer.update();
+
+			const t = timer.getElapsed();
 
 			crystalMesh.material.emissiveIntensity = Math.sin( t * 3 ) * .5 + .5;
 			crystalMesh.position.y = .7 + Math.sin( t * 2 ) * .05;

examples/webgpu_postprocessing_transition.html

@@ -43,7 +43,8 @@
 			let renderer, postProcessing, transitionController, transitionPass;
 
 			const textures = [];
-			const clock = new THREE.Clock();
+			const timer = new THREE.Timer();
+			timer.connect( document );
 
 			const effectController = {
 				animateScene: true,
@@ -232,6 +233,8 @@
 
 			function animate() {
 
+				timer.update();
+
 				if ( effectController.animateTransition ) TWEEN.update();
 
 				if ( textures[ effectController.texture ] ) {
@@ -241,7 +244,7 @@
 
 				}
 
-				const delta = clock.getDelta();
+				const delta = timer.getDelta();
 				fxSceneA.update( delta );
 				fxSceneB.update( delta );
 

examples/webgpu_reflection_blurred.html

@@ -45,7 +45,7 @@
 			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 			let camera, scene, renderer;
-			let model, mixer, clock;
+			let model, mixer, timer;
 			let controls;
 			let gui;
 
@@ -63,7 +63,8 @@
 				const waterAmbientLight = new THREE.HemisphereLight( 0xffffff, 0x0066ff, 10 );
 				scene.add( waterAmbientLight );
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				// animated model
 
@@ -228,9 +229,11 @@
 
 			function animate() {
 
+				timer.update();
+
 				controls.update();
 
-				const delta = clock.getDelta();
+				const delta = timer.getDelta();
 
 				if ( model ) {
 

examples/webgpu_shadowmap.html

@@ -40,7 +40,7 @@
 
 			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
-			let camera, scene, renderer, clock;
+			let camera, scene, renderer, timer;
 			let dirLight, spotLight;
 			let torusKnot, dirGroup;
 
@@ -178,7 +178,8 @@
 				controls.maxDistance = 40;
 				controls.update();
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				window.addEventListener( 'resize', resize );
 
@@ -195,7 +196,9 @@
 
 			function animate( time ) {
 
-				const delta = clock.getDelta();
+				timer.update();
+
+				const delta = timer.getDelta();
 
 				torusKnot.rotation.x += 0.25 * delta;
 				torusKnot.rotation.y += 0.5 * delta;

examples/webgpu_shadowmap_array.html

@@ -43,7 +43,7 @@
 
 			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
-			let camera, scene, renderer, clock;
+			let camera, scene, renderer, timer;
 			let dirLight;
 			let torusKnot, dirGroup;
 			let tsmHelper;
@@ -146,7 +146,8 @@
 				controls.maxPolarAngle = Math.PI / 2 - 0.1; // Prevent camera from going below ground
 				controls.update();
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				window.addEventListener( 'resize', resize );
 
@@ -392,7 +393,9 @@
 
 			async function animate( time ) {
 
-				const delta = clock.getDelta();
+				timer.update();
+
+				const delta = timer.getDelta();
 
 				// Rotate the central torus knot
 				torusKnot.rotation.x += 0.25 * delta;

examples/webgpu_shadowmap_vsm.html

@@ -39,7 +39,7 @@
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
-			let camera, scene, renderer, clock;
+			let camera, scene, renderer, timer;
 			let dirLight, spotLight;
 			let torusKnot, dirGroup;
 
@@ -205,7 +205,8 @@
 				controls.target.set( 0, 2, 0 );
 				controls.update();
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 			}
 
@@ -220,7 +221,9 @@
 
 			function animate( time ) {
 
-				const delta = clock.getDelta();
+				timer.update();
+
+				const delta = timer.getDelta();
 
 				if ( config.animate === true ) {
 

examples/webgpu_skinning.html

@@ -40,7 +40,7 @@
 
 			let camera, scene, renderer;
 
-			let mixer, clock;
+			let mixer, timer;
 
 			init();
 
@@ -53,7 +53,8 @@
 				scene.backgroundNode = screenUV.y.mix( color( 0x66bbff ), color( 0x4466ff ) );
 				camera.lookAt( 0, 1, 0 );
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				//lights
 
@@ -103,7 +104,9 @@
 
 			function animate() {
 
-				const delta = clock.getDelta();
+				timer.update();
+
+				const delta = timer.getDelta();
 
 				if ( mixer ) mixer.update( delta );
 

examples/webgpu_skinning_instancing.html

@@ -42,7 +42,7 @@
 			let camera, scene, renderer;
 			let postProcessing;
 
-			let mixer, clock;
+			let mixer, timer;
 
 			init();
 
@@ -54,7 +54,8 @@
 				scene = new THREE.Scene();
 				camera.lookAt( 0, 1, 0 );
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				// lights
 
@@ -166,7 +167,9 @@
 
 			function animate() {
 
-				const delta = clock.getDelta();
+				timer.update();
+
+				const delta = timer.getDelta();
 
 				if ( mixer ) mixer.update( delta );
 

examples/webgpu_skinning_points.html

@@ -39,7 +39,7 @@
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
 			let camera, scene, renderer;
-			let mixer, clock;
+			let mixer, timer;
 
 			init();
 
@@ -54,7 +54,8 @@
 
 				scene.add( new THREE.AmbientLight( 0xffffff, 10 ) );
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				const loader = new GLTFLoader();
 				loader.load( 'models/gltf/Michelle.glb', function ( gltf ) {
@@ -151,7 +152,9 @@
 
 			function animate() {
 
-				const delta = clock.getDelta();
+				timer.update();
+
+				const delta = timer.getDelta();
 
 				if ( mixer ) mixer.update( delta );
 

examples/webgpu_textures_2d-array_compressed.html

@@ -43,7 +43,7 @@
 
 			//
 
-			let camera, scene, mesh, renderer, clock;
+			let camera, scene, mesh, renderer, timer;
 
 			const depth = uniform( 0 );
 
@@ -65,7 +65,8 @@
 				scene = new THREE.Scene();
 
 				//
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				renderer = new THREE.WebGPURenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
@@ -109,9 +110,11 @@
 
 			function animate() {
 
+				timer.update();
+
 				if ( mesh ) {
 
-					const delta = clock.getDelta() * 10;
+					const delta = timer.getDelta() * 10;
 
 					depthStep += delta;
 

examples/webgpu_textures_partialupdate.html

@@ -35,7 +35,7 @@
 
 			import * as THREE from 'three/webgpu';
 
-			let camera, scene, renderer, clock, dataTexture, diffuseMap;
+			let camera, scene, renderer, timer, dataTexture, diffuseMap;
 
 			let last = 0;
 			const position = new THREE.Vector2();
@@ -50,7 +50,8 @@
 
 				scene = new THREE.Scene();
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				const loader = new THREE.TextureLoader();
 				diffuseMap = loader.load( 'textures/carbon/Carbon.png' );
@@ -97,7 +98,9 @@
 
 			function animate() {
 
-				const elapsedTime = clock.getElapsedTime();
+				timer.update();
+
+				const elapsedTime = timer.getElapsed();
 
 
 				renderer.render( scene, camera );

examples/webgpu_tsl_earth.html

@@ -42,13 +42,14 @@
 
 			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
-			let camera, scene, renderer, controls, globe, clock;
+			let camera, scene, renderer, controls, globe, timer;
 
 			init();
 
 			function init() {
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				camera = new THREE.PerspectiveCamera( 25, window.innerWidth / window.innerHeight, 0.1, 100 );
 				camera.position.set( 4.5, 2, 3 );
@@ -200,7 +201,9 @@
 
 			async function animate() {
 
-				const delta = clock.getDelta();
+				timer.update();
+
+				const delta = timer.getDelta();
 				globe.rotation.y += delta * 0.025;
 			
 				controls.update();

examples/webgpu_tsl_halftone.html

@@ -41,7 +41,7 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
-			let camera, scene, renderer, controls, clock, halftoneSettings;
+			let camera, scene, renderer, controls, timer, halftoneSettings;
 
 			init();
 
@@ -52,7 +52,8 @@
 
 				scene = new THREE.Scene();
 
-				clock = new THREE.Clock();
+				timer = new THREE.Timer();
+				timer.connect( document );
 
 				// renderer
 
@@ -255,9 +256,11 @@
 
 			async function animate() {
 
+				timer.update();
+
 				controls.update();
 
-				const time = clock.getElapsedTime();
+				const time = timer.getElapsed();
 				halftoneSettings[ 1 ].uniforms.direction.value.x = Math.cos( time );
 				halftoneSettings[ 1 ].uniforms.direction.value.y = Math.sin( time );
 

examples/webgpu_xr_cubes.html

@@ -31,7 +31,8 @@
 			import { XRButton } from 'three/addons/webxr/XRButton.js';
 			import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js';
 
-			const clock = new THREE.Clock();
+			const timer = new THREE.Timer();
+			timer.connect( document );
 
 			let container;
 			let camera, scene, raycaster, renderer;
@@ -191,7 +192,9 @@
 
 			function animate() {
 
-				const delta = clock.getDelta() * 60;
+				timer.update();
+
+				const delta = timer.getDelta() * 60;
 
 				if ( controller.userData.isSelecting === true ) {
 

examples/webgpu_xr_native_layers.html

@@ -53,10 +53,11 @@
 			let normal = new THREE.Vector3();
 			const relativeVelocity = new THREE.Vector3();
 
-			const clock = new THREE.Clock();
+			const timer = new THREE.Timer();
+			timer.connect( document );
 			const funfairs = [];
 			const train = new THREE.Object3D();
-			const rcdelta = clock.getDelta() * 0.8; // slow down simulation
+			const rcdelta = timer.getDelta() * 0.8; // slow down simulation
 			const PI2 = Math.PI * 2;
 			let rccamera = null;
 			let rcscene = null;
@@ -626,6 +627,8 @@
 
 			function render() {
 
+				timer.update();
+
 				renderer.xr.renderLayers( );
 
 				handleController( controller1 );
@@ -635,7 +638,7 @@
 				horseLayer.rotation.y -= 0.02;
 
 				//
-				const delta = clock.getDelta() * 0.8;
+				const delta = timer.getDelta() * 0.8;
 
 				const range = 3 - radius;
 

examples/webxr_ar_camera_access.html

@@ -26,7 +26,8 @@
 			import * as THREE from 'three';
 			import { ARButton } from 'three/addons/webxr/ARButton.js';
 
-			const clock = new THREE.Clock();
+			const timer = new THREE.Timer();
+			timer.connect( document );
 
 			let camera, scene, renderer;
 			let cube;
@@ -122,7 +123,9 @@
 
 			function animate() {
 
-				const delta = clock.getDelta();
+				timer.update();
+
+				const delta = timer.getDelta();
 
 				setCameraTexture();
 

examples/webxr_vr_handinput_pointerclick.html

@@ -270,7 +270,8 @@
 		};
 
 		const world = new World();
-		const clock = new THREE.Clock();
+		const timer = new THREE.Timer();
+		timer.connect( document );
 		let camera, scene, renderer;
 
 		init();
@@ -507,8 +508,10 @@
 
 		function animate() {
 
-			const delta = clock.getDelta();
-			const elapsedTime = clock.elapsedTime;
+			timer.update();
+
+			const delta = timer.getDelta();
+			const elapsedTime = timer.getElapsed();
 			renderer.xr.updateCamera( camera );
 			world.execute( delta, elapsedTime );
 			renderer.render( scene, camera );

examples/webxr_vr_handinput_pointerdrag.html

@@ -375,7 +375,8 @@
 		};
 
 		const world = new World();
-		const clock = new THREE.Clock();
+		const timer = new THREE.Timer();
+		timer.connect( document );
 		let camera, scene, renderer;
 
 		init();
@@ -585,8 +586,10 @@
 
 		function animate() {
 
-			const delta = clock.getDelta();
-			const elapsedTime = clock.elapsedTime;
+			timer.update();
+
+			const delta = timer.getDelta();
+			const elapsedTime = timer.getElapsed();
 			renderer.xr.updateCamera( camera );
 			world.execute( delta, elapsedTime );
 			renderer.render( scene, camera );