Three.js - 动画

动画赋予我们的网站生命力，正如您所看到的，大多数示例都使用了动画。让我们看看如何在我们的 Three.js web 应用程序中添加基本的动画。

如果您想向您的 Three.js 场景添加动画，您需要多次渲染场景。为此，您应该使用标准的 HTML5 requestAnimationFrame 功能。

function animate() {
   // schedule multiple rendering
   requestAnimationFrame(animate)
   renderer.render(scene, camera)
}

以上代码以规律的间隔执行传递给 requestAnimationFrame 的参数（animate 函数），并且多次渲染场景（每 60 毫秒一次）。

您现在有了动画循环，因此对模型、相机或场景中其他对象的任何更改现在都可以在 animate 函数中完成。

让我们创建一个简单的旋转动画。

function animate() {
   requestAnimationFrame(animate)
   // rotating the cube
   cube.rotation.x += 0.005
   cube.rotation.y += 0.01
   renderer.render(scene, camera)
}

以上代码创建了一个旋转的立方体。每次 animate 渲染时，立方体都会按指定的值旋转，并作为无限循环重复。

您还可以将动画添加到场景中的任何其他元素。查看此示例并四处玩弄场景，探索不同的动画。

您还可以使用不同的动画库，如 Tween.js、Greensock，使用 Three.js 创建专业的动画。

在下一节中，让我们使用 tween.js 为我们的 3D 对象添加动画

在 Three.js 项目中使用 Tween.js

首先，您应该将库包含到您的项目中。添加一个 script 标签或从 npm 安装。

<script src="path/to/tween.js"></script>

要使用此库，我们首先需要创建一个 TWEEN.Tween 对象的实例。

const initial = { x: 0, y: 1.25, z: 0, rot: 0 }
const final = { x: 5, y: 15, z: -10, rot: 2 * Math.PI }
const tween = new TWEEN.Tween(initial)

它创建了一个 TWEEN.Tween 实例。我们可以使用此实例将提供的属性从初始值更改为最终值。

tween.to(final)

使用 to 函数，我们告诉 tween 对象我们希望将初始值缓慢地更改为最终值。因此，我们将 x 属性从 0 更改为 5。第二个参数 5000 定义此更改应持续多少毫秒。

您还可以选择值随时间变化的方式。例如，您可以使用线性缓动函数。它以恒定速率更改值，从小的变化开始，然后迅速增加。TWEEN 中预定义了许多缓动函数。

tween.easing(TWEEN.Easing.Elastic.InOut)

为了使 3D 对象动画化，我们需要在每次更改时收到通知。这是通过 onUpdate() 完成的。如果您想在 tween 结束时收到通知，请使用 onComplete()。

tween.onUpdate(function () {
   cube.position.set(this.x, this.y, this.z)
   cube.rotation.set(this.rot, this.rot, this.rot)
})

您可以在 tween 对象上使用其他一些设置来控制动画的行为。在这种情况下，我们告诉 tween 对象无限重复其动画并使用往复效果来反转动画。

tween.repeat(Infinity)
tween.yoyo(true)

最后，我们可以通过调用 start 函数来启动 tween 对象。

tween.start()

此时，什么也不会发生。您必须更新 tween，以便在场景渲染文本时更新它。您可以在 animate 函数中调用它。

function animate() {
   requestAminationFrame(animate)
   TWEEN.update()
}

现在，您可以看到效果了。类似地，您可以将任何动画库与 Three.js 一起使用。