Three.js Clock

本文对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 且时钟并未运行，则该方法同时启动时钟。