在 3D 图形的世界里，动画无疑是吸引用户眼球的利器。而 Three.js，作为当下最炙手可热的 WebGL 库之一，为开发者们带来了前所未有的动画创作能力，尤其是关键帧动画，让复杂的动画效果变得触手可及。

什么是关键帧动画？

简单来说，关键帧动画就是在特定时间点设置对象的属性值（如位置、旋转、缩放等），然后在这些关键帧之间自动插值生成动画。这种动画方式犹如一个精美的舞蹈，每一个动作都精准地落在预定的时间点上，展现出无与伦比的魅力。

Three.js 的关键帧动画核心工具

要实现关键帧动画，我们需要借助 Three.js 提供的几个核心工具：

1. AnimationClip：定义动画的整体结构，就像给动画赋予了一个大纲。

2. KeyframeTrack：定义属性的关键帧序列，每一个关键帧都记录了对象在某个时间点的状态。

3. AnimationMixer：播放和管理动画，它是整个动画的指挥棒，负责将各个关键帧串联起来，呈现出流畅的动画效果。

快速实现一个关键帧动画

接下来，我将为大家展示如何用 Three.js 快速创建一个关键帧动画。首先，我们需要初始化 Three.js 的场景、相机和渲染器，然后添加一个立方体作为动画的对象。接着，我们定义立方体的位置和旋转属性的关键帧序列，并创建一个动画片段。最后，利用 AnimationMixer 播放这个动画，并通过 requestAnimationFrame 不断更新动画的状态。

在这个过程中，我们还可以添加各种动画控制选项，比如设置动画循环方式和缓动效果，使动画更加生动有趣。

扩展应用：制作互动动画

除了基本的动画效果外，我们还可以利用 Three.js 制作出更加复杂的互动动画。比如，我们可以为动画添加点击事件，触发特定的动画效果；或者为模型添加动画，使其随着时间的推移而发生变化。

完整代码示例

下面是一个完整的 Three.js 关键帧动画示例代码，你可以直接复制粘贴到你的项目中尝试运行。

import * as THREE from 'three';

// 初始化场景、相机和渲染器
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();
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 添加光源
const light = new THREE.PointLight(0xffffff, 1);
light.position.set(10, 10, 10);
scene.add(light);

camera.position.z = 5;

// 定义位置关键帧
const positionKF = new THREE.VectorKeyframeTrack('.position', [0, 1, 2], [0, 0, 0, 2, 2, 0, 0, 0, 5]);

// 定义旋转关键帧
const rotationKF = new THREE.QuaternionKeyframeTrack('.quaternion', [0, 1, 2], [
    [0, 0, 0, 1],
    [0, Math.sin(Math.PI / 4), 0, Math.cos(Math.PI / 4)],
    [0, 0, 0, 1],
    [0, 0, 0, 1]
]);

// 创建动画片段
const clip = new THREE.AnimationClip('cubeAnimation', 2, [positionKF, rotationKF]);

// 创建动画混合器
const mixer = new THREE.AnimationMixer(cube);
const action = mixer.clipAction(clip);
action.play();

// 动画更新
const clock = new THREE.Clock();
function animate() {
    requestAnimationFrame(animate);
    const delta = clock.getDelta();
    mixer.update(delta);
    renderer.render(scene, camera);
}
animate();

实际案例

假设你正在为一个产品展示网站设计动画，使用关键帧动画可以轻松实现以下效果：

1. 产品模型的旋转展示：让产品模型在页面上缓缓旋转，展示其各个角度的美感。

2. 不同配件的动态组合效果：当用户点击某个配件时，其他配件会动态地移动到指定位置，呈现出丰富的交互体验。

3. 点击按钮触发特定动画：比如点击一个按钮，立方体会爆炸拆解，展现出强烈的视觉冲击力。

通过 Three.js 的关键帧动画工具，你只需要设置好关键帧，剩下的工作交给 Three.js 完成！

总结

Three.js 的关键帧动画为 WebGL 动画开发者提供了强大的工具。通过 AnimationClip 和 KeyframeTrack，你可以轻松实现从简单到复杂的动画效果，无论是位置变换、旋转动画，还是颜色渐变。结合实际项目需求，Three.js 能够帮助你快速构建高质量的交互式 3D 动画。

如果你对这篇文章感兴趣，不妨分享给更多朋友！让我们一起探索 Three.js 的无限魅力，打造炫酷的 3D 世界！

互动环节

现在轮到你啦！快来尝试使用 Three.js 创建一个自己的关键帧动画吧！在评论区分享你的作品和心得，让我们一起交流学习！

关注我们

如果你想了解更多关于 Three.js 和 3D 技术的干货内容，记得关注我哦！我会定期更新最新的技术动态和实战案例，助你提升前端和 Web3D 开发的技能水平。