开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第13天，点击查看活动详情

前言

当我们认识了three.js，知道了坐标轴及转换方法，就可以'next'啦，我们是通过render()函数渲染出场景在页面展示出来，此时物体时静态的，如果我们想要物体动起来比如旋转起来，就要一边转换物体，一边渲染，该怎么实现呢？这就是我们今天要了解的动态渲染。

requestAnimationFrame

想要达到上述的效果，我们就需要创建一个定时任务，不停地更新，这里我们就需要用到requestAnimationFrame函数。 requestAnimationFrame函数适用于更新动画，它能通知浏览器将要去做动画更新效果，该函数有一个参数就是回调函数，回调函数在下次更新动画帧的时候调用，回调函数的回调次数与浏览器的屏幕频率有关，一般是60次一秒。这个特点也决定了用它来更新最合适。

   //全局函数
   window.requestAnimationFrame(callback);

实现

找到了适合的函数，接下来在回调函数中每次渲染一点物体，然后再执行render函数，物体就能动起来：

   function move() {
      renderer.render(scene, camera);
      //旋转
      cube.rotation.set(0, 0.01, 0);
      requestAnimationFrame(render);
  }
  move();

上面我们提到过执行的函数一般是60频率去运行，这个次数每秒会有所不同，在这一秒内相邻两次之间的执行间隔也有可能不同，这两个偏差最终会导致物体旋转看起来不太流畅，如果我们想要流畅一点就要想办法优化，让物体匀速去旋转。 要想实现匀速旋转我们可以利用时间戳，在函数执行前获取一次当前时间戳，函数执行时再次获取，算出两者时间差(1毫秒)，再乘以每次旋转角度，最后将第一次时间戳更新为当前的，以供下次函数执行使用。

    let time1 = new Date()
    function move() {
      let time2 = new Date()
      let time = time2-time1
      time1 = time2
      renderer.render(scene, camera);
      //旋转
      cube.rotation.set(0, 0.001*time, 0);
      requestAnimationFrame(render);
  }
  move();

总结

在动态渲染更新时，requestAnimationFrame发挥了重要的作用，这个函数时需要我们牢记的，上述只是以旋转为例，我们也可以让它平移，缩小，当然做这两种转换时需要进行判断。