【16】实战——应用requestAnimationFrame

这篇文章是关于如何使用requestAnimationFrame和Three.js来创建和控制基本的3D动画效果。文章通过一个具体的例子，演示了在Vue框架中如何设置动画循环，控制物体的动画效果，以及如何避免常见的错误，比如调用栈溢出的问题。

文章首先展示了如何创建一个Three.js场景，添加一个透视相机，并设置其位置。接着，文章介绍了如何添加一个具有特定几何形状和材质的立方体物体到场景中。立方体的缩放和旋转也在代码中得到了说明，尽管这些变换在最终的动画中并没有使用。

随后，文章解释了如何初始化WebGL渲染器，并将渲染的canvas元素添加到Vue组件的引用容器中。此外，文章还介绍了如何使用轨道控制器来增强场景的交互性和如何添加一个坐标轴辅助器以帮助可视化场景的空间关系。

关于动画效果，文章主要关注如何使用requestAnimationFrame的时间参数来控制物体的位置。通过在渲染方法中绑定时间参数，示例代码展示了如何让立方体在x轴上往返移动。文章还指出了一个常见的错误：如果直接在requestAnimationFrame的回调中调用渲染方法，而不是使用.bind(this)，可能会导致调用栈溢出。

总体来说，这篇文章是一个入门级的指南，展示了如何在Vue中使用Three.js创建基本的3D动画，并提供了关于如何正确使用requestAnimationFrame的有用提示。