博客园添加live2d看板娘

引言

浏览博客时发现许多人博客上都有这样一个2D模型,也给博客增色不少。而且鼠标移到不同位置，模型会跟着动，点击还会播放音频。查找才知道这个叫做 Live 2D ，可以在博客园添加。

Live2D简介

Live2D 是一种应用于电子游戏的绘图渲染技术，由日本 Cybernoids 公司开发。

Live2D共有两个分支：Cubism（主要）和 Euclid（已停止开发）。若无特殊说明，Live2D均指Cubism分支。

工作原理

Live2D Cubism 的工作原理是通过将一系列的 2D 图像进行平移、旋转和变形等操作，生成一个具有自然动画效果的可动人物模型。

博客园添加 Live2D

起源

这个做法的发源地是在博客美化—给你博客添加一个萌萌的看板娘吧这里

似乎需要上传多个文件内容： waifu.css 、waifu-tips.js 、live2d.js 和 flat-ui.min.css （若不加菜单可不引入此文件）。

配置

后来被简化了许多，下面是精简版的配置方法：

首先，需要申请博客园的 js 权限 ，步骤是：管理--》设置》--》js权限申请

然后，在【页面html代码】编辑器中插入如下内容：

引入 live2d 的 js：

<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>

初始化 js ，加载模型：

<script>
    L2Dwidget.init({
        "model": {
　　　　　　　jsonPath: "https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json",
            "scale": 1
        },
        "display": {
            "position": "right", //模型的表现位置
            "width": 150,  //模型的宽度
            "height": 300, //模型的高度
            "hOffset": 0,
            "vOffset": -20
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 0.7,  //模型默认透明度
            "opacityOnHover": 0.2
        }
    });
</script>

最后，保存上面修改然后刷新页面就能看到可爱的模型了。

换模型

假如希望换成其他的模型，可以修改 jsonPath 的路径，格式为：https://unpkg.com/2D模型全名称@1.0.5/assets/模型.model.json ，可选的模型名称有：

live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16

在这里可以预览各个模型的样子：截图预览

还有部分模型如下(可能会有重复):

最后

十分感谢原博主，想添加其他交互事件语音等可以参看他们的博客，所借鉴的原博客如下:
https://blog.csdn.net/linshuhe1/article/details/94903871
https://segmentfault.com/a/1190000022971000

博主自己找模型的博客地址：
https://www.cnblogs.com/rujianming/p/11798240.html

提醒(2021.9.23)

有同好私信我使用该配置后会报错

Uncaught ReferenceError: L2Dwidget is not defined
at (index):626

这是引入的js文件无法下载下来导致的，将之前的script标签

 <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>

修改为

<script type="text/javascript" charset="utf-8" src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.min.js"></script>

就可以了

posted @ 2021-01-14 21:50 DAmarkday 阅读(2151) 评论(6) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

DAmarkday

博客园添加live2d看板娘

引言

Live2D简介

博客园添加 Live2D

最后

提醒(2021.9.23)

公告