在博客中增加自己的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纸片人模型方法的更多相关文章

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

    效果: http://lucyhao.com/tags/ hexo自带的tag cloud的标签展现不太美观,想能够展现出“云”效果的标签.在网上找到了d3-cloud这个项目,github地址:ht ...

  2. 借用Snippet插件美化博客中的代码

    书写博客,难免要贴出代码.然而直接贴出代码,则不美观.于是,应运而生出现了很多代码美化的插件.其中比较有名的是Syntax Highlighting插件.   笔者在网上翻阅的时候发现了Snippet ...

  3. 如何将word中的图片和文字导入自己的博客中

    目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...

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

    目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...

  5. 如何在自己的CSDN博客中增添【高大上】的博客栏目?

    前几天看到过一位博主的博客界面,向下看 ☟ (博主对不起啊!把你的公众号给抹了~~~),感觉做这个东西挺好玩的,而且我竟然找不到在哪个地方可以设置!在百度上也没有搜到教程,最后问了一下贺老师知道了入口 ...

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

    关于完整解答Leo C.W博客中名为“我们公司的ASP.NET 笔试题,你觉得难度如何”的所有题目,请大家鉴定,不足之处,敬请指教! 第1到3题解答如下: public enum QuestionTy ...

  7. 继网易博客后搜狐博客也增加了nofollow标签

    继网易博客后搜狐博客也增加了nofollow标签 今天在搜狐博客发表了篇文章,在末端添加上我的版权,结果回头查看是发现,这个锚文本被加上了nofollow标签,也就是说这样的外链已经没有传递权重的作用 ...

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

    在上一篇博客<程序员如何从0到1搭建自己的技术博客>中,我们了解了如何快速的从0到1搭建一个个人博客. 其实细心的你会发现,该博客用到了一个评论插件,这个插件就是Gitalk. 如果想要在 ...

  9. 修复在“Android 在ScrollView中嵌入ViewPage后ViewPage不能很好的工作的问题解决”这篇博客中MyScrollView出现滑动一会就不会上下滑动的问题

    在“Android 在ScrollView中嵌入ViewPage后ViewPage不能很好的工作的问题解决”,这篇博客中的大部分问题已经解决了. 唯一遗憾的是,ViewPage随人能够工作了,但是My ...

随机推荐

  1. Python基础(十)

    今日主要内容 补充:传参与参数分配区别 动态传参 函数注释 名称空间 函数名的使用 函数嵌套 global和nonlocal 补充:传参与参数分配区分 先看一个函数定义和函数调用 def func(a ...

  2. [Design Patterns] 01. Creational Patterns - Abstract Factory

    设计模式是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结,使用设计模式的目的是提高代码的可重用性,让代码更容易被他人理解,并保证代码可靠性.它是代码编制真正实现工程化. 四个关键元素 ...

  3. opencv图像处理之常见滤波器

    图像平滑 Smoothing, also called blurring, is a simple and frequently used image processing operation. 平滑 ...

  4. 第九周java动手动脑

    1.使用Files. walkFileTree()找出指定文件夹下所有扩展名为.txt和.java的文件. import java.io.IOException; import java.nio.fi ...

  5. Python学习笔记整理总结【Django】:模板语言、分页、Cookie、Session

    一.模板语言  1.在前段展示:对象/字典/元组 class Business(models.Model): # id #用默认的自增id列 即:Business中有3列数据(id, caption, ...

  6. SpringSecurity原理剖析与权限系统设计

    Spring Secutity和Apache Shiro是Java领域的两大主流开源安全框架,也是权限系统设计的主要技术选型.本文主要介绍Spring Secutity的实现原理,并基于Spring ...

  7. .NetCore技术研究-一套代码同时支持.NET Framework和.NET Core

    在.NET Core的迁移过程中,我们将原有的.NET Framework代码迁移到.NET Core.如果线上只有一个小型的应用还好,迁移升级完成后,只需要维护.NET Core这个版本的代码. 但 ...

  8. docker 运行容器时指定--sysctl参数来设置系统参数

    指定--sysctl参数来设置系统参数,通过这些参数来调整系统性能,Docker通过一个 ValidateSysctl函数来限制 sysctl参数可以传入的项,源码如下: // docker/opts ...

  9. linux分析利刃之sar命令详解

    一.sar的概述 在我使用的众多linux分析工具中,sar是一个非常全面的一个分析工具,可以比较瑞士军刀,对文件的读写,系统调用的使用情况,磁盘IO,CPU相关使用情况,内存使用情况,进程活动等都可 ...

  10. Shell之变量

    目录 Shell之变量 参考 变量命名规则 变量语法规范 四种变量类型 系统变量 特殊变量 变量的使用 变量内容的删除和替换 Shell之变量