前言

在数字技术的浪潮中，三维图形渲染技术以其独特的魅力，正逐步渗透到我们生活的方方面面，从电影特效的震撼呈现到游戏世界的沉浸式体验，再到虚拟现实（VR）与增强现实（AR）技术的蓬勃发展，三维图形技术无疑成为了连接现实与虚拟世界的桥梁。而在这众多技术中，Three.js作为一款轻量级、易于上手且功能强大的JavaScript 3D库，凭借其跨平台、高性能的特点，成为了前端开发者探索三维世界的重要工具。本文章基于Three.js 3D人物漫游项目（上）与Three.js 3D人物漫游项目（中）基础上将完成键盘控制人物的动画以及运动。本文已绑定整个项目压缩包，下载解压后直接运行命令yarn serve，网页访问http://localhost:8080/roam3D/index.html即可一键查看项目，也可自行修改源码或人物模型，满足自己的项目。

最终效果

1、效果回顾

我们在之前已经有了如下的效果：

我们将在此效果上完成人物的动画及运动效果。

---

2、编写人物模型动画执行类并调用

2.1 代码

我们在src文件目录下新建customAnimations.js，新建动画类，写入如下代码：

import { AnimationMixer } from "three";export default class ModelAnimation {constructor(model, animations) {this.mixer = new AnimationMixer(model);this.animations = animations;this.actionObject = {}; // 动画对象this.currentAction = null; // 当前动画this.previousAction = null; // 上一个动画}start(name) {this.actionInit(name);}actionInit(name) {this.animations.forEach((clip) => {console.log(clip)const action = this.mixer.clipAction(clip);this.actionObject[clip.name] = action; // 将动画以命名为健 值为对的方式存储});console.log(this.actionObject);this.currentAction = this.actionObject[name];console.log(this.currentAction);this.currentAction.play(