Timer.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. /**
  2. * This class is an alternative to {@link Clock} with a different API design and behavior.
  3. * The goal is to avoid the conceptual flaws that became apparent in `Clock` over time.
  4. *
  5. * - `Timer` has an `update()` method that updates its internal state. That makes it possible to
  6. * call `getDelta()` and `getElapsed()` multiple times per simulation step without getting different values.
  7. * - The class can make use of the Page Visibility API to avoid large time delta values when the app
  8. * is inactive (e.g. tab switched or browser hidden).
  9. *
  10. * ```js
  11. * const timer = new Timer();
  12. * timer.connect( document ); // use Page Visibility API
  13. * ```
  14. *
  15. * @three_import import { Timer } from 'three/addons/misc/Timer.js';
  16. */
  17. class Timer {
  18. /**
  19. * Constructs a new timer.
  20. */
  21. constructor() {
  22. this._previousTime = 0;
  23. this._currentTime = 0;
  24. this._startTime = now();
  25. this._delta = 0;
  26. this._elapsed = 0;
  27. this._timescale = 1;
  28. this._document = null;
  29. this._pageVisibilityHandler = null;
  30. }
  31. /**
  32. * Connect the timer to the given document.Calling this method is not mandatory to
  33. * use the timer but enables the usage of the Page Visibility API to avoid large time
  34. * delta values.
  35. *
  36. * @param {Document} document - The document.
  37. */
  38. connect( document ) {
  39. this._document = document;
  40. // use Page Visibility API to avoid large time delta values
  41. if ( document.hidden !== undefined ) {
  42. this._pageVisibilityHandler = handleVisibilityChange.bind( this );
  43. document.addEventListener( 'visibilitychange', this._pageVisibilityHandler, false );
  44. }
  45. }
  46. /**
  47. * Disconnects the timer from the DOM and also disables the usage of the Page Visibility API.
  48. */
  49. disconnect() {
  50. if ( this._pageVisibilityHandler !== null ) {
  51. this._document.removeEventListener( 'visibilitychange', this._pageVisibilityHandler );
  52. this._pageVisibilityHandler = null;
  53. }
  54. this._document = null;
  55. }
  56. /**
  57. * Returns the time delta in seconds.
  58. *
  59. * @return {number} The time delta in second.
  60. */
  61. getDelta() {
  62. return this._delta / 1000;
  63. }
  64. /**
  65. * Returns the elapsed time in seconds.
  66. *
  67. * @return {number} The elapsed time in second.
  68. */
  69. getElapsed() {
  70. return this._elapsed / 1000;
  71. }
  72. /**
  73. * Returns the timescale.
  74. *
  75. * @return {number} The timescale.
  76. */
  77. getTimescale() {
  78. return this._timescale;
  79. }
  80. /**
  81. * Sets the given timescale which scale the time delta computation
  82. * in `update()`.
  83. *
  84. * @param {number} timescale - The timescale to set.
  85. * @return {Timer} A reference to this timer.
  86. */
  87. setTimescale( timescale ) {
  88. this._timescale = timescale;
  89. return this;
  90. }
  91. /**
  92. * Resets the time computation for the current simulation step.
  93. *
  94. * @return {Timer} A reference to this timer.
  95. */
  96. reset() {
  97. this._currentTime = now() - this._startTime;
  98. return this;
  99. }
  100. /**
  101. * Can be used to free all internal resources. Usually called when
  102. * the timer instance isn't required anymore.
  103. */
  104. dispose() {
  105. this.disconnect();
  106. }
  107. /**
  108. * Updates the internal state of the timer. This method should be called
  109. * once per simulation step and before you perform queries against the timer
  110. * (e.g. via `getDelta()`).
  111. *
  112. * @param {number} timestamp - The current time in milliseconds. Can be obtained
  113. * from the `requestAnimationFrame` callback argument. If not provided, the current
  114. * time will be determined with `performance.now`.
  115. * @return {Timer} A reference to this timer.
  116. */
  117. update( timestamp ) {
  118. if ( this._pageVisibilityHandler !== null && this._document.hidden === true ) {
  119. this._delta = 0;
  120. } else {
  121. this._previousTime = this._currentTime;
  122. this._currentTime = ( timestamp !== undefined ? timestamp : now() ) - this._startTime;
  123. this._delta = ( this._currentTime - this._previousTime ) * this._timescale;
  124. this._elapsed += this._delta; // _elapsed is the accumulation of all previous deltas
  125. }
  126. return this;
  127. }
  128. }
  129. /**
  130. * A special version of a timer with a fixed time delta value.
  131. * Can be useful for testing and debugging purposes.
  132. *
  133. * @augments Timer
  134. */
  135. class FixedTimer extends Timer {
  136. /**
  137. * Constructs a new timer.
  138. *
  139. * @param {number} [fps=60] - The fixed FPS of this timer.
  140. */
  141. constructor( fps = 60 ) {
  142. super();
  143. this._delta = ( 1 / fps ) * 1000;
  144. }
  145. update() {
  146. this._elapsed += ( this._delta * this._timescale ); // _elapsed is the accumulation of all previous deltas
  147. return this;
  148. }
  149. }
  150. function now() {
  151. return performance.now();
  152. }
  153. function handleVisibilityChange() {
  154. if ( this._document.hidden === false ) this.reset();
  155. }
  156. export { Timer, FixedTimer };