JianchengWang

萌萌哒的看板娘，以下资源来源于互联网，最底下会给出相关链接，github示例

使用方法 moc

Hexo

# 进入hexo根目录
cd hexo-dir
# 安装hexo-helper-live2d
npm install --save hexo-helper-live2d
# 创建目录live2d_models
mkdir live2d_models
# 把模型文件放进创建目录live2d_models，比如我这边下载的是index模型
cd live2d_models && wget index 
#重命名模型文件中的json文件，比如我下载的模型是index，所以model.json -> index.model.json
cd index 
mv model.json index.model.json
# 修改配置文件
vim hexo-dir/_config.yml 
live2d:
   enable: true # 是否开启live2d
   scriptFrom: local # 脚本从本地引入
   pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
   pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
   pluginModelPath: assets/ # 模型文件相对与插件根目录路径
   tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
   debug: false # 调试, 是否在控制台输出日志
   model:
       use: index # 填写放进live2d_models文件夹中的模型文件夹名字
       scale: 1 # canvas 模型与canvas的缩放
   display:
       width: 150 # 宽度
       height: 300 # 高度
       position: left # 显示位置
       hOffset: 0 #水平偏移
       vOffset: -20 #垂直偏移
   mobile:
       show: true # 手机端是否显示
       scale: 0.5 # 移动设备上的缩放

Typecho

下载保罗的看板娘插件，并上传到你的插件目录（一般为 usr/plugins）。进入你的网站后台，在顶部的“控制台”下找到“插件” -> Pio -> 启用。启用之后我们就可以开始设置啦！

引用模型

插件默认提供两种方式引用模型，一个是读取插件指定目录下的模型，还有一个是另外引用。对于新手，我们比较推荐放在插件目录的 model 文件夹下。只要你在本站下载模型，都已经为这个插件专门做过一定的优化处理啦。

显示不全？

待我们放好模型之后可能会发现，模型显示不太齐全。这是由于高宽度设置不正确导致的~ 由于插件默认的模型是 Pio，而其他模型的比例和它不同，所以我们就需要在插件目录下手动设置它的宽度和高度啦！这样我们的模型就能正常显示出来了！

遮住内容？

如果你用的主题默认在左侧有侧边栏，发现模型遮住了菜单，那么我们就可以在插件设置里面修改它的位置，这样就可以遮住你的内容啦！

更多介绍详见：给你的博客增加动态看板娘

EmLog

详见广树的文章 - 博客通用版 Live2D 伊斯特瓦尔发布

其他平台

其他平台可以通过修改插件或是修改模板的方式引用看板娘。这里的方法适用于 WordPress、EMLog、Z-Blog 甚至是静态网站。

保罗的插件文档里已经提供了完整的独立版使用教程，你可以在不使用插件的情况下正常食用看板娘。以下方法仅简单引用了看板娘，但并不包含交互功能。

下载来自玩水大佬的封装项目，我们会在 src/lib 目录下得到一个 live2d.min.js 。这个就是核心啦！

然后在你的网页上添加一个 canvas 画布，一般放在 footer.php 即页尾文件里面。一般写成这样：

<canvas id="paul" width="280" height="250"></canvas>

其中 id 部分负责让脚本获得画布的位置，width 和 height 分别是宽度和高度，在这里设置你的模型宽高。

然后我们就需要引用这个 JS 文件啦！方法也很简单，你把这个文件放在合适的位置，或是用 CDN 引用皆可。

<script src="live2d.min.js"></script>

注意：要确认画布放在 <script> 的前面！

接着我们再通过一段简单的代码来开始引用我们的模型：

<script>loadlive2d('paul', '模型路径/model.json');</script>

这样我们的网站上，就显示出自己的看板娘啦！

细心的你肯定会发现，看板娘被放在了正常的位置显示了出来，而不是 “悬挂” 在页面的某个位置。我们通过添加一段简单的 CSS 就可以做到了！

#paul{
    left: 0;
    bottom: 0;
    z-index: 520; /* 如果模型被遮住可以把它改的更大 */
    position: fixed;
    pointer-events: none; /* 防止遮住鼠标点击页面其他内容 */
}

