three Timer 定时器

223 阅读3分钟

在 Three.js 中,Timer 是一个用于测量时间间隔的实用工具,它并不是一个定时器的传统意义上的功能(比如定期触发回调),而是用来帮助你记录和管理时间相关的操作,通常在动画和时间控制方面使用。

Timer 有六个方法

    Timer()
    const timer = new Timer();
    function animate( timestamp ) {
            requestAnimationFrame( animate );  // 请求下一帧的动画
            // timestamp 是可选的,它表示当前的时间戳,通常由 `requestAnimationFrame` 提供
            timer.update( timestamp );  // 更新定时器的状态,使用时间戳
            const delta = timer.getDelta();  // 获取与上一帧之间的时间差(delta)
            // 使用 delta 来执行与时间相关的操作,比如移动对象、动画等
            // do something with delta
            renderer.render( scene, camera );  // 渲染场景

    }

方法

  • getDelta () : Number getDelta() 获取的值是从上一帧到当前帧的 时间差,但它是相对的,取决于 Timer 更新的时间单位。通常,这个时间差单位是 ,但具体来说,它是 经过的时间与时间流速的比例
    • getDelta() 返回的是 上一帧与当前帧之间的时间差,以 秒为单位,但是这并不是简单的秒数,它可能会受到 帧率 或 时间缩放 的影响,尤其是在运行不同设备或环境中的情况下。
    • Three.js 中的 Timer 实际上基于 requestAnimationFrame 提供的时间戳来进行更新,而这个时间戳(timestamp)是 相对于浏览器的起始时间(通常是自页面加载以来的毫秒数)。因此,getDelta() 返回的时间差是相对的,但单位实际上是秒。
  • getElapsed () : Number getElapsed()Timer 类中的一个方法,用于获取自计时器启动以来的 总经过时间。返回值是一个 数字,单位为 。这与 getDelta() 不同,因为 getDelta() 返回的是当前帧与上一帧之间的时间差,而 getElapsed() 返回的是从计时器启动到现在的总时间。
  • setTimescale ( timescale : Number ) : this setTimescale(timescale)Timer 类中的一个方法,用于 调整时间流速(时间比例) 。该方法允许你修改计时器的时间速率,影响 getDelta()getElapsed() 方法的返回值。
    • timescale = 1:表示正常时间流速,时间以正常速度进行(默认值)。
    • timescale > 1:表示时间加速,即时间流速比正常速度快。例如,timescale = 2 会使时间加速为正常的 2 倍速率。
    • timescale < 1:表示时间减速,即时间流速比正常速度慢。例如,timescale = 0.5 会使时间以半速流动。
    • timescale = 0:表示时间暂停,所有基于计时器的操作会停止。
  • reset () : this reset() 是 Timer 类中的一个方法,用于 重置计时器 的状态。调用 reset() 后,计时器会回到初始状态,计时从零开始。重置后,getElapsed() 将从零开始,而 getDelta() 会基于新的时间差计算。
  • dispose () : this 可用于释放所有内部资源。通常在不再需要计时器实例时调用。
  • update ( timestamp : Number ) : this update(timestamp)Timer 类中的一个方法,用于更新计时器的状态并根据传入的 timestamp 更新计时信息。每次调用 update() 时,计时器都会基于当前的 timestamp 来计算出当前的时间差(delta),并更新内部的计时状态。