【博客插件】Live2d看板娘放到自己的博客上(黑白猫猫+恶魔少女)

文章目录

一、前言
二、操作步骤

一、前言

live2D是一种应用于电子游戏的绘图渲染技术，技术由日本Cybernoids公司开发，通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像。

live2d官方提供了很多平台的SDK，包括iOS，Android，Flash，Unity，openGL等，然后如果要在网页中呈现，则可以提供了WebGL SDK，可以参照官方网站：https://www.live2d.com/

效果截图：

二、操作步骤

1、文件下载：下载文件解压放入自己的插件目录。如我下面是放在lib下的，这其实就是一个规范性。

链接：https://pan.baidu.com/s/1HCh5GR5gmMHjMt3xHx9Kzw

提取码：DH69

个人目录是这样，供参考。

静态资源文件：

l2d.js //绘制模型的js
//两个交互的消息文件，一般用一个message.js  即可，内容修改一下js文件即可。
message.js
pio.js
//两个渲染模型的css文件，选择其中一个就行了。如果想换显示位置可修改css文件
live2d.css   //左下角
pio.css      //右下角

2、引入模型显示的CSS文件，该CSS文件会让模型显示在左下角。这里我用的是thymeleaf方式引入的，根据个人资源目录而定。

<link rel="stylesheet" href="../../static/lib/Pio/static/css/live2d.css" th:href="@{/lib/Pio/static/css/live2d.css}"/>

3、在html中加入代码块div用于显示模型：

<div id="landlord"><div class="message" style="opacity:0;"></div><canvas id="live2d" width="280" height="250" class="live2d"></canvas><div class="hide-button">隐藏</div>
</div>

4、然后在页面的body底部加上一段JS代码并加载JSON模型，建议在页面底部延迟加载，因为其体积过于庞大，如果不延迟加载，会严重影响你的网站的加载速度和性能。

<script type="text/javascript">var message_Path = 'http://localhost:8888/blog/lib/Pio/static/js/message.js' //message.js/pio.js的目录（必须填写，否则无法加载交互的文字，交互文字可自己更改js文件内容）var home_Path = 'http://localhost:8888/blog/' //自己网站的根目录
</script><script type="text/javascript" src="../static/lib/Pio/static/js/l2d.js" th:src="@{/lib/Pio/static/js/l2d.js}"></script>
<script type="text/javascript" src="../static/lib/Pio/static/js/message.js" th:src="@{/lib/Pio/static/js/message.js}"></script>
<script type="text/javascript">loadlive2d("live2d", "http://localhost:8888/blog/lib/Pio/models/pio/model.json"); //model.json和其模型等都需要放在服务器网站上，需要什么模型更改不同路径的model.json即可//说明：hijiki/model.json是黑猫，tororo/model.json是魔法少女，pio/model.json是白猫，其他模型需要的可自己去官网找找。
</script>

最后就可以在自己的网页上看猫猫狗狗了。点击隐藏之后就不会有了，重新加载该页面又会有哦。

结尾：live2d不仅在移动端，同时也可以在网页中呈现，首先网页要引入官方提供的webgl的js压缩包 L2Dwidget.min.js。应该是通过JS根据鼠标移动来动态绘制的，因此JS文件不可少。