重要声明

  • 首先这里要声明一下，因为Cubism 3的core文件的特殊性，即Cubism 3的live2dcubismcore文件，不管是TypeScript或者JavaScript文件是无法分发的，所以，不能够将其放在其他分发平台，github这样的平台也不行，下面是一个曾经违反了许可的github仓库的issue：
  • 所以，的确很少能够在个人博客等网页上展示作品；其次是Cubism 3模型和Cubism 2模型的文件结构变化，也导致不能向下兼容；最后，我不允许将我页面里的live2dcubismcore.min.js下载后发布到分发平台，我博客中使用的live2dcubismcore.min.js文件只能在我的博客中使用，如果你需要live2dcubismcore.min.js资源，请从live2d官网: https://live2d.github.io 下载Cubism SDK for Web。如果无法访问，这就要自己想办法了，这个SDK是不允许再分发的。我清楚js文件是可以通过浏览器保存的，所以，请遵照License中的内容，不要保存本页面的live2dcubismcore.min.js ，去官网下载，如果使用了我博客中的live2dcubismcore.min.js，带来的任何后果，我无法负责。

准备工作

  • 反向代理工具，或web容器
    这里我推荐使用Nginx或者tomcat，当然，Apache也可以，如果你电脑上木得Java，而且如果是不太懂编程，就是想看看如何实现的话，折腾一下Nginx实现也可以，或者说，以上的工具都不懂，那就看看就好
  • hosts修改
    由于在演示中使用了AJAX发送请求获取模型数据，且pixi.js加载模型数据也是通过AJAX来实现的，所以如果本机调试的话，要自己定义一个地址，那么修改hosts就好了
  • 浏览器开启硬件加速
    这个挺重要的，因为pixi加载模型为了提供更细致化的模型使用了WebGL技术，该技术是基于openGL在网页上的实现，所以，如果不开启引进加速，模型质量会有所下降

开发起因

其实开发这个的开端是我贪玩碧蓝航线，然后无聊上班查资料，翻到别人的blog，发现大佬们的live2d挺好玩的，然后查了很多资料，也根据大佬们提供的材料自己实现过，其实这里就发现大佬们的材料都是直接丢到服务器上页面展示的，本地调试具体的细节没有介绍，所以我上面提到web容器的原因。但是，我想到自己贪玩碧蓝的时候，里面很多live2d模型挺好看的，也想拿出来展示（这里小声一说，都是有版权的，所以这里还是不可避免的打个广告）碧蓝航线:https://game.bilibili.com/blhx/ 欢迎大家去贪玩。
在我使用之前，我也看过相关的博客，比方说"猫与向日葵" : https://imjad.cn/ 写的 "给博客添加能动的看板娘(Live2D)-模型格式v3转v2" https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-03 一文中，把V3转为V2，我也下载过通过下文提到的 "P大" https://github.com/Perfare 的代码转换出来的模型进行向下转换，可惜，也许是不会用软件，也许是，真的碧蓝航线里面的模型太大，导致free版是无法执行导入模型命令的，只能预览。最后我放弃了这个转换的思路，开始了开发过程。

过程

  1. 获取模型数据
    获取Cubism 3的模型的途径很多，不光上面提到的碧蓝航线，还要少女前线等，都有Cubism 3的模型。我是通过"P大"的 AzurLaneLive2DExtract : https://github.com/Perfare/AzurLaneLive2DExtract 工具将碧蓝航线的模型提取出来的。
    得到moc3和json数据后，就可以进行下一步了。
  2. 在WordPress页面上实现
    做到这我也发现，不好实现啊，其实你已经注意到我上面所说的，因为Cubism 2模型和Cubism 3模型的文件结构不同，导致Cubism 3的模型是没法通过现有的Cubism 2的js代码在页面上实现，这就让我之前找到那些代码完全没用了，重新去开发，对我来说不太可能，毕竟，还要上班，晚上又要贪玩碧蓝，这可如何是好？
    我又在github上翻代码，忽然一个标题吸引了我 CubismWordPressPlugin : https://github.com/Live2D/CubismWordPressPlugin ，这不就刚好是我这个blog的框架吗？我好奇的点进去开始了入坑第一步。

