目标

• 了解three.js中几个时间
• 理解，动画需要时间

requestAnimationFrame传递给animate的时间参数

根据这个时间参数，我们实现官网的案例

function animate(timestamp) {
  console.log("当前帧时间戳:", timestamp);
  // 动画逻辑...
}
requestAnimationFrame(animate);

• requestAnimationFrame是window身上的一个函数，animate是作为形参，传入requestAnimationFrame，是requestAnimationFrame的回调函数。
• 当requestAnimationFrame调用animate时，会给它传入一个时间戳，表示动画的时间与动画开始时间的差值，即动画开始了多长时间。
• 有了这个时间，我们就可以做很多事情，我们可以得到时间差，代码如下

let startTime = 0
// 5.动画循环渲染场景
function animate(time: number = 0) {
  const deltaTime = (time - startTime) / 1000
  // console.log(deltaTime)
  startTime = time

  requestAnimationFrame(animate)
  // 渲染场景
  renderer.render(scene, camera)
}

我们在渲染官方的第一个样例时，用到了这个时间差。代码如下：

const clock = new THREE.Clock()
// 5.动画循环渲染场景
function animate() {
  requestAnimationFrame(animate)

  mixer && mixer.update(clock.getDelta()) // 更新3D模型的动画
  controls.update()

  // 如果启用了自动绕Z轴旋转
  if (autoRotateZ && model) {
    model.rotation.z += rotationSpeedZ
  }

  // 渲染场景
  renderer.render(scene, camera)
}

这里用的是three身上的clock，如果我们改为上面的也是一样。先看代码：

这样我们就取代了clock，而是使用了requestAnimationFrame这个函数在调用animate时，给它传入的时间参数。页面效果不变。

总结

• requestAnimationFrame传递给animate的时间是一个毫秒单位的开始动画的时间。但我们这里根据编码的方式，实现拿到时间差。传递给混合器即可。
• 着重理解时间的概念，在动画里面本来就有时间这个概念，动画是在不同时间上的不同图片根据时间来按次序组成并播放的的。
• 主要的时间也就是当前时间、时间差、开始时间、结束时间、总时长等。（我们这里动画开始时间为0，其他的都可以根据每一帧的时间算出来）
• 接下来，我们再看看threejs的clock。

THREE.Clock

查看Clock

• 我们通过上面的打印，可以看到，Clock中包含哪些属性
• 开始时间为0
• oldTime代表了我们打印时的当前时间，单位为毫秒
• elapsedTime为当前时间减去开始时间，单位换算成了秒

• 上面框出来它身上的函数。
• 在我们的样例中，用到的是getDelta这个函数，来获取时间差。
• 而getElapsedTime是动画开始的时长，也就是requestAnimationFrame传给animate的时间参数

总结

• THREE.Clock是一个封装好的类，通过它构造出来的clock对象，我们可以通过它身上的数据以及函数，轻松的获取我们想要的时间，具体的解释上面基本都有，或者自己打印出来研究。
• 用哪一个呢，都可以，但是个人觉得用封装好的THREE.Clock，方便嘛