# 迈迈可视化交互模块

**Repository Path**: goforstudio/maimai-web-ui

## Basic Information

- **Project Name**: 迈迈可视化交互模块
- **Description**: 迈迈网页交互
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-05-05
- **Last Updated**: 2022-05-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 迈迈可视化交互模块

## 简介
> 本模块使用Live2D Cubism Web SDK 为基础构建。项目采用Node.js结构部署。用于提供迈迈语音助手的可视化交互。

## Live2D Cubism

> Live2D技术是将二维图片。通过添加锚点，分割为多点三角面，定义关键控制变量。对二维图片移动、扭曲、变形，产生动画以及视觉上的三维效果，实现二维平面的三维表达。是目前主流的前端交互手段。常见于网页、游戏、虚拟形象直播等场景。

> Live2D Cubism 是主流的Live2D制作工具。由Live2D Inc.公司开发，主要从事开发Live2D相关软件和服务，制作Live2D相关图形，使用Live2D制作长篇动画电影。

## 模型构建

### 获取原画

> 原画形象来源于上海散爆网络公司游戏《云图计划》人物 —— 迈迈。使用Sai绘画软件软件对其临摹。构建原始图画。

### 制作模型

> 对获取的原画素材进行拆分，获取各类关键的活动组件。

> 将制作好的活动组件导入Live2D Cubism软件，进行添加锚点、设置变形器、绑定控制器、IK等操作。

> 为创作好的模型绑定物理效果，使其效果更加好。

> 生产纹理、导出Web SDK可用的moc3文件。

### 配置动画

> 制作闲置动画、交互动画、反馈动画，以及随机播放的空闲动画。

> 配置触发器、构建动画间交互逻辑。

> 导出动画Josn文件配置文件。

### 部署项目

> 将运动档和动画脚本添加到从Live2D官网获取的Web SDK中。

> 配置SDK中的Demo文件夹中的res文件

> lappdefine.ts //定义基本的参数

> lappdelegate.ts //初始化，释放资源，事件绑定

> lapplive2dmanager.ts //模型的管理类，进行模型生成和废弃、事件的处理、模型切换。

> lappmodel.ts //模型类，定义模型的基本属性

> lappal.ts //读取文件，抽象文件数据（算是工具类）

> lappsprite.ts //动画精灵类，（学python时知道了精灵类和精灵组）

> lapptexturemanager.ts//纹理管理类,进行图像读取和管理的类

> lappview.ts //视图类，生成模型的图像被lapplive2dmanager管理

> main.ts //主程序启动程序

> touchmanager.ts //事件的管理类（比如移动鼠标，点击鼠标，触摸屏触碰等）

> 通过宝塔面板以Node.js项目发布。

### 项目参考

- https://blog.csdn.net/qq_37735413/article/details/104769280

- live2d web端加载moc3模型
  https://www.cnblogs.com/wstong/p/12874732.html