码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-10-23 13:40:00      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:咖啡厅   策略   idg   cdn   pix   upload   script   替换   效果   

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

准备工具

  1. github仓库:存放live2d模型和json文件

    如果你的博客支持本地存放文件也可,主要是博客园只支持几种格式,太坑了。

    注意如果你使用git仓库的话,firefox浏览器可能不能成功显示,原因是CORS安全策略阻止了跨源申请

  2. 现成的带jsonlive2d模型

    这个可以到资源群或者百度贴吧去找(也可以自己做

    如果没有的话,作者推荐了两个少女前线的模型,非常好康,地址放在文末

使用步骤

没有模型请跳过。

  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我吧!

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

标签:咖啡厅   策略   idg   cdn   pix   upload   script   替换   效果   

原文地址:https://www.cnblogs.com/lcyfrog/p/11725534.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!