简述
前面创建的场景，都是在代码的末尾进行一次渲染。有时这样就能够满足需求。但是更多时候，大家会希望模型带点动画效果。
使用 Three.js 时，动画的工作方式类似于定格动画。移动对象，然后进行渲染。然后，再移动一点对象，然后进行另一次渲染。对象在渲染之间移动得越多，它们的移动速度就越快。
屏幕刷新的频率，我们称之为帧速率。帧速率主要取决于屏幕，但也受限于计算机本身。大多数屏幕以每秒 60 帧的速度运行。如果你擅长数学运算，这等同于大约每16毫秒一帧。但是有些屏幕可以刷新的更快，当计算机负载大时，它会刷新的更慢。
这样就需要运行一个让对象动起来并在每帧重新渲染的函数，来实现动画的效果。
在原生的JavaScript中，通常使用window.requestAnimationFrame(...)。
设置
像以前一样，现在屏幕中间放一个立方体。
使用requestAnimationFrame
requestAnimationFrame的最初用途并不是在每帧运行代码。
requestAnimationFrame会在下一帧前执行内部的函数。如果每个下一帧requestAnimationFrame都执行这个函数，那么就相当于在每帧执行了函数，而这正是这里所需要的。
创建一个名为tick的函数，并调用这个函数一次。在这个函数中，使用window.requestAnimationFrame，来保证在下一帧继续执行tick函数。
/**
* 动画
*/
const tick = () =>
{
console.log('tick')
window.requestAnimationFrame(tick)
}
tick()
这样就有了无限循环。
同时会在浏览器的控制台上看到，每一帧都在输出'tick'，电脑越快，输出的就越快。
现在，就可以移动renderer.render(...)调用，放到tick函数内部，然后增加立方体的rotation旋转。
/**
* 动画
*/
const tick = () =>
{
// 更新对象
mesh.rotation.y += 0.01
// 渲染
renderer.render(scene, camera)
// 在下一帧继续调用tick
window.requestAnimationFrame(tick)
}
tick()
这样，就完成了一个Three.js的动画。
这里有个BUG，在高帧率的电脑上，立方体会旋转的更快，低帧率的电脑上，旋转的会更慢。
帧率自适应
要使动画适应帧率，就需要知道从上次刷新以来，花费了多少时间。
首先，需要一种测量时间的函数。在原生JavaScript中，可以使用Date.now()来获取当前的时间戳。
const time = Date.now()
时间戳对应于自 1970 年 1 月 1 日（Unix 时间的开始）以来经过的时间。在JavaScript中，它的单位是毫秒。
所以现在需要做的就是当前的时间戳减去前一帧的时间戳，从而获得可以调用deltaTime，并将其用在动画处理上。
/**
* 动画
*/
let time = Date.now()
const tick = () =>
{
// 获取时间
const currentTime = Date.now()
const deltaTime = currentTime - time
time = currentTime
// 更新对象
mesh.rotation.y += 0.01 * deltaTime
// ...
}
tick()
当屏幕以60FPS刷新时，deltaTime会在16上下浮动，这时立方体会旋转的很快，将deltaTime乘上一个数字，旋转速度就会下降。
因为使用了计算得出的单帧渲染时间，所以，在帧率相同的显示器和电脑上运行的效果会是一致的。
使用Clock时钟
虽然以上代码并不复杂，但Three.js有个内置解决方案，名为Clock，用来解决时间相关的计算问题。
只需要实例化一个Clock对象作为变量，然后使用内建方法，比如getElapsedTime()。这个方法会返回Clock变量被创建以来所经历的时间。
可以用以下值来旋转对象。
/**
* Animate
*/
const clock = new THREE.Clock()
const tick = () =>
{
const elapsedTime = clock.getElapsedTime()
// Update objects
mesh.rotation.y = elapsedTime
// ...
}
tick()
可以通过修改position属性，实现移动。如果再混合上Math.sin()，便可以得到更好的结果
/**
* 动画
*/
const clock = new THREE.Clock()
const tick = () =>
{
const elapsedTime = clock.getElapsedTime()
// 更新对象
mesh.position.x = Math.cos(elapsedTime)
mesh.position.y = Math.sin(elapsedTime)
// ...
}
tick()
此时，一个立方体在绕z轴画圈。
同理可得，使用相同的方法可以操作任何的Object3D对象，比如相机
/**
* 动画
*/
const clock = new THREE.Clock()
const tick = () =>
{
const elapsedTime = clock.getElapsedTime()
// 更新对象
camera.position.x = Math.cos(elapsedTime)
camera.position.y = Math.sin(elapsedTime)
camera.lookAt(mesh.position)
// ...
}
tick()
另一个方法叫getData()，但是尽量不要使用这个方法，除非明确的了解Clock类中的具体实现方式。在动画中使用这个方法，或导致意想不到的结果。
使用动画库
有时，场景中的动画会应用特定的风格，这就需要使用其它的库。npm中的动画库有很多，其中有一个知名的叫做GSAP。
想要将GSAP加入到当前的Webpack中，可以使用npm包管理器。
npm i --save gsap@3.5.1
然后，就可以在script.js中引用
import './style.css'
import * as THREE from 'three'
import gsap from 'gsap'
// ...
关于GSAP可以自行查看相关文档。
/**
* 动画
*/
gsap.to(mesh.position, { duration: 1, delay: 1, x: 2 })
const tick = () =>
{
// 渲染
renderer.render(scene, camera)
// 在下一帧中调用tick
window.requestAnimationFrame(tick)
}
tick()
GSAP内建了requestAnimationFrame，因此不必手动更新动画，但是如果想看到立方体移动的效果，还是需要每帧重渲染场景。
选择合适的方案
使用原生，还是使用动画库，取决于想要解决什么问题。简单循环的轮播，直接使用原生；计划实现特定的动画，则需要使用库。