于是我们网站上就有了自己的看板娘啦！

使用方法 moc3

参考

https://github.com/HCLonely/Live2dV3

https://github.com/Yukariin/AzurLaneL2DViewer

<!------ 位置可自定义 ------>
<div class="Canvas" style="position: fixed; right: 10px; bottom: 10px;z-index: 99999999" id="L2dCanvas"></div>

<!-- Pollyfill script -->
<script src="https://unpkg.com/core-js-bundle@3.6.1/minified.js"></script>
<!-- Live2DCubismCore script -->
<script src="https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js"></script>
<!-- Build script -->
<script src="../../assets/js/live2dv3.js"></script>

<!------ 加载Live2d模型 | Load Live2d model ------>
<script>
  var l2dv;
  window.onload = () => {
    l2dv = new L2dViewer({
      el: document.getElementById('L2dCanvas'),
      modelHomePath: './assets/model/moc3/',
      // modelHomePath: 'https://cdn.jsdelivr.net/gh/alg-wiki/AzurLaneL2DViewer@gh-pages/assets/',
      model: 'yichui_2',
      // bgImg: 'https://cdn.jsdelivr.net/gh/alg-wiki/AzurLaneL2DViewer@gh-pages/assets/bg/bg_church_jp.png',
      bgImg: './assets/image/bg/bg_1.png',
      width: 500,
      height: 300,
      autoMotion: false,
      _finishedLoadModel: function () {
        var motionDiv = document.getElementById("motionDiv");
        motionDiv.innerHTML = "";
        l2dv.getMotions().forEach((v, k) => {
          let motionName = k;
          if (motionName.startsWith('motions/')) {
            motionName = motionName.replace('motions/', '');
          }
          motionName = motionName.replace('.motion3.json', '');
          var bt = document.createElement("button");
          bt.innerHTML = motionName;
          bt.classList.add('btnGenericText');
          bt.onclick = function () {                          //绑定点击事件
            l2dv.startMotion(k);
          };
          motionDiv.appendChild(bt);
        })
      },
      _onTap: function () {
        // 点击canvas触发事件
      }
    });
  }
</script>

参数	类型	描述	默认
el	必需 DOM 对象	要挂载Live2d模型的元素	null
modelHomePath	必需 String	模型根目录	null
model	必需 String	初始显示模型	null
bgImg	可选 String	Canvas背景图片，有图片的话，Canvas的宽高会等于背景图片宽高	null
width	可选 Number	Canvas宽度，单位: px	500
height	可选 Number	Canvas高度，单位: px	300
autoMotion	可选 Boolean	是否自动随机触发Motion	False
_finishedLoadModel	可选 Function	模型加载完回调函数	null
_onTap	可选 Function	点击模型触发函数，为空的话会默认触发随机Motion	null

// L2dViewer 对外暴露的方法
// 获取模型信息
public getModel(): LAppModel {
}
// 加载模型
public loadModel(modelName: string) {
}
// 触发模型 motion
public startMotion(motionName: string) {
}
// 获取模型 motion
public getMotions(): Map<any,any> {
}
// 设置模型背景
public setBgImg(bgImg: string) {
}

当然，你感兴趣的话，并且有一定的前端基础，建议自己构建 live2dv3.js，可以下载官方提供的Live2d Web Sdk，里面已经包含一个简单示例了，

lappdefine.ts  定义基本的参数
lappdelegate.ts 初始化,释放资源,事件绑定
lapplive2dmanager.ts 模型的管理类,进行模型生成和废弃,事件的处理,模型切换.
lappmodel.ts 模型类,定义模型的基本属性
lappal.ts 读取文件,抽象文件数据(算是工具类)
lappsprite.ts 动画精灵类,(有h5游戏开发应该了解)
lapptexturemanager.ts 纹理管理类,进行图像读取和管理的类
lappview.ts 视图类,生成模型的图像被lapplive2dmanager管理
main.ts 主程序启动程序
touchmanager.ts 事件的管理类(比如移动鼠标,点击鼠标,触摸屏触碰等)

简单修改下就可以了，也可以参照我的demo代码