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