在博客中增加自己的live2d紙片人模型方法

[TOC]

在博客中增加自己的live2d紙片人模型

准備工具

1. github倉庫：存放live2d模型和json文件

   如果你的博客支持本地存放文件也可，主要是博客園只支持幾種格式，太坑了。

   注意如果你使用git倉庫的話，firefox瀏覽器可能不能成功顯示，原因是CORS安全策略阻止了跨源申請

2. 現成的帶json的live2d模型。

   這個可以到資源群或者百度貼吧去找~~（也可以自己做~~

   如果沒有的話，作者推薦了兩個少女前線的模型，非常好康，地址放在文末

使用步驟

沒有模型請跳過。

1. 上傳模型到github倉庫或本地倉庫

   這里給出傳git的步驟

   • 注冊賬號並新建倉庫

     

   • 上傳文件，就是上面那個Upload File，格式就是打個包到文件夾中，拖到指定區域就行了

   • 點開文件夾，再點開里面的model.json，此時網址如

     https://github.com/用戶名/倉庫名/blob/master/ots-14/model.json

     

   • 點擊代碼框上面的**“Raw”**按鈕，生成外鏈

     

     這樣就准備好了

   當然也可以fork到自己的倉庫，直接用我的也行呀QwQ

2. 把下列代碼添加到HTML文件中：（如果是博客園用戶，需要申請js權限，在**“ 頁腳Html代碼”**中輸入）

   <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
   <script>
       L2Dwidget.init({
           "model": {
   　　　　　　　//jsonpath控制顯示模型
               jsonPath: "https://raw.githubusercontent.com/parker0523/res/master/ots-14/model.json",
           },
           "display": {
               "position": "right", //看板娘的表現位置
               "width": 200,  //寬度
               "height": 350, //高度
               "hOffset": -50,
               "vOffset": -20
           },
           "mobile": {
               "show": true,
           },
           "react": {
               "opacityDefault": 1,//不透明度，可調
               "opacityOnHover": 0.2
           }
       });
   </script>
   

代碼中的網址就是上面准備的網址

有一些參數，可根據自己博客實際來調。

這個是支持交互的，只不過我給的live2d模型沒有語音。。。

給一個效果圖吧：

附件

就兩個網址：

這個是OTS-14的

https://raw.githubusercontent.com/parker0523/res/master/ots-14/model.json

這個是索米的

https://pelom.top/usr/file/live2d/assets/GF/kp31/model.json

直接替換代碼中的即可

用不起的或者想找我要live2d模型的可以留言呀QwQ（我盡量及時回復

我目前有的live2d：

1. 88type
2. 95 玉玲瓏
3. dsr50 紅牡丹/最高出價
4. fn57 兒童節皮膚
5. g36c 約會
6. g41 泳裝
7. 格琳娜
8. 灰熊
9. 416 星之繭
10. 索米kp31 幸福使命/泳裝
11. ntw20 女仆咖啡廳
12. 湯姆森 惡魔獵人
13. px4 聖誕節
14. rfb 聖誕節
15. 小獅子 南瓜
16. type64-ar
17. vector 盲信者
18. wa2000 古堡歷險
19. 維爾德
20. ots-14 紫雨心

澄清

少女前線live2d模型有版權，請勿用於商業用途！

覺得好用的話請點贊或者github上star/fork我吧！