live2d

成品如图： 那么几步简单说明怎么用吧： 第一，先去github上下载相应的静态资源： https://github.com/xiazeyu/live2d-widget-models 第二，将packge里面的静态资源放到你的vue项目的static下 第三、在入口文件html里面加入 <script type="text/javascript" src="/static/live2dw/lib/L2Dwidget.min.js"></script> 并在app.vue里面加入： <script> export default { name: 'App', created () { setTimeout(() => { window.L2Dwidget.init({ pluginRootPath: 'static/live2dw/', pluginJsPath: 'lib/', pluginModelPath: 'live2d-widget-model-z16/assets/', tagMode: false, debug: false, model: { jsonPath: '../static/live2dw/live2d-widget-model-z16/assets/z16.model.json' }, display: { position: 'right', width:

之前讲到了如何将live2d呈现在自己的博客上,接下来便是设定小人所响应的动作。 上次我们讲到了我们是通过传live2d模型的json文件来让小人呈现在我们的网页上，而其中json文件所包含的就是各种对于模型资源的设定，例如可以看到motions所指的的就是模型的动作这一大类，hit_areas所定义的就是model的触碰范围等等。编写model.json的文件可以软件 Live2DviewerEX 。目前该款软件在steam上 收费 （ 不过如果你也可以和我一样直接编写json文件 ） 。再者，目前另一款能在电脑上运行model的软件便是 Live2DViewer （没有EX)。如果你和我一样准备自己编写的话可以参考如下两个连接（ 其实根据软件的规则编写的json文件会和在网页上的效果会有出入，在后面会讲到为什么 ） 1. http://live2d.pavostudio.com/doc/zh-cn/live2d/model-json-example/ （中文文档） 2. https://www.bilibili.com/video/av28408754?from=search&seid=6607613555690708666 （视频） （正确的编写方式） ( 错误的编写方式) 在编写好json文件后

首先我是一个没有学过任何前端语言的人，所以对于添加自己喜欢的live2d的过程中存在许多的疑惑和问题，希望懂得的朋友也能够为我解答。 我之所以要写这么一篇文章是因为我一开始就被别人的博客中的live2d给吸引了，但是我发现大部分的人所拥有的live2d都是千篇一律的，所以我就一直在想着尝试能不能做一个有自己的定的live2d。 首先如何在博客园中加载live2d》这很简单，只需要一个 脚本 以及 live2d的资源文件 。 对于脚本，已经有了前人所写好的脚本，故我们直接拿来用即可（十分感谢该脚本的作者，为我们不懂的小白也提供了可能）。以下我将贴出 <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:"模型的脚本 即model.json" }, "display": { "position": "right", //看板娘的表现位置 "width": 150, //宽度 "height": 262.5, //高度 "hOffset": -60, //水平 "vOffset":

目录 在博客中增加自己的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