javascript - requestAnimationFrame 循环是如何工作的？

Question

我仍在学习 javascript 和 Three.js，我无法理解 requestAnimationFrame 函数的工作原理。有人可以向我解释以下代码如何处理简单的单词吗？

(您可以查看完整代码 on jsfiddle )

  // loop function
  function render(time) {
    time *= 0.001;  // convert time to seconds

    cube.rotation.x = time;
    cube.rotation.y = time;

    // render our scene
    renderer.render(scene, camera);

    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);

Answer 1

requestAnimationFrame() 到达浏览器并要求它在重绘完成之前执行一个函数。

requestAnimationFrame docs

代码:

  function render(time) {    
    time *= 0.001;  // convert time to seconds

    cube.rotation.x = time;
    cube.rotation.y = time;

    // render our scene
    renderer.render(scene, camera);

    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);

• 你设置了一个时间变量，它会在每次调用 render() 时改变值
• 您将立方体旋转 x 和 y 值设置为时间变量
• 您使用更新后的属性渲染场景
• 您调用 requestAnimationFrame 在渲染函数中传入渲染。这会导致一个循环，该循环将使用更新后的坐标不断地在屏幕上重新绘制立方体。
• 您调用 requestAnimationFrame 在渲染函数之外传入渲染函数，以对立方体进行初始渲染