Tween.js 动画助力 Three.js 对象生动演绎

前端

2023-09-22 11:21:40

引子：Three.js 的动画困境

Three.js 是一个功能强大的 3D 图形库，但其原生动画功能较为有限。当我们想要实现诸如平滑的摄像机移动、物体轨迹运动或旋转效果时，则需要借助其他库或工具。而 Tween.js 正是为此而生的。

Tween.js 的登场：动画的利器

Tween.js 是一个轻量级、强大的 JavaScript 动画库，专门用于创建流畅、可定制的动画效果。它提供了一个直观且易于使用的 API，使开发人员能够轻松地创建复杂的动画，而无需编写低级的 JavaScript 代码。

结合妙处：Three.js 与 Tween.js 的协奏曲

将 Tween.js 与 Three.js 结合使用，可以为我们的场景对象带来前所未有的生机与活力。通过利用 Tween.js 的强大功能，我们可以实现以下高级动画效果：

摄像机移动： 平滑地移动摄像机，探索场景的不同视角。
物体移动： 沿预定义路径移动物体，模拟真实世界的运动轨迹。
旋转动画： 围绕任意轴旋转物体，展现其多维度特征。

实战演练：案例剖析

为了更好地理解如何将 Tween.js 应用于 Three.js 场景，让我们深入一个示例案例：

场景在一个立方体房间内，我们希望摄像机围绕房间中心旋转，同时一个球体沿着环形路径移动。

实现步骤：

创建场景： 使用 Three.js 创建一个基本的场景，包括摄像机、立方体房间和球体。
导入 Tween.js： 在 HTML 页面中导入 Tween.js 库。
摄像机动画： 使用 Tween.js 的 TWEEN.Tween() 方法创建一个补间动画，将摄像机绕房间中心旋转。
球体动画： 创建另一个补间动画，让球体沿环形路径移动。
协调动画： 使用 TWEEN.Group() 方法将两个动画组合在一起，实现同时播放。
启动动画： 调用 TWEEN.update() 方法启动动画。

完整代码示例：

import * as THREE from 'three';
import { TWEEN } from 'tween.js';

// 创建场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

// 创建立方体房间
const cube = new THREE.BoxGeometry(5, 5, 5);
const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
const mesh = new THREE.Mesh(cube, material);
scene.add(mesh);

// 创建球体
const sphere = new THREE.SphereGeometry(0.5, 32, 32);
const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const sphereMesh = new THREE.Mesh(sphere, sphereMaterial);
scene.add(sphereMesh);

// 摄像机动画
const cameraTween = new TWEEN.Tween(camera.position).to({
  x: 0,
  y: 1,
  z: 5
}, 2000).easing(TWEEN.Easing.Quadratic.InOut);

// 球体动画
const sphereTween = new TWEEN.Tween(sphereMesh.position).to({
  x: 5,
  y: 0,
  z: 0
}, 2000).easing(TWEEN.Easing.Quadratic.InOut);

// 协调动画
const group = new TWEEN.Group();
group.add(cameraTween);
group.add(sphereTween);

// 启动动画
function animate() {
  requestAnimationFrame(animate);

  TWEEN.update();

  renderer.render(scene, camera);
}

animate();