Three.js 3D人物漫游项目（下）

前言

在数字技术的浪潮中，三维图形渲染技术以其独特的魅力，正逐步渗透到我们生活的方方面面，从电影特效的震撼呈现到游戏世界的沉浸式体验，再到虚拟现实（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.pla