Timer.html 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <base href="../../../" />
  6. <script src="page.js"></script>
  7. <link type="text/css" rel="stylesheet" href="page.css" />
  8. </head>
  9. <body>
  10. <h1>[name]</h1>
  11. <p class="desc">
  12. This class is an alternative to [page:Clock] with a different API design and behavior.
  13. The goal is to avoid the conceptual flaws that became apparent in [page:Clock] over time.
  14. <ul>
  15. <li>[name] has an [page:.update]() method that updates its internal state. That makes it possible to call [page:.getDelta]() and [page:.getElapsed]() multiple times per simulation step without getting different values.</li>
  16. <li>The class can make use of the Page Visibility API to avoid large time delta values when the app is inactive (e.g. tab switched or browser hidden).</li>
  17. </ul>
  18. </p>
  19. <h2>Import</h2>
  20. <p>
  21. [name] is an add-on, and must be imported explicitly.
  22. See [link:#manual/introduction/Installation Installation / Addons].
  23. </p>
  24. <code>
  25. import { Timer } from 'three/addons/misc/Timer.js';
  26. </code>
  27. <h2>Code Example</h2>
  28. <code>
  29. const timer = new Timer();
  30. function animate( timestamp ) {
  31. requestAnimationFrame( animate );
  32. // timestamp is optional
  33. timer.update( timestamp );
  34. const delta = timer.getDelta();
  35. // do something with delta
  36. renderer.render( scene, camera );
  37. }
  38. </code>
  39. <h2>Examples</h2>
  40. <p>
  41. [example:webgl_morphtargets_sphere WebGL / morphtargets / sphere]
  42. </p>
  43. <h2>Constructor</h2>
  44. <h3>Timer()</h3>
  45. <h2>Methods</h2>
  46. <h3>[method:this connect]( [param:Document document] )</h3>
  47. <p>
  48. Connects the timer to the given document. Calling this method is not mandatory to use the timer
  49. but enables the usage of the Page Visibility API to avoid large time delta values.
  50. </p>
  51. <h3>[method:this disconnect]()</h3>
  52. <p>
  53. Disconnects the timer from the DOM and also disables the usage of the Page Visibility API.
  54. </p>
  55. <h3>[method:Number getDelta]()</h3>
  56. <p>
  57. Returns the time delta in seconds.
  58. </p>
  59. <h3>[method:Number getElapsed]()</h3>
  60. <p>
  61. Returns the elapsed time in seconds.
  62. </p>
  63. <h3>[method:this setTimescale]( [param:Number timescale] )</h3>
  64. <p>
  65. Sets a time scale that scales the time delta in [page:.update]().
  66. </p>
  67. <h3>[method:this reset]()</h3>
  68. <p>
  69. Resets the time computation for the current simulation step.
  70. </p>
  71. <h3>[method:this dispose]()</h3>
  72. <p>
  73. Can be used to free all internal resources. Usually called when the timer instance isn't required anymore.
  74. </p>
  75. <h3>[method:this update]( [param:Number timestamp] )</h3>
  76. <p>
  77. timestamp -- (optional) The current time in milliseconds. Can be obtained from the
  78. [link:https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame requestAnimationFrame]
  79. callback argument. If not provided, the current time will be determined with
  80. [link:https://developer.mozilla.org/en-US/docs/Web/API/Performance/now performance.now].<br /><br />
  81. Updates the internal state of the timer. This method should be called once per simulation step
  82. and before you perform queries against the timer (e.g. via [page:.getDelta]()).
  83. </p>
  84. <h2>Source</h2>
  85. <p>
  86. [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/misc/Timer.js examples/jsm/misc/Timer.js]
  87. </p>
  88. </body>
  89. </html>
粤ICP备19079148号