本文中所用立绘是B站vup：@尤利娅Yulia​，请为这位唱歌超级好听的塞壬美女点一个关注吧！欧内盖伊！

本文中所用的live2d立绘由@柒玖七九799​绘制~

Live2d看板娘效果演示demo：www.yulia.love

看本文前先确保你满足以下条件：

1.有Visual Studio Code这个编译器并且会使用

2.电脑上有node.js环境，并能正常工作

3.会使用yarn或者npm等命令

4.有一丢丢的node.js经验，啥也不懂的话容易出错，而且难找出错的地方

关于SDK代码的修改，https://blog.csdn.net/weixin_44128558/article/details/104792345 跟着这个博客走就行了，B站上放代码复制也不方便，我就不去原模原样的搬过来了，但是他那个博客里的代码有一点点小问题，其实也说不上是有问题，我怀疑是由于官方的SDK版本在不断的更新，有极少部分的变量名发生了修改，导致和作者的代码有部分对不上，为防止我之后忘记，我还是记录一下吧。

1、在复制index.html文件的代码时你会发现，他的文件引入方式和我们官方项目中的文件引入方式不太一样，这个引入方式是flask框架特有的引入方式，放到官方的项目中后我们要将这个引入地址改成我们项目中的实际文件地址。

2、在修改文件引入地址的时候你会发现，我们的项目中缺少了live2d.css、jquery.js和message.js三个文件，其中message.js这个文件的代码，作者有在博客中提供，但是其他两个文件的代码没有在博客正文里写出来，但是他在博客的最后放了自己项目的百度云链接，我们可以从项目里拿到这几个文件。

从百度云链接里下载这个压缩包，解压后打开

复制图中红框圈中的文件夹，将其放到我们项目的demo文件夹下面

复制完之后的文件结构如上图所示，我们删掉文件夹中的bundle.js文件，因为他是已经编译过的文件，我们不好对里面的内容进行修改。然后我们将index.html文件中需要修改的参数都改完，效果图如下所示：

3、你在修改lAppdelegate.ts文件中的initialize()函数时，会报两个错误：找不到名称“fui_eye”，这是因为这个变量没有声明导致的，只要在第一次出现这个变量的那行代码最前面加上“const”就行。

4、在你修改lAppdelegate.ts文件里的initializeCubism()函数的时候，会报两个错误：找不到名称“Csm_CubismFramework”，我研究了一下发现，应该是因为我们用的这个SDK版本比作者的更新，而官方在更新的时候改了这个函数的名字，所以报错了，解决的办法也很简单，把报错的那两个Csm_CubismFramework改成CubismFramework即可。

5、注意作者博客中的下面这段代码不要复制到我们的项目中，不然会出错

改完之后输入指令yarn start运行项目（确保自己的终端显示路径在demo目录下），如果不出意外，应该是这样的效果。

接下来就是要把我们自制的live2d放进去了（live2d的制作我在这里就不说了，B站上有很多的教程，就是要注意，在制作live2d时，参数那栏的滑竿，能用官方提供的就用官方提供的，不然像眼球追踪或者呼吸之类的动作就可能出问题，还有就是如果你导入模型之后发现有部分模型图片不显示的话，可能是因为在制作live2d的软件里，你把一些部件放在了文件夹里，只要把那些部件从文件夹里移出来，应该就没有问题了，关于如何给live2d添加点击动作，我单开一个专栏讲）。

在Samples\TypeScript\Demo\static\live2d\model目录下新建一个文件夹用来存放自己制作的模型文件，文件夹名字必须要和模型导出时的名字一样，并且最好不要用中文。

将自己制作的模型的所有文件都复制到这个文件夹里。

再在index.html文件里的指定需要加载的模型那一行里加上自己模型的名字。

刷新网页，没意外的话，模型就会显示在网页上了

接下来就是我用到过的修改模型位置，大小和其他样式的地方，以及我在修改过程中遇到的问题。

首先是修改模型的大小，不是指画布的大小，画布大小可以在index.html文件中修改，很简单，也有注释，我就不演示了，我这里要修改的是模型在画布中的占比大小。

修改这个大小的地方在项目下的Framework\src\math\cubismmodelmatrix.ts中，找到this.setHeight(2.0)这个函数，里面的数字就代表着模型在画布中的占比，修改里面的数字就可以修改模型在画布中的大小，这里我把他改成2.5。

刷新网页后你就会发现你的模型变大了一点。

接下来是改变模型在网页中的位置，这个简单，只需要找到live2d.css文件，将.live2d-main选择器下面的left: 0;改成right: 0;即可。

刷新网页后，人物模型就来到了右边（想要其他样式的话自己改css样式表就行了）。

将模型位置改变之后我又发现了一个问题，模型的自动视线追踪出了问题（具体什么问题你们可以自己测试得知），看了一下博客大佬的代码发现，是这个地方设置的自动视线追踪功能。

然后经过“亿点点”的研究和测试，我找到了感觉最合适的代码。

然后！在我改完这里之后我又发现了一个大问题！我发现我点击模型后他不会显示动作了，一开始我还以为是我的模型动作或者是json文件没设置对，搞了好几天！后来我实在不行了，试了一下官方提供的模型，发现竟然也不能正常点击显示动作，我才知道原来不是模型的问题。

然后又经过“亿点点”的研究，我找到了点击函数的位置，刚好就在上图中移动鼠标函数的下面，也就是这个地方。

找到之后我想，我也没改过这个地方的代码呀，而且他这个坐标也是单独获取的呀，又不和其他函数有关联，怎么会影响到这个函数呢，然后又经过“亿点点”的测试，我发现他竟然是被上面自动视线追踪功能给影响的（我吐了），而罪魁祸首就是【LAppDelegate.getInstance()._view.onTouchesMoved(posX, posY);】这行代码，只要把视线追踪函数里的这行代码复制到点击函数的实际执行函数的上面，点击事件就又会正常了。

这样，样式我就差不多设置完了，接下来就是要把这个live2d移植到我们已有的项目中去了。

最后！点个关注吧！-> @尤利娅Yulia​