实现博客显示自己的看版娘

二月 21, 2020

Live2D Cubism的工作原理是通过将一系列的2D图像进行平移、旋转和变形等操作，生成一个具有自然动画效果的可动人物模型。由于Live2D只需一系列2D原图即可生成具有类似于3D动画效果的模型，比3D建模耗费的时间和成本更少，因此受到很多游戏制作者，特别是小成本AVG和手游作者的喜爱。另外，Live2D生成的模型相对于真正的3D模型，可以更好地还原手绘风格，并且由于Live2D是基于2D图片的技术，相对于3D模型贴图更加少对于电脑硬件要求更加低。

为什么可以在网页上使用

网页上的live2D是基于JS脚本的，从上面的介绍可以看出live2D其实是一系列的2D图片，现在的浏览器一般是支持JS脚本以及图片显示的，所以从理论上网页一样可以使用live2D技术。

怎么在博客上添加看板娘:

我也不想搞，可是她太可爱了。

前提

本文是以Hexo博客框架来讨论的，如果不是此框架或者没有博客的可以参考我上一篇文章。如果是使用Hexo框架的话请确保你熟悉Hexo的配置文件并且确保你使用的主题会不会与模型发生冲突(指模型被挡住)。如果不能确保请自己备份配置文件。

安装并使用

Hexo框架是支持Live2D的使用的，打开命令行指令并切换到你博客的根目录输入
npm install live2d-widget --save

打开node_modules文件夹，如果存在live2d-widget文件夹就可以进行下一步了。确保命令行窗口位于博客的根目录下输入
npm install live2d-widget-model-shizuku --save

下载模型，这里下载的模型是本博客使用的模型，如果觉得不好看或者想换成自己的老婆的话可以查看https://github.com/xiazeyu/live2d-widget-models来找到你想要的模型或者可以打开node_modules文件夹找到live2d-widget-model-shizuku文件夹修改里面的模型，如果你是下载了其他的模型，模型的名字就是对应的文件夹名称。

修改完成后回到博客的根目录下创建一个文件夹，将node_modules文件夹中的live2d-widget和live2d-widget-shizuku文件夹复制/剪切到你新创建的文件夹中。

在选择好模型后要修改Hexo的配置文件，配置文件位于你博客根目录中的_config.yml文件，打开这个文件在文件末尾或者随便你喜欢的位置添加以下代码

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2d/ #这里是你创建的文件夹名称
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: live2d-widget-model-shizuku #这是模型文件夹的名称
  display:  #这个标签是描述模型的位置
    position: right
    width: 200
    height: 400
  mobile:   #是否在手机用户访问的时候显示模型
    show: true
  react:
    opacity: 0.7

其中width和height是你想让模型显示的大小，show是是否在手机上显示。其余的可以自己百度来配置，如果懒的话使用我的就行了。

配置完成后并且确保命令行窗口在博客根目录下后在命令行窗口中输入
hexo g

来重新生成你的博客，生成完成后可以输入
hexo s

来本地查看博客，检查是否成功。在成功后可以输入
hexo d

来发布自己的博客。

再此提醒下，因为你的模型是保存在Github上的所以模型加载需要时间。

查看评论