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)
}

上面的代码创建了一个旋转立方体。每次动画渲染时，立方体都会旋转指定的值，这会以无限循环的方式重复。

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

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

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

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

首先，您应该将库包含在您的项目中。添加脚本标签或从 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 函数，我们告诉补间对象我们想要慢慢地将初始值更改为最终值。因此，我们将 x 属性从 0 更改为 5。第二个参数是 5000，定义此更改需要多少毫秒。

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

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

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

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

您还可以在补间对象上使用其他几个设置来控制动画的Behave方式。在本例中，我们告诉补间对象无限地重复其动画，并使用反转动画的溜溜球效果。

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

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

tween.start()

此时，什么也没有发生。您必须更新补间，以便每当场景渲染文本时它都会更新。您可以在 animate 函数中调用它。

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

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