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一起使用。