Clock => Timer r183

Questions
1

I usually use a specific version of three.js for my projects. In the Collection of examples from discourse.threejs.org
as well, the examples are tied to the version available at the time they were created, so they still work even years later.

Only for the BeginnerExample do I use direct access to "https://threejs.org/ …

I do this to check after updates to three.js whether the example still works. That way, I don’t have to go through all of three.js’s changes. Most changes have no impact on a beginner example.

In r183, the following appears:

warn( ‘THREE.Clock: This module has been deprecated. Please use THREE.Timer instead.’ ); // @deprecated, r183

In three.js docs, there’s a bit of an awkward note: const timer = new Timer(); without THREE., which only works if you import components individually.

If I replace Clock with Timer, I don’t get an error message, but the time t stays at 0.

What’s the problem? :thinking:

const clock = new THREE.Clock( );	// for the rotation of the model - see animate
let t, tt;				// time

function animate( ) {
	
	requestAnimationFrame( animate ); // recursive loop
	
 	t = clock.getElapsedTime( );

	modelSqu.rotation.y = t;		// ======== to step 03 ========
	flagwaving( t );			// ======== to step 07 ========

const timer = new THREE.Timer( );	// for the rotation of the model - see animate
timer.connect( document ); 		// use Page Visibility API
let t, tt;				// time

function animate( ) {
	
	requestAnimationFrame( animate ); // recursive loop
	
 	t = timer.getElapsed( );
	console.log( 't = ', t )  // always 0
    
	modelSqu.rotation.y = t;		// ======== to step 03 ========
	flagwaving( t );			// ======== to step 07 ========
2

iirc you have to call update on the timer for every simulation step eg…

timer.getElapsedTime() timer.update()

with a timestamp as an input .update( timestamp : number )

3

I use it this way:

const clock = new THREE.Timer(); // force of habit to have 'clock' :)
let t = 0;

...
// in the beginning of animation loop
  clock.update();
  const dt = clock.getDelta();
  t += dt;

For example, here: Crisp Style [deforming and postprocessing]

4

Thanks for the two tips.

I didn’t realize that the phrase

Timer has an update() method that updates its internal state. That makes it possible to call getDelta() and getElapsed() multiple times per simulation step without getting different values.

wasn’t a requirement because of the phrase “makes it possible.”

Once you know it, it’s quite simple. Clock apparently updates itself automatically, but Timer does not.

Perhaps the Code Example for Timer should be updated to reflect this difference?