Three.js - 使用setInterval和requestAnimationFrame实现动画效果

如果想要在场景中实现动画效果，需要使场景以一定的时间间隔进行渲染。
示例浏览地址：https://ithanmang.gitee.io/threejs/home/201806/20180623/02-add-animation.html

1 setInterval

在H5 和 jsAPI接口之前使用的方法是 setInterval 方法

• setInterval
  作用：在播放动画时，按照一定的时间间隔就调用传入的方法或对象。
• 格式如下：
  setInterval( function,interval[arg1,...argn] )或者setInterval( object,methodName,interval[arg1,...argn] )
  第一种是默认语法，第二种是专家模式中使用的语法。
  参数：function，是一个函数名或者是一个匿名函数、object，指示一个对象，methodName是参数object中的方法名、interval 是时间间隔参数，单位是毫秒。
  看下面的示例：在页面显示当前系统时间

   /**
    * 动态添加 html 元素到div
    */
   function showTime(){
   

       var time = new Date();

       var hour = time.getHours();
       var minutes = time.getMinutes();
       var seconds = time.getSeconds();
       document.getElementById('dynamicTime').innerHTML = "<h1> 当前系统时间 "+hour+" : "+minutes+" : "+seconds+" </h1>"
   }

   /**
    * 参数 function ： showTime
    * 间隔 interval ： 1000 毫秒
    */
   setInterval(showTime, 1000);

效果

当然这种效果使用 setTimeout 方法也能实现。

• clearInterval
  与 setInterval 对应的方法清除对 setInterval 方法的调用效果。
  使用如下，clearInterval(参数 )，这个参数是 setInterval 返回的。

<script>
    var i = 10;
    function fun(){
   
        console.log('每隔一毫秒调用一次！'+i);
        document.getElementById('dynamicTime').innerHTML = "<h1>倒计时："+i+"</h1>";
        if (i == -