1
0

Timer.html 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. <!DOCTYPE html>
  2. <html lang="zh">
  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. 此类是 [page:Clock] 的替代品,具有不同的 API 设计和行为。目标是避免随着时间的推移 [page:Clock] 中变得明显的概念缺陷。
  13. <ul>
  14. <li>[name] 具有 [page:.update]() 方法,用于更新其内部状态。这使得可以在模拟步骤中多次调用 [page:.getDelta]() 和 [page:.getElapsed]() 而不会得到不同的值。
  15. </li>
  16. <li>该类使用页面可见性 API(Page Visibility API),以避免在应用程序处于非活动状态(例如切换标签或浏览器隐藏)时出现大的时间差值。</li>
  17. </ul>
  18. </p>
  19. <h2>导入</h2>
  20. <p>
  21. [name] 是一个附加组件,必须显式导入。请参阅 [link:#manual/introduction/Installation Installation / Addons].
  22. </p>
  23. <code>
  24. import { Timer } from 'three/addons/misc/Timer.js';
  25. </code>
  26. <h2>代码示例</h2>
  27. <code>
  28. const timer = new Timer();
  29. function animate( timestamp ) {
  30. requestAnimationFrame( animate );
  31. // timestamp is optional
  32. timer.update( timestamp );
  33. const delta = timer.getDelta();
  34. // do something with delta
  35. renderer.render( scene, camera );
  36. }
  37. </code>
  38. <h2>例子</h2>
  39. <p>
  40. [example:webgl_morphtargets_sphere WebGL / morphtargets / sphere]
  41. </p>
  42. <h2>构造函数</h2>
  43. <h3>Timer()</h3>
  44. <h2>方法</h2>
  45. <h3>[method:Number getDelta]()</h3>
  46. <p>
  47. 返回以秒为单位的时间增量。
  48. </p>
  49. <h3>[method:Number getElapsed]()</h3>
  50. <p>
  51. 返回经过的时间(以秒为单位)。
  52. </p>
  53. <h3>[method:this setTimescale]( [param:Number timescale] )</h3>
  54. <p>
  55. 设置一个时间刻度,缩放 [page:.update]() 中的时间增量。
  56. </p>
  57. <h3>[method:this reset]()</h3>
  58. <p>
  59. 重置当前模拟步骤的时间计算。
  60. </p>
  61. <h3>[method:this dispose]()</h3>
  62. <p>
  63. 可用于释放所有内部资源。通常在不再需要计时器实例时调用。
  64. </p>
  65. <h3>[method:this update]( [param:Number timestamp] )</h3>
  66. <p>
  67. timestamp -- (可选)当前时间(以毫秒为单位)。可以从
  68. [link:https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame requestAnimationFrame]
  69. 回调参数中获取 。如果未提供,当前时间将由 [link:https://developer.mozilla.org/en-US/docs/Web/API/Performance/now performance.now]
  70. 确定。<br /><br />
  71. 更新定时器的内部状态。该方法应该在每个模拟步骤以及对计时器执行查询之前调用一次(例如通过 [page:.getDelta]())。
  72. </p>
  73. <h2>源代码</h2>
  74. <p>
  75. [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/misc/Timer.js examples/jsm/misc/Timer.js]
  76. </p>
  77. </body>
  78. </html>