Timer.html 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Timer - Three.js Docs</title>
  6. <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7. <script src="../scripts/highlight.min.js"></script>
  8. <link type="text/css" rel="stylesheet" href="../styles/highlight-three.css">
  9. <link type="text/css" rel="stylesheet" href="../styles/page.css">
  10. </head>
  11. <body>
  12. <h1 translate="no">Timer</h1>
  13. <section>
  14. <header>
  15. <div class="class-description"><p>This class is an alternative to <a href="Clock.html">Clock</a> with a different API design and behavior.
  16. The goal is to avoid the conceptual flaws that became apparent in <code>Clock</code> over time.</p>
  17. <ul>
  18. <li><code>Timer</code> has an <code>update()</code> method that updates its internal state. That makes it possible to
  19. call <code>getDelta()</code> and <code>getElapsed()</code> multiple times per simulation step without getting different values.</li>
  20. <li>The class can make use of the Page Visibility API to avoid large time delta values when the app
  21. is inactive (e.g. tab switched or browser hidden).</li>
  22. </ul></div>
  23. <h2>Code Example</h2>
  24. <div translate="no"><pre><code class="language-js">const timer = new Timer();
  25. timer.connect( document ); // use Page Visibility API
  26. </code></pre></div>
  27. </header>
  28. <article>
  29. <div class="container-overview">
  30. <h2>Constructor</h2>
  31. <h3 class="name name-method" id="Timer" translate="no">new <a href="#Timer">Timer</a><span class="signature">()</span> </h3>
  32. <div class="method">
  33. <div class="description">
  34. <p>Constructs a new timer.</p>
  35. </div>
  36. </div>
  37. </div>
  38. <h2 class="subsection-title">Methods</h2>
  39. <h3 class="name name-method" id="connect" translate="no">.<a href="#connect">connect</a><span class="signature">( document : <span class="param-type">Document</span> )</span> </h3>
  40. <div class="method">
  41. <div class="description">
  42. <p>Connect the timer to the given document.Calling this method is not mandatory to
  43. use the timer but enables the usage of the Page Visibility API to avoid large time
  44. delta values.</p>
  45. </div>
  46. <table class="params">
  47. <tbody>
  48. <tr>
  49. <td class="name">
  50. <strong>document</strong>
  51. </td>
  52. <td class="description last">
  53. <p>The document.</p>
  54. </td>
  55. </tr>
  56. </tbody>
  57. </table>
  58. </div>
  59. <h3 class="name name-method" id="disconnect" translate="no">.<a href="#disconnect">disconnect</a><span class="signature">()</span> </h3>
  60. <div class="method">
  61. <div class="description">
  62. <p>Disconnects the timer from the DOM and also disables the usage of the Page Visibility API.</p>
  63. </div>
  64. </div>
  65. <h3 class="name name-method" id="dispose" translate="no">.<a href="#dispose">dispose</a><span class="signature">()</span> </h3>
  66. <div class="method">
  67. <div class="description">
  68. <p>Can be used to free all internal resources. Usually called when
  69. the timer instance isn't required anymore.</p>
  70. </div>
  71. </div>
  72. <h3 class="name name-method" id="getDelta" translate="no">.<a href="#getDelta">getDelta</a><span class="signature">()</span><span class="type-signature"> : number</span> </h3>
  73. <div class="method">
  74. <div class="description">
  75. <p>Returns the time delta in seconds.</p>
  76. </div>
  77. <dl class="details">
  78. <dt class="tag-returns"><strong>Returns:</strong> The time delta in second.</dt>
  79. </dl>
  80. </div>
  81. <h3 class="name name-method" id="getElapsed" translate="no">.<a href="#getElapsed">getElapsed</a><span class="signature">()</span><span class="type-signature"> : number</span> </h3>
  82. <div class="method">
  83. <div class="description">
  84. <p>Returns the elapsed time in seconds.</p>
  85. </div>
  86. <dl class="details">
  87. <dt class="tag-returns"><strong>Returns:</strong> The elapsed time in second.</dt>
  88. </dl>
  89. </div>
  90. <h3 class="name name-method" id="getTimescale" translate="no">.<a href="#getTimescale">getTimescale</a><span class="signature">()</span><span class="type-signature"> : number</span> </h3>
  91. <div class="method">
  92. <div class="description">
  93. <p>Returns the timescale.</p>
  94. </div>
  95. <dl class="details">
  96. <dt class="tag-returns"><strong>Returns:</strong> The timescale.</dt>
  97. </dl>
  98. </div>
  99. <h3 class="name name-method" id="reset" translate="no">.<a href="#reset">reset</a><span class="signature">()</span><span class="type-signature"> : <a href="Timer.html">Timer</a></span> </h3>
  100. <div class="method">
  101. <div class="description">
  102. <p>Resets the time computation for the current simulation step.</p>
  103. </div>
  104. <dl class="details">
  105. <dt class="tag-returns"><strong>Returns:</strong> A reference to this timer.</dt>
  106. </dl>
  107. </div>
  108. <h3 class="name name-method" id="setTimescale" translate="no">.<a href="#setTimescale">setTimescale</a><span class="signature">( timescale : <span class="param-type">number</span> )</span><span class="type-signature"> : <a href="Timer.html">Timer</a></span> </h3>
  109. <div class="method">
  110. <div class="description">
  111. <p>Sets the given timescale which scale the time delta computation
  112. in <code>update()</code>.</p>
  113. </div>
  114. <table class="params">
  115. <tbody>
  116. <tr>
  117. <td class="name">
  118. <strong>timescale</strong>
  119. </td>
  120. <td class="description last">
  121. <p>The timescale to set.</p>
  122. </td>
  123. </tr>
  124. </tbody>
  125. </table>
  126. <dl class="details">
  127. <dt class="tag-returns"><strong>Returns:</strong> A reference to this timer.</dt>
  128. </dl>
  129. </div>
  130. <h3 class="name name-method" id="update" translate="no">.<a href="#update">update</a><span class="signature">( timestamp : <span class="param-type">number</span> )</span><span class="type-signature"> : <a href="Timer.html">Timer</a></span> </h3>
  131. <div class="method">
  132. <div class="description">
  133. <p>Updates the internal state of the timer. This method should be called
  134. once per simulation step and before you perform queries against the timer
  135. (e.g. via <code>getDelta()</code>).</p>
  136. </div>
  137. <table class="params">
  138. <tbody>
  139. <tr>
  140. <td class="name">
  141. <strong>timestamp</strong>
  142. </td>
  143. <td class="description last">
  144. <p>The current time in milliseconds. Can be obtained
  145. from the <code>requestAnimationFrame</code> callback argument. If not provided, the current
  146. time will be determined with <code>performance.now</code>.</p>
  147. </td>
  148. </tr>
  149. </tbody>
  150. </table>
  151. <dl class="details">
  152. <dt class="tag-returns"><strong>Returns:</strong> A reference to this timer.</dt>
  153. </dl>
  154. </div>
  155. <h2 class="subsection-title">Source</h2>
  156. <p>
  157. <a href="https://github.com/mrdoob/three.js/blob/master/src/core/Timer.js" translate="no" target="_blank" rel="noopener">src/core/Timer.js</a>
  158. </p>
  159. </article>
  160. </section>
  161. <script src="../scripts/linenumber.js"></script>
  162. <script src="../scripts/page.js"></script>
  163. </body>
  164. </html>
粤ICP备19079148号