当前位置：首页 > article >正文

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

article 2024/9/23 18:03:53

本文目录

前言
最终效果
1、效果回顾
2、编写人物模型动画执行类并调用
- 2.1 代码
- 2.2 代码解读
- 2.3 实例化动画类并调用
- 2.4 效果
- - 2.4.1 休息动画
  - 2.4.2 跑步动画
  - 2.4.3 走路动画
  - 2.4.4 舞蹈1动画
  - 2.4.5 舞蹈2动画
3、键盘控制动画
- 3.1 站立休息、走、跑、舞蹈1、舞蹈2代码
- - 3.1.1 效果
- 3.2 跳跃动画
- - 3.2.1 缺陷代码
  - 3.2.2 bug效果
  - 3.2.3 优化代码
4、控制人物的正确朝向
- 4.1 代码
- 4.2 效果
5、控制人物运动
- 5.1 代码
- 5.2 效果

前言

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