Three.js 时钟对象 Clock

Question

本文对 Three.js 时钟对象 Clock 进行简单介绍,如果你对 JavaScript 有一定了解，那么JavaScript的时间对象Date你一定不陌生，Clock本质上就是对Date进行封装，提供了一些方法和属性，当你通过Threejs编写一些和时间相关程序时候，不用在对 Date 进行封装，直接调用Clock对象的方法和属性即可。

通过 Three.js 实现一些动画功能往往需要 Clock 对象获得一些时间数据，比如骨骼动画、变形动画、粒子动画。关于Clock一些应用场景的完整案例源码可以参考本站发布的Threejs视频教程动画相关的内容(第10、11、12章)。

.getDelta () 方法

.getDelta ()是Clock对象比较常用的方法，默认情况下，简单说.getDelta ()方法的功能就是获得前后两次执行该方法的时间间隔，假设你执行一次.getDelta ()方法，再执行一次.getDelta ()方法，第二次执行.getDelta ()方法时候，可以返回上次调用该方法到本次调用之间的时间间隔，返回间隔时间单位是秒，可以参考下面的代码案例理解。

两帧渲染时间间隔

代码功能：下面一段的代码功能就是通过Clock对象的方法.getDelta()获得Threejs本次执行渲染方法.render()和上次执行渲染方法.render()的时间间隔，简单的说就是通过.getDelta()方法获得Three.js两帧渲染时间间隔。

阅读下面代码你应该首先对Threejs的渲染方法有一定的概念，Threejs渲染器的渲染方法.render()每执行一次就得到一帧图像，渲染效果也就是图像会显示在Cnavas画布上，如果一个三维场景是不停变化的，肯定要周期性调用执行.render()方法，更新canvas画布显示内容，一帧帧图像随着时间变化，这样就展现出来一个动画效果。为了周期性执行渲染器渲染方法.render()，一般通过浏览器的APIrequestAnimationFrame实现，浏览器会控制渲染频率，一般性能理想的情况下，每秒s渲染60次左右，在实际的项目中，如果需要渲染的场景比较复杂，一般都会低于60，也就是渲染的两帧时间间隔大于16.67ms。

// 创建一个时钟对象Clock
var clock = new THREE.Clock();
function render() {
  renderer.render(scene, camera); //执行渲染方法，渲染出来一帧图像
  requestAnimationFrame(render); //周期性执行渲染函数
  //clock.getDelta()方法获得两帧的时间间隔
 var T = clock.getDelta();//返回时间单位：秒
 // 可以在控制打印查看你的渲染时间间隔
 console.log('两帧渲染时间间隔',T*1000+'毫秒');
 console.log('查看每秒渲染频率',1/T);
}
render();

属性

属性 .autoStart: Boolean

如果设置为 true，则在第一次 update 时开启时钟Clock。默认值是 true。

属性 .startTime : Float

存储时钟Clock最后一次调用 start 方法的时间

属性 .startTime : Float

存储时钟Clock最后一次调用 start, getElapsedTime 或 getDelta 方法的时间。

属性 .elapsedTime : Float

保存时钟Clock运行的总时长。

属性 .running : Boolean

判断时钟Clock是否在运行。

方法

方法 .start ()

启动时钟。同时将 startTime 和 oldTime 设置为当前时间。 设置 elapsedTime 为 0，并且设置 running 为 true

方法 .stop ()

停止时钟。同时将 oldTime 设置为当前时间。

方法 .getElapsedTime ()

获取自时钟启动后的秒数，摒弃将 oldTime 设置为当前时间。
如果 autoStart 设置为 true 且时钟并未运行，则该方法同时启动时钟。

方法 .getDelta ()

获取自 oldTime 设置后到当前的秒数。 同时将 oldTime 设置为当前时间。
如果 autoStart 设置为 true 且时钟并未运行，则该方法同时启动时钟。