在Three.js中使用tween.js做出流暢的動畫效果

如果匯入到 Three.js 中的 3D 模型沒有包含動畫，又或者需要讓模型與使用者互動產生動畫效果的話，Three.js 中可以直接的操作模型的座標、位置、縮放等等，但是若要讓動畫效果更加生動流暢，則可以使用 tween.js 這個開源的動畫補間套件來達成！

讓我們來看看這如何運作，首先，在 Three.js 中建立一個簡易的環境與模型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 場景
const scene = new THREE.Scene();

// 透視投影攝影機
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// 渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 正方體
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x28cb92 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

接下來，我需要建立一段動畫函式，以及觸發動畫的事件

1
2
3
4
5
6
7
8
9
10
11
12
// 鏡頭拉遠，讓模型出現
camera.position.z = 5;

// 動畫函式60fps
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

animate();

document.body.addEventListener("click", () => {});

接著，將 tween.js 置入，並且在點擊事件內寫入移動動畫

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 動畫函式60fps
function animate() {
  requestAnimationFrame(animate);
  TWEEN.update(); // tween.js動畫更新方法
  renderer.render(scene, camera);
}

animate();

document.body.addEventListener("click", () => {
  // x軸正向移動10個單位
  const tween = new TWEEN.Tween(cube.position)
    .to({ x: 10 }, 1000) // 移動距離, 動畫時間
    .easing(TWEEN.Easing.Quartic.In) // 動畫類型
    .start();
});

這樣一來，正方體的動畫就會使用動畫類型「TWEEN.Easing.Quartic.In」的方式去移動，讓動畫更加的生動！tween.js動畫的類型有非常多種可以選擇，也可以自訂動畫曲線，達成不同的動畫效果，詳細請參考官方文件。