Examples: Fix time usage. (#30498)

* Examples: Fix time usage.

* E2E: Update screenshots.

examples/misc_raycaster_helper.html

@@ -29,7 +29,7 @@
 			import { RaycasterHelper } from 'https://cdn.jsdelivr.net/npm/@gsimone/three-raycaster-helper@0.1.0/dist/gsimone-three-raycaster-helper.esm.js';
 
 			let scene, renderer;
-			let camera, clock;
+			let camera;
 
 			let capsule1, capsule2, capsule3;
 			let raycaster, raycasterHelper;
@@ -50,7 +50,6 @@
 				camera.position.z = 10;
 
 				scene = new THREE.Scene();
-				clock = new THREE.Clock();
 
 				//
 
@@ -90,12 +89,14 @@
 
 			}
 
-			function animate() {
+			function animate( time ) {
+
+				const elapsedTime = time / 1000; // ms to s
 
 				[ capsule1, capsule2, capsule3 ].forEach( capsule => {
 
-					capsule.position.y = Math.sin( clock.getElapsedTime() * 0.5 + capsule.position.x );
-					capsule.rotation.z = Math.sin( clock.getElapsedTime() * 0.5 ) * Math.PI * 1;
+					capsule.position.y = Math.sin( elapsedTime * 0.5 + capsule.position.x );
+					capsule.rotation.z = Math.sin( elapsedTime * 0.5 ) * Math.PI * 1;
 
 				} );
 

examples/webgl_buffergeometry_lines.html

@@ -24,9 +24,10 @@
 
 			import * as THREE from 'three';
 
+			import { Timer } from 'three/addons/misc/Timer.js';
 			import Stats from 'three/addons/libs/stats.module.js';
 
-			let container, stats, clock;
+			let container, stats, timer;
 
 			let camera, scene, renderer;
 
@@ -49,7 +50,7 @@
 
 				scene = new THREE.Scene();
 
-				clock = new THREE.Clock();
+				timer = new Timer();
 
 				const geometry = new THREE.BufferGeometry();
 				const material = new THREE.LineBasicMaterial( { vertexColors: true } );
@@ -117,8 +118,10 @@
 
 			function animate() {
 
-				const delta = clock.getDelta();
-				const time = clock.getElapsedTime();
+				timer.update();
+
+				const delta = timer.getDelta();
+				const time = timer.getElapsed();
 
 				line.rotation.x = time * 0.25;
 				line.rotation.y = time * 0.5;

examples/webgl_geometry_dynamic.html

@@ -34,10 +34,11 @@
 			import Stats from 'three/addons/libs/stats.module.js';
 
 			import { FirstPersonControls } from 'three/addons/controls/FirstPersonControls.js';
+			import { Timer } from 'three/addons/misc/Timer.js';
 
 			let camera, controls, scene, renderer, stats;
 
-			let mesh, geometry, material, clock;
+			let mesh, geometry, material, timer;
 
 			const worldWidth = 128, worldDepth = 128;
 
@@ -48,7 +49,7 @@
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
 				camera.position.y = 200;
 
-				clock = new THREE.Clock();
+				timer = new Timer();
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xaaccff );
@@ -112,6 +113,7 @@
 
 			function animate() {
 
+				timer.update();
 				render();
 				stats.update();
 
@@ -119,8 +121,8 @@
 
 			function render() {
 
-				const delta = clock.getDelta();
-				const time = clock.getElapsedTime() * 10;
+				const delta = timer.getDelta();
+				const time = timer.getElapsed() * 10;
 
 				const position = geometry.attributes.position;
 

examples/webgpu_tsl_vfx_linkedparticles.html

@@ -32,10 +32,11 @@
 			import { bloom } from 'three/addons/tsl/display/BloomNode.js';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+			import { Timer } from 'three/addons/misc/Timer.js';
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 			import WebGPU from 'three/addons/capabilities/WebGPU.js';
 
-			let camera, scene, renderer, postProcessing, controls, clock, light;
+			let camera, scene, renderer, postProcessing, controls, timer, light;
 
 			let updateParticles, spawnParticles; // TSL compute nodes
 			let getInstanceColor; // TSL function
@@ -85,7 +86,7 @@
 
 				scene = new THREE.Scene();
 
-				clock = new THREE.Clock();
+				timer = new Timer();
 
 				// renderer
 
@@ -421,6 +422,8 @@
 
 			function animate() {
 
+				timer.update();
+
 				// compute particles
 				renderer.compute( updateParticles );
 				renderer.compute( spawnParticles );
@@ -437,9 +440,9 @@
 				spawnPosition.value.lerp( scenePointer, 0.1 );
 
 				// rotating colors
-				colorOffset.value += clock.getDelta() * colorRotationSpeed.value * timeScale.value;
+				colorOffset.value += timer.getDelta() * colorRotationSpeed.value * timeScale.value;
 
-				const elapsedTime = clock.getElapsedTime();
+				const elapsedTime = timer.getElapsed();
 				light.position.set(
 					Math.sin( elapsedTime * 0.5 ) * 30,
 					Math.cos( elapsedTime * 0.3 ) * 30,