更换Live2D模型具体步骤

（具体情况有差异，文章仅供思路参考）

项目介绍

我的后端来自fay数字人，https://gitee.com/xszyou/fay

前端来自https://gitee.com/garveyer/mate-human，有自带的数字人形象，但是本篇文章重点讲如何替换成其他Live2D形象

我的后端来自fay数字人，所以对Live2D文件格式有严格要求。下面图片是readme内容，因此我的文件必须按照目录结构实例存放。

前期准备

首先在mate-human\CubismSdkForWeb-5-r.4\Samples\Resources目录下新建文件夹MyModel,格式要求如图：

在expressions文件夹里面，修改文件名字为F01,F02.....这是因为后端固定只识别 F01、F02、F03、F04 这几个名字去调用表情，（从mate-human的Live2D 模型制作外包规范md中得知的），所以需要根据本项目更改这些文件名字。

与此同时，需要更改MyModel.model3.json中的映射文件，原本是没有改expressions里面的文件名字，如下图：

改后如图：

修改模型路径

找到lappdefine.ts（一般会在src下面）这个文件包含Live2D最重要的信息，比如引用的模型名称

复制代码

export const ModelDir: string[] = [
  'Haru'
];

模型面板背景

复制代码

export const BackImageName = 'nokia_reception_desk.png';

刚好我来介绍一下我的项目里面src都会包含哪些文件

javascript 复制代码

TypeScript
└── Demo
    └── src/
        ├─ lappdefine.ts          # 【文件1：改模型目录路径】
        ├─ live2d-action-map.ts   # 【文件2：动作&表情映射表】
        ├─ lapplive2dmanager.ts   # Live2D模型加载核心管理器
        ├─ fayclient.ts           # 和Fay后端WebSocket通信
        ├─ lipsync.ts             # 口型同步核心文件
        └─ main.ts                # 程序入口

动作映射

这一部分最为复杂，所以我先尝试着将所有动作表清空，如图所示目录

将这个文件里面的代码修改为这个：

javascript 复制代码

{
	"Version": 3,
	"FileReferences": {
		"Moc": "MyModel.moc3",
		"Textures": [
			"MyModel.2048/texture_00.png"
		],
		"Physics": "MyModel.physics3.json",
		"DisplayInfo": "MyModel.cdi3.json",
		"Expressions": [],
		"Motions": {
			
		}
	},
	"Groups": [
		{
			"Target": "Parameter",
			"Name": "EyeBlink",
			"Ids": ["ParamEyeLOpen","ParamEyeROpen"]
		},
		{
			"Target": "Parameter",
			"Name": "LipSync",
			"Ids": ["ParamMouthOpenY"]
		}
	],
	"HitAreas": []
}

可以运行显示出来人物形象，但是完全没有相关动作映射

我们一步步引入动作：

(这一块需要一个动作一个动作引入，否则人物显示不出来也找不到问题出在哪里)

在下面这个文件中的"Expressions": []引入

之后要在映射表里添加映射

补充说明：smile,warm,neutral都是后端的部分，用于连接前后端内容，在后端项目fay/config里面，是一个excle表格

然后查看前端页面有没有人物形象

成功出现抱猫咪的剪纸人。

总结

1.Live2D 模型接入时：

先清空所有额外表情动作，只保留模型本体（moc3、贴图、物理文件），人物显示无报错后，再逐个追加表情、动作，出现报错能瞬间定位问题来源

2.关于 <!DOCTYPE> JSON 报错

只要报这个错，100% 是 SDK 请求的资源文件 404：要么路径写错、要么文件不存在、要么文件本身损坏非法，优先排查文件有效性，再排查路径。

以上就是实现思路，感谢观看。