简述

前面创建的场景，都是在代码的末尾进行一次渲染。有时这样就能够满足需求。但是更多时候，大家会希望模型带点动画效果。

使用 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，因此不必手动更新动画，但是如果想看到立方体移动的效果，还是需要每帧重渲染场景。

选择合适的方案

使用原生，还是使用动画库，取决于想要解决什么问题。简单循环的轮播，直接使用原生；计划实现特定的动画，则需要使用库。