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

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

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

这个东西早几个月就想着要做了，最近才抽出空来把他做完，惭愧。

边上课边做这个东西，大概花了半个多月的时间吧，这半个多月里我把网上有关live2d加到网页里的博客、项目都大致上看了一下，大致分成两大类：老版的文件格式moc和新版的文件格式moc3，据我目前找到的资料来看，两种文件格式有比较大的差别，也就是说，你用显示moc文件的技术来显示moc3文件的话，就会显示不出来，反之亦然，所以你要先确定好你的模型格式，再来选择相应的技术，不然就是白做功（比如我）。

下面是老版和新版模型文件结构之间的区别说明：

图一 老版模型文件构成

图二 新版模型文件构成

moc文件只能由Live2D Cubism Editor 3.x及更低版本导出，最新的4.0版本已经不支持导出moc文件格式了。

我最开始找到的在网站上加入live2d的技术就是moc格式的，moc文件格式因为出的比较早，网上相关的教程有很多，而且GitHub上还有很多大佬们自己写的项目，用来扩展一些功能之类的，但是我在网上找到那些项目都是用的官方给的示例模型文件，或者是从某个游戏里扒下来的模型，没有讲自制模型的，我弄了一个多星期，最后因为实在搞不定模型的眼球跟随鼠标自动转动就放弃了。下面我贴一些那时候找到的一些比较好的博客和项目地址。

moc格式：

https://blog.csdn.net/cungudafa/article/details/104282643 Hexo（sakura）添加live2d看板动画（可对话，换装互动）

https://www.zhangxinxu.com/wordpress/2018/05/live2d-web-webgl-js/ 二次元live2d看板娘效果中的web前端技术

https://www.cnblogs.com/163yun/p/9773786.html 纯干货！live2d动画制作简述以及踩坑

https://www.fghrsh.net/post/123.html 网页添加 Live2D 看板娘

moc3格式：

https://www.bilibili.com/video/BV17A411x7SA​ 【Live2D】15分钟学会如何制作一个网页动态看板娘 官方原生SDK开发

https://blog.csdn.net/weixin_44128558/article/details/104792345 笔记：live2d4.0 sdk 博客园网页动画

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

https://www.bilibili.com/read/cv4812803​ 给你的网站加上Live2D看板娘(上)

https://www.bilibili.com/read/cv4890730​ 给你的网站加上Live2D看板娘（下）

如果你只需要引用网上传播的live2d模型资源的话，用上述几个网站链接就能解决你的问题了，如果你的需求和我一样比较复杂，那就接着往下看。

我最后用的是moc3格式文件和官方原生SDK开发，因为我也只是一个小白，在跟着大佬们的步骤走的时候遇到了很多问题，所以我之后写的步骤会尽量详细，甚至啰嗦（反正大概率是之后自己看，应该没这么多人的要求和我一样复杂）。@本物品请放置在熊孩子抓不到的地方​

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