Three.js - 动画

动画为我们的网站注入了活力，正如您所见，大多数示例都使用了动画。让我们看看如何向我们的 Three.js Web 应用程序添加基本动画。

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

function animate() {
    // 安排多次渲染
    requestAnimationFrame(animate)
    renderer.render(scene, camera)
}

上述代码定期执行传递给 requestAnimationFrame 的参数 animate 函数，并多次渲染场景(每 60 毫秒一次)。

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

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

function animate() {
    requestAnimationFrame(animate)
    // 旋转立方体
    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 函数，我们告诉 tween 对象我们想要慢慢将初始值更改为最终值。因此，我们将 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)
})

您还可以在补间对象上使用其他几个设置来控制动画的行为方式。在这种情况下，我们告诉补间对象无限重复其动画，并使用溜溜球效果来反转动画。

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

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

tween.start()

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

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

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