Three.js机器人与星系动态场景（三）：如何实现动画

在前面的博客中分别介绍了如何快速搭建3D交互场景以及通过坐标辅助工具加深对坐标系的理解。本文将继续探讨其中动画实现的细节。通过调整rotation加深对动画的印象。

Three.js机器人与星系动态场景：实现3D渲染与交互式控制-优快云博客 

Three.js机器人与星系动态场景（二）：强化三维空间认识-优快云博客

 动画说白了就是一张张照片，连起来依次展示，这样就形成一个动画效果，只要帧率高，人的眼睛就感觉不到卡顿，是连续的视频效果。

 实现上述效果只需要添加如下动画，在动画中给物体旋转增加一个正向或负向的增量，在方法中调用自身达到一个循环

  const animate = () => {
    requestAnimationFrame(animate);
    robot.rotation.y -= 0.005; //机器人旋转
    robot2.rotation.y -= 0.005;
    // 粒子旋转
    starts.rotation.y -= 0.001;
    starts.rotation.z += 0.001;
    starts.rotation.x += 0.001;
    renderer.render(scene, camera);
  };
  animate(); //添加动画

requestAnimationFrame 动画循环

requestAnimationFrame 是一个循环机制，它会在浏览器准备好绘制下一帧时重复调用提供的函数。这样，您可以创建一个平滑且连续的动画效果。在 animate 函数内部，requestAnimationFrame(animate) 被调用，这确保了 animate 函数会在每一帧都被执行。这是创建无限动画循环的关键。

1. 浏览器优化：当使用 requestAnimationFrame 时，浏览器会优化动画过程，减少页面闪烁和重绘，确保动画流畅运行。它会根据显示器的刷新率（通常是 60Hz）来调用动画函数，但实际的调用次数可能会根据电脑的性能和浏览器的工作负载动态调整。

2. 时间间隔：requestAnimationFrame 不接受任何时间间隔参数，它会在浏览器认为合适的时候调用函数，这通常与屏幕的刷新率同步。与 setInterval 或 setTimeout 不同，您不需要担心设置一个固定的时间间隔，这有助于避免动画在不同设备上出现不同步的问题。

3. 暂停和恢复：当用户切换到另一个标签或最小化浏览器窗口时，requestAnimationFrame 会自动暂停，这有助于节省 C