引言

瀏覽博客時發現許多人博客上都有這樣一個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>

就可以了

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 博客園添加live2d看板娘博客園添加Live2d看板娘博客園配置Live2D看板娘教程 Live2d看板娘在博客園展示博客園添加live-2D看板娘模型博客園增加Live2D看板娘教程，超級簡單，一看就懂 Hexo 添加Live2D看板娘 live2d添加網頁看板娘網頁添加 Live2D 看板娘網頁添加 Live2D 看板娘