在博客中增加自己的live2d纸片人模型方法
在博客中增加自己的live2d纸片人模型
准备工具
github仓库:存放live2d模型和json文件
如果你的博客支持本地存放文件也可,主要是博客园只支持几种格式,太坑了。
注意如果你使用git仓库的话,firefox浏览器可能不能成功显示,原因是CORS安全策略阻止了跨源申请
现成的带json的live2d模型。
这个可以到资源群或者百度贴吧去找(也可以自己做
如果没有的话,作者推荐了两个少女前线的模型,非常好康,地址放在文末
使用步骤
没有模型请跳过。
上传模型到github仓库或本地仓库
这里给出传git的步骤
注册账号并新建仓库

上传文件,就是上面那个Upload File,格式就是打个包到文件夹中,拖到指定区域就行了
点开文件夹,再点开里面的model.json,此时网址如
https://github.com/用户名/仓库名/blob/master/ots-14/model.json
点击代码框上面的“Raw”按钮,生成外链

这样就准备好了
当然也可以fork到自己的仓库,直接用我的也行呀QwQ
把下列代码添加到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:
- 88type
- 95 玉玲珑
- dsr50 红牡丹/最高出价
- fn57 儿童节皮肤
- g36c 约会
- g41 泳装
- 格琳娜
- 灰熊
- 416 星之茧
- 索米kp31 幸福使命/泳装
- ntw20 女仆咖啡厅
- 汤姆森 恶魔猎人
- px4 圣诞节
- rfb 圣诞节
- 小狮子 南瓜
- type64-ar
- vector 盲信者
- wa2000 古堡历险
- 维尔德
- ots-14 紫雨心
澄清
少女前线live2d模型有版权,请勿用于商业用途!
觉得好用的话请点赞或者github上star/fork我吧!
在博客中增加自己的live2d纸片人模型方法的更多相关文章
- 在hexo静态博客中利用d3-cloud来展现标签云
效果: http://lucyhao.com/tags/ hexo自带的tag cloud的标签展现不太美观,想能够展现出“云”效果的标签.在网上找到了d3-cloud这个项目,github地址:ht ...
- 借用Snippet插件美化博客中的代码
书写博客,难免要贴出代码.然而直接贴出代码,则不美观.于是,应运而生出现了很多代码美化的插件.其中比较有名的是Syntax Highlighting插件. 笔者在网上翻阅的时候发现了Snippet ...
- 如何将word中的图片和文字导入自己的博客中
目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...
- 怎样将word中的图片插入到CSDN博客中
目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...
- 如何在自己的CSDN博客中增添【高大上】的博客栏目?
前几天看到过一位博主的博客界面,向下看 ☟ (博主对不起啊!把你的公众号给抹了~~~),感觉做这个东西挺好玩的,而且我竟然找不到在哪个地方可以设置!在百度上也没有搜到教程,最后问了一下贺老师知道了入口 ...
- 关于完整解答Leo C.W博客中名为“我们公司的ASP.NET 笔试题,你觉得难度如何”的所有题目
关于完整解答Leo C.W博客中名为“我们公司的ASP.NET 笔试题,你觉得难度如何”的所有题目,请大家鉴定,不足之处,敬请指教! 第1到3题解答如下: public enum QuestionTy ...
- 继网易博客后搜狐博客也增加了nofollow标签
继网易博客后搜狐博客也增加了nofollow标签 今天在搜狐博客发表了篇文章,在末端添加上我的版权,结果回头查看是发现,这个锚文本被加上了nofollow标签,也就是说这样的外链已经没有传递权重的作用 ...
- 在个人博客中优雅的使用Gitalk评论插件
在上一篇博客<程序员如何从0到1搭建自己的技术博客>中,我们了解了如何快速的从0到1搭建一个个人博客. 其实细心的你会发现,该博客用到了一个评论插件,这个插件就是Gitalk. 如果想要在 ...
- 修复在“Android 在ScrollView中嵌入ViewPage后ViewPage不能很好的工作的问题解决”这篇博客中MyScrollView出现滑动一会就不会上下滑动的问题
在“Android 在ScrollView中嵌入ViewPage后ViewPage不能很好的工作的问题解决”,这篇博客中的大部分问题已经解决了. 唯一遗憾的是,ViewPage随人能够工作了,但是My ...
随机推荐
- 2、顺序表的实现(java代码)
1.这里实现了简单的顺序表的,为空判断.是否已满判断,插入.删除,查询元素下标等功能 public class Linear_List { private int[] arr; //用来保存数据 pr ...
- (一)spring 高级装配-@Profile
1.环境与profile 示例:数据库配置 a:通过@Bean注解,通过EmbeddedDatabaseBuilder创建数据源 @Bean(destroyMethod="shutdown& ...
- 【linux】【elasticsearch】解决docker pull error pulling image configuration: Get https://d2iks1dkcwqcbx.cloudfront.net/
网络原因导致的问题: error pulling image configuration: Get https://d2iks1dkcwqcbx.cloudfront.net/docker/regis ...
- sql server 中常用修改列 ,创建主外键操作
表结构 CREATE TABLE [staff] ( [id] [varchar](50) NOT NUL L, [name] [varchar](50) NOT NULL, [password] [ ...
- 远程桌面连接mstsc 超扎心
搞了一天问了几千个人.最后终于有一位大佬解决了.扎心啊. http://jingyan.baidu.com/article/39810a23edc48bb637fda672.html 就是服务没打开.
- chsime.exe cpu占用高
打开管理员的命令提示符,运行 if exist "%SystemRoot%\System32\InputMethod\CHS\ChsIME.exe" (takeown /f &qu ...
- pycharm使用sublime/boxy配色方案
# 展示效果图 1. github官网连接:https://github.com/simoncos/pycharm-monokai 2.克隆代码并解压文件 3.PyCharm -> File - ...
- 痞子衡嵌入式:飞思卡尔i.MX RTyyyy系列MCU特性那些事(5)- 划时代新品RT1170
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是飞思卡尔i.MX RTyyyy系列MCU的划时代新品i.MXRT1170. 自2017年开始,每年的6月25日恩智浦都会在北京举行微控制 ...
- 利用Code::Blocks搭建64位C++开发平台
0.前言 随着64位计算机的普及,编写64位程序成为程序员基本的要求.我在<体验Code::Blocks下的C++编程>中描述了利用Code::Blocks官方提供的封装了编译器的安装包( ...
- http转换为https
1.下载ssl 证数 百度ssl 证数都有 其中以便宜ssl为例子 注册登陆 选择免费版 可以使用3个月: 申请过程中需要检测该域名是否为本人所有 ,所以邮箱检测或者域名配置 很简单检测就好了: 验证 ...