Vue2 + Three.js 加载关键帧动画（基础教程）

Three.js 中关键帧动画（如模型的骨骼动画、位移动画等）主要依托 GLTF/GLB 格式模型（内置关键帧数据），核心通过 AnimationMixer（动画混合器）、AnimationClip（动画剪辑）、AnimationAction（动画动作）实现加载与播放。以下是基础的加载流程。

一、核心依赖（先引入必要脚本）

关键帧动画依赖 GLTFLoader（加载含动画的 GLB/GLTF 模型），需先在 HTML 中引入对应脚本（与 Three.js 版本匹配）：

<!-- Three.js 核心库（示例用0.128.0版本，保持版本统一） -->
<script src="https://unpkg.com/three@0.128.0/build/three.min.js"></script>

<!-- GLTF/GLB 加载器（加载含关键帧动画的模型） -->
<script src="https://unpkg.com/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>

二、Vue2 实例中实现关键帧动画加载（核心步骤）

1. 初始化基础变量

在 Vue 实例的 data 中声明动画相关核心对象，用于管理动画状态：

new Vue({
    el: '#app',
    data() {
        return {
            mixer: null,   // 动画混合器（核心：管理模型所有动画）
            clock: new THREE.Clock(),  // 时钟（用于计算动画时间增量）
        };
    },
    mounted() {
        // 加载模型
        this.loadModel();
    },
    methods: {
        // 步骤1.加载含关键帧动画的GLB/GLTF模型（核心加载逻辑）
        loadModel() {
            // 加载glb模型
            this.loader.load('https://threejs.org/examples/models/gltf/Flamingo.glb', (gltf) => {
                // 将模型添加到场景
                this.scene.add(gltf.scene);

                // 创建动画混合器
                this.mixer = new THREE.AnimationMixer(gltf.scene);
                this.clock = new THREE.Clock();

                //播放单个gltf.animations[0]关键帧动画
                const action = this.mixer.clipAction(gltf.animations[0]);
                action.play();//播放动画
            }
            );
        },
        
        // 步骤2：动画循环（更新动画混合器，让关键帧动画动起来）
        animate() {
            // 关键：计算时间增量（delta），更新动画混合器
            if (this.mixer) {
                const delta = this.clock.getDelta();
                this.mixer.update(delta);
            }
        }
    }
});

三、核心概念说明

1. AnimationMixer（动画混合器）：
   • 每个含动画的模型需对应一个 mixer，绑定到模型根节点（gltf.scene）；
   • 作用：管理该模型的所有关键帧动画，负责动画的时间更新。
2. AnimationClip（动画剪辑）：
   • 存储关键帧动画的核心数据（如模型骨骼的位置/旋转/缩放关键帧）；
   • 一个模型可包含多个 AnimationClip（如"走路""跑步""跳跃"），存储在 gltf.animations 数组中。
3. AnimationAction（动画动作）：
   • 由 mixer.clipAction(clip) 创建，用于控制单个动画的播放、暂停、循环等；
   • 基础方法：play()（播放）、pause()（暂停）、stop()（停止并重置）。
4. Clock（时钟）：
   • getDelta() 方法获取帧间隔时间，确保动画播放速度与帧率无关（匀速播放）。

四、基础注意事项（加载相关）

1. 模型格式：仅 GLB/GLTF 格式（含关键帧数据）可直接加载动画，其他格式（如FBX）需对应加载器（FBXLoader），逻辑类似；
2. 路径问题：
   • 本地模型需放在 Vue 项目的 public 目录下，路径以 / 开头（如 /models/animated-model.glb）；
   • 远程模型需确保服务器开启跨域允许，否则加载失败；
3. 版本匹配：GLTFLoader 版本必须与 Three.js 核心版本一致，否则会出现 mixer 未定义、动画不播放等问题；
4. 动画循环：必须在 animate() 中调用 this.mixer.update(delta)，否则动画只会停在第一帧，不会播放。

最简总结（加载关键帧动画核心流程）

1. 引入 Three.js + GLTFLoader；
2. 初始化基础场景 + 启动动画循环；
3. 用 GLTFLoader 加载含动画的 GLB/GLTF 模型；
4. 为模型创建 AnimationMixer；
5. 从 gltf.animations 提取 AnimationClip，创建 AnimationAction 并调用 play()；
6. 在动画循环中通过 mixer.update(delta) 更新动画时间。

以上是关键帧动画的纯基础加载流程，无复杂控制，仅实现"加载并播放"核心功能，是后续扩展（如切换动画、控制播放/暂停）的基础。