09-Threejs正确处理动画运动
为了最好的利用性能和渲染效果，那么我们只需要在绘制每一帧画面的时候，计算需要渲染的画面即可。这个时候就可以使用window.requestAnimationFrame方法。
1.1 使用方式
window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。
1.2 请求动画帧间隔不固定
当你准备更新动画时你应该调用此方法。这将使浏览器在下一次重绘之前调用你传入给该方法的动画函数 (即你的回调函数)。回调函数执行次数通常是每秒 60 次，但在大多数遵循 W3C 建议的浏览器中，回调函数执行次数通常与浏览器屏幕刷新次数相匹配。因此具体回调函数执行的间隔时间跟屏幕刷新次数、当前页面运行时负荷等因素有关。
1.2.1 解决确保不同帧率的画面运行速度一致
回调函数会被传入DOMHighResTimeStamp参数，DOMHighResTimeStamp指示当前被 requestAnimationFrame() 排序的回调函数被触发的时间。
请确保总是使用第一个参数 (或其它获得当前时间的方法) 计算每次调用之间的时间间隔，否则动画在高刷新率的屏幕中会运行得更快。
代码执行后，我们通过输出可以看出，每一帧间隔非常相近，但又不同。
为了确保不同时间间隔，运动的速度一致，那么应该按照
移动距离 = 速度 * 时间
那么如果想要1m/s的速度远离原点的匀速运动，那么就按照这么编写代码
2 综合上述代码
1、在前面创建的项目中的main.js文件写入代码，实现每5秒，即从原点出发匀速在x轴进行1m/s的匀速运动
效果演示：
