本期主要讲如何根据已有的人物模型文件来修改官方Demo。
上期链接：
根据上期的教程，想必各位小伙伴差不多能看到官方提供的人物模型了。接下来就该把官方的Demo调教成适合自己用的了。
接下来的的调试和测试都是基于官方人物模型，等测试通过后再进行自定义人物模型测试。
接下来我们先了解一下主要文件的大致作用：
1.1. 接下来要涉及到的文件
#src 目录下的文件
1. Demo\src\lappdefine.ts //主要用来改变加载的模型文件
2. Demo\src\lappdelegate.ts //这个文件比较重要，将网页的各种事件传递给模型加载器，负责人机交互的功能
3. Demo\src\lappview.ts 主要是将鼠标坐标转为模型核心驱动需要的坐标的，也可以对一些事件进行更有针对性的定制
1.2. 修改源文件
demo中的模型占据了整个网页正中央，而且右上角还带有齿轮切换标志，直接作为看板娘是肯定不行的啦，下面来说一下如何去掉背景图片和齿轮图案。我们找到Sample\TypeScript\Demo\src\lappview.ts文件，定位至以下位置，将我们不需要的功能注释掉。
注释掉红框内的内容
禁用模型切换功能
接下来在Sample\TypeScript\Demo\src\lappdelegate.ts 文件的initialize()函数内添加以下内容：
// 这里需要将原来的canvas的赋值语句替换成下方的
canvas = <HTMLCanvasElement>document.getElementById("live2d");
//添加以下内容到函数体
//页面鼠标移动事件监听，抛弃SDK提供的点击移动事件
document.addEventListener("mousemove",function(e){
if(!LAppDelegate.getInstance()._view)
{
LAppPal.printLog("view notfound");
return;
}
let rect =document.getElementById("live2d").getBoundingClientRect();
let posX: number = e.clientX -rect.left;
let posY: number = e.clientY - rect.top ;
// console.log("onMouseMoved: gate文件中posY值为： 【"+posY+"】 canvas的top距离为："+rect.top);
LAppDelegate.getInstance()._view.onTouchesMoved(posX, posY);
},false);
//在这里加上鼠标离开浏览器后，一切归位
document.addEventListener("mouseout",function(e){
//鼠标离开document后，将其位置置为（0，0）
let live2DManager: LAppLive2DManager = LAppLive2DManager.getInstance();
live2DManager.onDrag(0.0, 0.0);
},false);
1.3.页面布局方式修改
布局方式是复制的Github上的：https://github.com/galnetwen/Live2D
使用方法：
项目下载下来后我们首先把live2d文件夹拷贝到我们的项目中，并把该文件夹里的js/live2d.js（这个其实就是我们编译后的index.js ）文件删除
接下来用文本编辑器打开demo.html将相关css和js内容引入到我们项目中的html页面内
按图中的进行拷贝
拷贝到自己的html页面后一定要注意路径问题。
经过上面的操作把显示人物模型的呈现效果和交互方式整成我们想要的
1. 4 设置模型在canvas中的放大倍率
有时候人物虽然加载出来了，但会感觉和显示框不搭，这时候可以放大或缩小模型显示倍率进而改善观感。 打开Framework\math\cubismmodelmatrix.ts文件
/**
* 横幅を設定
* @param w 横幅
*/
public setWidth(w: number): void
{
const scaleX: number = w / this._width;
const scaleY: number = scaleX;
//这里是可以手动设置横向的放大倍率
this.scale(scaleX*2, scaleY*2);
}
/**
* 縦幅を設定
* @param h 縦幅
*/
public setHeight(h: number): void{
const scaleX: number = h / this._height;
const scaleY: number = scaleX;
//这里是可以手动设置纵向的放大倍率
this.scale(scaleX*2, scaleY*2);
}
2.自定义人物模型配置
准备工作：
首先我们要认识一下各个文件的作用，进而去进行自定义出我们想要的效果。
模型文件目录结构
一般都是这种构成，最主要的是motions（动作文件）、textures（贴图）、moc3文件（人物模型文件）、model3.json文件(资源加载管理文件，相当于程序的入口)。我们在进行自定义时，只能修改
json结尾的文件。
首先是model3.json文件：
model文件配置项
其次是motions/xxx.motion3.json文件
模型动作的配置文件
2.1导入自己的模型文件
1.moc3文件的文件名必须和其文件夹名相同
2.如果感觉自己配置没啥问题的话，仍然加载不出来模型，可以通过浏览器的开发者工具来监控网络请求，看下载链接是否请求是否 被提示【HTTP响应截断】，如果有的话，只能放弃了，再换个模型文件（web前端技术以及live2D都是超级小白，只能放弃这个模型了）
3.进行一些编辑后不要不开服务器直接在本机预览，不然会啥都没有。因为浏览器安全问题，配置文件只能通过网络请求来进行加载，如果直接本地请求的话会报同源策略错误
4.如果是游戏中或者其他方式提取出来的素材，正常软件打开没问题，放到web里面会加载不了，又排除了上面的问题，原因大部分是因为motion文件夹xxx.motion3.json文件中的TotalSegmentcount 和TotalPoints数量不足，将数值改大点就行。
2.2源码配置文件修改
修改配置文件需要模型和官方源码比对来进行修改
将我们自己弄的人物模型使用Cubism 3 Viewer打开 xxx.model3.json文件，然后在左边框找到moc3文件，边会出现各种参数以及一条线段。同时，打开项目中的【Framework\cubismdefaultparameterid.ts】文件，找到第二行注释下边的内容。
我们要做的是根据源码常量（黄色方框内）的意思，去与moc3（黑色方框内）文件的参数进行匹配进而去修改常量的赋值语句。如果意思上不匹配，那就以常量意思为准，去拖动黑色方框内各个参数的属性值（黑框右边），进而确定哪个参数改变时，人物模型有动作的相应部位或者动作的英文意思符合常量的值，然后按照对应关系修改即可。有些参数并无实际的英文意思，例如 AngleX，AngleY和AngleZ这三个，这三个参数一般是头或者身体扭动（不改变该部位的中心位置，例如头部的只是扭头），上下动和左右动（改变相应部位的中心位置，例如头部是以颈部为圆心动）
我们要修改的一般就是：AngleX,Y,Z，头部，身体和眼珠，因为跟随鼠标这个交互一般只涉及这几项。
这里修改完毕后，导入我们的模型文件（记得xxx.model3.json文件的名字一定要与文件夹名字一样），再次编译项目应该就能观察到人物模型已经可以进行鼠标交互了。
仅仅是鼠标移动方面的交互肯定不满足我们的需求哒，不能点怎么能行。
想要有点击事件，一定要先在model3.json文件中添加"TapBody"数组和相应的动作文件，配置方法参照官方或者上面的相应json文件
打开【Sample\TypeScript\Demo\src\lapplive2dmanager.ts】找到onTap函数
添加相关代码
添加完毕后，再次编译测试，应该就能对点击事件进行交互了。
这时你应该会发现，你的人物头部跟随鼠标时有点鬼畜，下面是一种解决办法
找到【Sample\TypeScript\Demo\src\lappmodel.ts】文件的update函数
至此教程全部完结，能力有限，只能修改到这种地步，不过当看板娘问题应该不大（个人觉得）
感谢各位的支持！
参考：
https://github.com/galnetwen/Live2D
https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02/
https://www.perfare.net/1564.html
http://live2d.pavostudio.com/doc/zh-cn/live2d/model-json-example/
