动画

我们可以使用 JavaScript 的定时器来不停的调用 render 函数来绘制新的图形，但为了更好的利用浏览器渲染，可以使用函数 requestAnimationFrame()

function render() {
  renderer.render(scene, camera); //执行渲染操作
  mesh.rotateY(0.01); //每次绕y轴旋转0.01弧度
  requestAnimationFrame(render); //请求再次执行渲染函数render
}
render();

在实际执行程序的时候，可能 requestAnimationFrame(render)请求的函数并不一定能按照理想的 60FPS 频率执行，两次执行渲染函数的时间间隔也不一定相同，如果执行旋转命令的 rotateY 的时间间隔不同，旋转运动就不均匀，为了解决这个问题需要记录两次执行绘制函数的时间间隔。

let T0 = new Date(); //上次时间
function render() {
  let T1 = new Date(); //本次时间
  let t = T1 - T0; //时间差
  T0 = T1; //把本次时间赋值给上次时间
  renderer.render(scene, camera); // 执行渲染操作
  blueCube.rotateX(0.001 * t); // 旋转角速度0.001弧度每毫秒
  blueCube.rotateY(0.001 * t); // 旋转角速度0.001弧度每毫秒
  blueCube.rotateZ(0.001 * t); // 旋转角速度0.001弧度每毫秒
  requestAnimationFrame(render); // 请求再次执行渲染函数render
}
render();