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

目录

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

    • 准备工具
    • 使用步骤
    • 附件
    • 澄清

在博客中增加自己的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我吧!

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

时间: 2024-11-11 08:20:41

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

在hexo静态博客中利用d3-cloud来展现标签云

效果: http://lucyhao.com/tags/ hexo自带的tag cloud的标签展现不太美观,想能够展现出“云”效果的标签.在网上找到了d3-cloud这个项目,github地址:https://github.com/jasondavies/d3-cloud demo地址:https://www.jasondavies.com/wordcloud/ hexo生成的是静态博客,所以最后在网上看到的都是静态的内容,也就是说,我们的看到的标签云也是静态的已经生成好的内容,并不会随着刷新

如何在博客中添加高清图片

前言 当我们写博客的时候往往需要用到许多的截图来更好地表达.其中不乏含有数据较多的图片,如何确保图片的清晰度直接影响到了阅读体验. 下面为大家介绍一种能够在博客中比较完整地保留图片清晰度的方法. 把博客需要用到的图片上传到github进行保存. 具体的方式可以参见这篇博客:利用Github建立博客专用图库 随后在博客中直接引用github上相关图片的地址,即可最大程度在博客中保存图片的清晰度. 效果对比 这是直接从本地word文档中复制图片到博客中的效果: 可以看到图片的分辨率大幅度的下降了.

怎样将word中的图片插入到CSDN博客中

目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写博客需要在第三方博客平台注册帐号,且需要第三方博客平台提供API接口.目前的有的博客平台均已关闭博客接口,所以无法使用Word来发布博客. 2.发布到博客或公众号平台的图片无法转载.由于所有博客平台,公众号平台(如微信)开启了图片防盗链功能,作者发布到这些平台上的图片则无法转载到其它的网站中,这限制

关于如何在博客中编辑公式的资料

参考例外一篇关于在线公式编辑的文章:http://www.cnblogs.com/haore147/p/3629895.html 好吧,直接试一下才知道: 1. 打开网址:http://latex.codecogs.com/ 2. 输入LaTex代码: f(x)=\frac{1}{\sqrt{2\pi }\sigma } e^{-\frac{(x-\mu )^2}{2\sigma ^2}} 结果如下图: 3.1 切换到源码模式(方法一) 输入:<img src="http://latex.

关于csdn博客中案例效果的动态演示

在以前一篇博文中,网友评论说要是案例效果是动态演示的就好了,我觉得说的很是有道理,因为一个简单的截图不能很好的展示案例效果,要是有一张gif图能动态的播放案例效果就再好不过了.在这里提供一个小软件,用来制作gif图片的.读者可以参考另一篇博文:http://blog.csdn.net/tangcheng_ok/article/details/8246792.这一篇博文也是介绍如何制作gif动态演示图片的.在这里我想做的就是提醒一下大家:在写博文的过程中,如果是上传gif图片,一定要选择无水印,否

查询博客中相同文章类别总共有多少文章

查询博客中相同文章类别总共有多少文章 T_Content 博客表 T_ContentType 博客类别表 string sql = "select  (select  count(*) from T_Content where FTypeId=T.FID) as num from T_ContentType AS T" 查询博客中相同文章类别总共有多少文章

关于完整解答Leo C.W博客中名为“我们公司的ASP.NET 笔试题,你觉得难度如何”的所有题目

关于完整解答Leo C.W博客中名为“我们公司的ASP.NET 笔试题,你觉得难度如何”的所有题目,请大家鉴定,不足之处,敬请指教! 第1到3题解答如下: public enum QuestionType { Text = 0, MultipleChoice = 1 } public interface IQuestion { string Title { get; set; } QuestionType Category { get; } } public abstract class Que

在CSDN博客中插入视频

经过笔者测试,如果想要在CSDN博客中插入视频,在HTML编辑器中写的上传视频的代码(以iframe为例)提交后在文章中是找不到的,不知道为什么没有了,视频也不会显示:在Markdown编辑器中写的上传视频的代码(以iframe为例)提交后在文章中可以找到,同时也会显示视频.

在个人博客中优雅的使用Gitalk评论插件

在上一篇博客<程序员如何从0到1搭建自己的技术博客>中,我们了解了如何快速的从0到1搭建一个个人博客. 其实细心的你会发现,该博客用到了一个评论插件,这个插件就是Gitalk. 如果想要在博客中正确的使用该插件,还是需要修改下_config.yml里关于Gitalk的配置的. 也许你会好奇Gitalk是什么?有什么用途? 我们打开下Gitalk的官网https://gitalk.github.io/,就能看到答案. Gitalk其实就是一个评论插件,访问网站的用户可以使用GitHub账号登录后