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

准备工具github仓库:存放live2d模型和json文件

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

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

现成的带json的live2d模型。

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

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

使用步骤

没有模型请跳过。上传模型到github仓库或本地仓库

这里给出传git的步骤

当然也可以fork到自己的仓库,直接用我的也行呀QwQ注册账号并新建仓库

70396750874e02dce1b343fd16a72ff0.png

上传文件,就是上面那个Upload File,格式就是打个包到文件夹中,拖到指定区域就行了

点开文件夹,再点开里面的model.json,此时网址如

https://github.com/用户名/仓库名/blob/master/ots-14/model.json

b90079daf131b1e076a1bc962aea059d.png

点击代码框上面的“Raw”按钮,生成外链

f1540d0d264f0ab8c70294f80db3cc28.png

这样就准备好了

把下列代码添加到HTML文件中:(如果是博客园用户,需要申请js权限,在“ 页脚Html代码”中输入)

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

}

});

代码中的网址就是上面准备的网址

有一些参数,可根据自己博客实际来调。

这个是支持交互的,只不过我给的live2d模型没有语音。。。

给一个效果图吧:

079ed1e5c4d8b4973509e2ac61ea704a.png

附件

就两个网址:

这个是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模型有版权,请勿用于商业用途!

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值