Three.js 补间动画与相机移动：让数字世界动起来的魔法

LeonGao
177 阅读4分钟

在 Three.js 的数字宇宙里，静态场景就像是沉默的雕塑，虽然精致却少了些生机。而补间动画和相机移动，就是赋予这个世界灵魂的神奇魔法，让场景中的元素 “活” 过来，带着观众穿梭于奇妙的虚拟空间。接下来，我们就化身 Three.js 的魔法师，学习如何施展这两大魔法。

一、补间动画：让元素翩翩起舞

补间动画，简单来说，就是告诉 Three.js 从 A 状态到 B 状态，如何优雅地 “过渡”。想象一下，你的模型是一位害羞的舞者，补间动画就是指挥它从舞台一侧缓缓走到另一侧，同时完成各种优美动作的 “舞蹈编排”。

1. 引入补间动画库

在正式开始编舞前，我们需要一个得力助手 ——gsap（GreenSock Animation Platform）。它就像是动画界的瑞士军刀，功能强大又灵活。通过npm install gsap将它引入项目，或者直接在 HTML 文件中添加。

2. 创建基础场景

首先，搭建一个 Three.js 的基础舞台。创建场景、相机和渲染器，就像搭建一个空的剧场，等待演员（模型）和观众（相机）入场：

// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

3. 添加需要动画的元素

在剧场里放置一个 “演员”，比如一个正方体：

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

4. 编写补间动画

现在，让正方体这位 “舞者” 动起来！我们使用gsap来编写它的舞蹈动作：

gsap.to(cube.position, {
    x: 3, // 移动到x=3的位置
    duration: 2, // 动画持续2秒
    ease: "power2.out" // 动画的缓动效果，这里让结束时更平滑
});

上面的代码就像是给正方体下达了一个指令：在 2 秒内，以一种优雅的方式（power2.out缓动效果）移动到 x 轴为 3 的位置。你还可以组合更多属性，让动画更复杂，比如同时改变位置、旋转和缩放：

gsap.to(cube, {
    position: { x: 3, y: 2, z: 1 },
    rotation: { x: Math.PI / 2, y: Math.PI / 4 },
    scale: 2,
    duration: 3,
    ease: "elastic.out(1, 0.5)"
});

这里的正方体就像一个活泼的精灵，在 3 秒内完成移动、旋转和放大，最后还带着俏皮的弹性效果停下。

二、相机移动：带领观众探索世界

相机就是观众的眼睛，控制相机移动，就像是带着观众在虚拟世界中漫步、飞翔、穿梭。

1. 基础移动

最基础的相机移动，就是改变相机的位置属性position。比如，让相机沿着 z 轴向后退：

camera.position.z -= 1;

这就像观众往后撤了一步，看到的场景范围更大了。如果想让相机平滑移动，可以结合补间动画：

gsap.to(camera.position, {
    z: 10,
    duration: 2,
    ease: "linear"
});

这样，观众就像是坐着缓缓后退的观光车，慢慢欣赏场景的变化。

2. 轨道控制

为了让观众能更自由地探索场景，我们可以添加轨道控制器OrbitControls。它就像是一个智能导游，观众可以通过鼠标操作，围绕场景中的某个点旋转、缩放、平移相机。

首先，引入轨道控制器：

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

然后，初始化控制器：

const controls = new OrbitControls(camera, renderer.domElement);

现在，观众就能通过鼠标操作，360 度无死角地欣赏场景啦！

3. 路径动画

更炫酷的是，我们可以为相机设计一条专属的 “旅行路线”，让观众沿着精心设计的路径游览场景。这里可以使用Path和Spline来定义路径。

先创建一条路径：

const path = new THREE.CatmullRomCurve3([
    new THREE.Vector3(-5, 0, 0),
    new THREE.Vector3(0, 5, 0),
    new THREE.Vector3(5, 0, 0)
]);

这条路径就像是为相机规划的一条山间小路，从左边出发，爬到山顶，再到右边。然后，使用补间动画让相机沿着路径移动：

const points = path.getSpacedPoints(100);
let i = 0;
const animateCamera = () => {
    requestAnimationFrame(animateCamera);
    if (i < points.length) {
        camera.position.copy(points[i]);
        i++;
    }
};
animateCamera();

这样，观众就像是坐上了一辆自动驾驶的小车，沿着这条美丽的路径，欣赏 Three.js 世界里的独特风景。

三、魔法升级：让动画与移动配合无间

补间动画和相机移动并不是孤立的，将它们巧妙结合，能创造出令人惊叹的视觉效果。比如，在场景中的物体开始表演精彩动画时，相机适时地拉近镜头，聚焦关键动作；当物体完成表演，相机缓缓拉远，展示整个场景的全貌。就像电影导演一样，通过镜头和画面的配合，讲述一个引人入胜的数字故事。

在 Three.js 的魔法世界里，补间动画和相机移动的可能性是无穷无尽的。希望通过这篇教程，你已经掌握了这两大魔法的基本咒语。快去发挥你的创意，打造属于自己的动态数字奇观吧！

上面的内容展示了 Three.js 补间动画与相机移动的核心技巧。你对文章的深度、案例还有其他想法，或者想补充其他功能，都能随时告诉我。

avatar
文章
阅读
粉丝