CubismWordPressPlugin

  1. CubismWordPressPlugin项目
    这个插件是可以直接丢到WordPress的plugins文件夹下使用的，项目里面包含了2个免费的模型，以及动作，live2D公司在Cubism 3代中重新定义了许可证的内容，这个项目里面就包含了两个重要的许可证
  • Live2D Proprietary Software License
  • Live2D Open Software License
    这两个许可证最重要的一个区别就在于，Live2D Proprietary Software License中提到，不允许对文件进行分发，分发的具体定义，可以google一下，所以，在我翻阅官方的github的时候，就有一些没有仔细看License的用户发布live2d官方的core文件而被官方在issue里面回复要求删除分发文件的。
    而且这两个License都有同一个要求，不能修改。
  1. 项目文件结构
    • live2d.php
      插件本体
    • js/live2dcubismframework.js
      根据文件名，这个就是渲染Cubism 3模型的js文件
    • js/live2dcubismpixi.js
      通过pixi加载Cubism 3模型的js，所以这里需要用到pixi.js
    • js/pixiWordPressPlugin.js
      和插件相支持，加载本地assets文件夹内的模型
    • assets
      模型文件夹
  2. 实现
    这里将项目下live2d文件夹放在WordPress的plugins文件夹下，在后台插件列表里找到

    ，在后头能看到下面的图标

    点击进入
    就看到里面已经预先填好了如下图

    根据提示修改就好，额具体注意的会在我调整的部分详细说明，这里要说明一点，和之前的加载方式不同的是，这个插件的加载是在任意标签下添加一个canvas的节点，所以，下图中attach tag就很重要。

    在pixiWordPressPlugin.js中可以看到，获取这个目标标签的代码段为

    ```var canvas = document.querySelector(attach_tag);```
    由于使用了`querySelector`来获取，所以，传入参数可以是id名，可以是class名。
    最后调整模型位置和比例
    [![](https://himehane.club/wp-content/uploads/2018/12/image-3.png)](https://himehane.club/wp-content/uploads/2018/12/image-3.png)
    这样就完成了。

  3. 修改实现碧蓝航线模型
    上面刚提到，CubismWordPressPlugin项目下有两个License，我起初没有仔细看就开始修改了，由于有些模型有6个文件路径，CubismWordPressPlugin项目只有3个路径可以修改，所以，只能添加，而pixiWordPressPlugin.js里也定义死了3个模型路径，所以，其实最后的限制是，如果你想只用这个插件就实现，那么你需要的是找一个模型文件小于3个的，就可以了。而对于通用来说，不建议这样实现，因为是死的3个。况且这样会修改pixiWordPressPlugin.js这个文件，这个文件是不允许修改的，所以，我最后删除了这个插件，转而研究如何通用。

通用化

方便和waifu-tips.js整合

首先之前通过改文件发现其实这里我需要加载到模型进行渲染就行，而pixiWordPressPlugin.js中恰好就包含了加载和渲染，以及事件绑定。
那接下来就简单了，根据pixiWordPressPlugin.js中的相关方法，改造后就得到我项目中的loadModel.js。
- loadModel.js
这个文件是加载模型渲染模型的js文件，其中很重要的地方

var LIVE2DCUBISMCORE = Live2DCubismCore

这一段的作用，因为live2dcubismcore.js里面使用的对象名为Live2DCubismCore，而live2dcubismframework.js，live2dcubismpixi.js的对象都使用全大写风格，所以，在不修改这些文件的前提下，将core中的对象和其他js文件中的对象统一。
而我发现，其实之前插件是添加canvas节点来渲染页面的，为了能和之前的waifu-tips.js绑定点击等时间作融合，就不能通过增加节点，或许可以将时间绑定到canvas外层的div，但是，这样和之前一个项目 "live2d_demo" : https://github.com/fghrsh/live2d_demo 中的绑定方法不一致，这样耦合性不强，为了解开这种耦合，即出去绑定这种事件也能使用的原则，我研究了一下pixi.js的源码，发现另外一种渲染方式是可以在原有的canvas上实现的即：

@param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional

view字段代表的就是现有的canvas节点，所以，就使用:

var app = new PIXI.Application(modelWidth, modelHight, {transparent: true ,view: view});

这样的改造完成了在canvas存在时进行渲染，从而同步绑定waifu-tips.js里的事件。

多模型加载

在我写完第一版代码后，有位热心的网友Spirit留言说自己在尝试添加多模型出现问题，正好白天可以摸鱼，着手赶快研究了一下，增加随机多模型切换加载，当然可以修改成传参指定切换模型。
重复加载会遇到moc文件重复报错，但其他文件是不会冲突的，所以，就按照Spirit所说，执行

PIXI.loader.reset();

将loader内的内容都清除了，但这样还不够，Spirit说加载到3个会有问题，这个我发现了，其实，是没有执行

PIXI.utils.destroyTextureCache();

这样，就能重复加载新的模型进入了，可是这样直接重复调用loadModel();浏览器会报警告，警告是黄色文字，虽然不影响正常运行，但是，强迫症看着烦，而Spirit说需要app.stage.removeChild()这样会删除DOM节点，其实不用，警告文字是缓冲警告，想了一下是不是因为正在渲染的问题，最后找到解决办法，在全局定义app后，第二次加载，app就不为空了，那么只需要执行

app.stop();

停止渲染就解决了缓冲警告，浏览器不会再报警告，可以多个模型进行加载。

不过要注意的是，现在还没找到好的方法解决其他数组的内存占用，导致如果多次调用加载模型，会造成更多无用的数组加入浏览器内存，导致浏览器性能有所下降，如果在博客里频繁加载，本来博客做得有点炫酷的，内存就占用很高，再加载多次，可能会导致浏览者的浏览体验下降，浏览器滚动卡顿。

先写到这，其实看到这差不多也能够自己实现了，loadMoldel.js里面注释很多，可以参考注释修改参数就行。

我的github项目"live2d_on_website" : https://github.com/Himehane/live2d_on_website 如果打算学习了解，可以去克隆下来看看，前提是要确保你本地有sdk的js文件。

由于网站内容审查需要，我删除了跳转链接，关闭评论功能，如果对代码当中存在的问题可以移步我的github项目下留言，或者邮件联系我。（2020年更新）

注意事项

注意License中的内容

我之所以再三强调，原因就是因为License中的限制，而我网页中自己使用这个js文件是征求live2d在github上的成员确认后才放在自己的服务器上的，并且我声明了，我不会再分发这个js文件，如果你也想在自己的网页中使用，请征求live2d的同意后再使用，请充分阅读Live2D Proprietary Software License和 Live2D Open Software License的相关内容。

模型的版权问题

这也是我非常注意的，毕竟现在版权问题很重要，如果使用了他人版权的内容，最好声明其版权信息，如果对方不允许使用，请遵照对方要求，将内容移除，这也是对开发者的尊重。

鸣谢

感谢各位大佬看这篇博客，可能这个博客写的有点乱，我也会在后期阅读的时候不断修改更新

感谢live2d在github上的员工耐心解答对core文件的使用方法

感谢封面作者 : AO凹君@睡眠不足です (https://www.pixiv.net/member.php?id=1248744)的图片：❀(https://www.pixiv.net/member_illust.php?mode=medium&illust_id=72995338)

Never give up!