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

Posted 2021-03-25 lcyfrog

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在博客中增加自己的live2d纸片人模型方法相关的知识，希望对你有一定的参考价值。

在博客中增加自己的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模型没有语音。。。

给一个效果图吧：

技术图片