给你的网站加一个2.5D悬浮小人

我们平常访问某些网站的时候,会发现在网站上总是悬浮者一个可爱的小人.而且还可以跟用户进行各种互动(说话?).

一般这种小人都是通过js加载出来的, 搜索关键词网上有教程. 不过我今天在这里记录的是,如何添加2.5D互动小人

平台: hexo + hexo-plugins(live2d-widget-models)

同时也支持jekyll, wordpress, etc.

安装

sudo npm install --save hexo-helper-live2d

项目github地址

https://github.com/xiazeyu/live2d-widget-models

然后在_config.yml(hexo或者主题的都行)中添加

live2d:

  enable: true

  scriptFrom: local

  model:

    use: live2d-widget-model-wanko //使用的模型名,下面会详细讲

  display: //如果觉得默认定位不满意可在此微调,bottom

    position: right

    width: 150

    height: 300

	bottom:-30

  mobile:

    show: true

自定义模型的使用点我

hexo下现有模型的安装

npm install {packagename}

安装示例

sudo npm install live2d-widget-model-chitose

最新版现有模型测试与预览

OK, 这是重点[哭笑不得],

现实效果是会动的, 由于截gif过于麻烦, 我就只好截屏了. 现实效果绝对比这帅.

live2d-widget-model-chitose

唔, 这是一个美少年. 比较适合女生. 我就不用这个了.

live2d-widget-model-epsilon2_1

一个夏装妹子, 比较适合宅男

live2d-widget-model-gf

一个卡通人物(废话), 很炫酷

live2d-widget-model-haru

这个模型需要两点注意,

1. 它的安装方式是

npm install live2d-widget-model-haru

模型的使用却是

use: live2d-widget-model-haru/01 或者

use: live2d-widget-model-haru/02

这是因为他这个包里有两个模型的原因

2. 它在子模型下的json文件是空的,

所以你要将/博客路径/node_modules/live2d-widget-model-haru/package.json复制进01, 02 文件夹.

live2d-widget-model-haru/01

live2d-widget-model-haru/02

live2d-widget-model-haruto

live2d-widget-model-hibiki

吐槽一句, 这位同学太高了,已经把我电脑屏幕高快全占了

live2d-widget-model-izumi

live2d-widget-model-koharu

是不是有些熟悉? 这妹妹跟haruto是情侣啊!

live2d-widget-model-miku

live2d-widget-model-ni-j

live2d-widget-model-nico

live2d-widget-model-nietzsche

live2d-widget-model-nipsilon

live2d-widget-model-nito

live2d-widget-model-shizuku

live2d-widget-model-tororo

live2d-widget-model-tsumiki

live2d-widget-model-unitychan

live2d-widget-model-wanko

live2d-widget-model-z16

总结

我把官网所有的模型都装了一次, 最后发现一个规律, 那就是模型妹子偏多. 看来技术宅喜欢动漫少女的说法基本正确. 由于我装了一个多小时的模型, 已经对此有些反感了, 所以就保留最后一个不换了. 想看效果的可以电脑端访问https://www.thinkmoon.cn 看效果

mobile 的值决定了在手机端是否显示

由于显示会影响阅读,我这儿设为false

版权声明: 本文首发于 指尖魔法屋-给你的网站加一个2.5D悬浮小人（https://blog.thinkmoon.cn/post/528_%E7%BB%99%E4%BD%A0%E7%9A%84%E7%BD%91%E7%AB%99%E5%8A%A0%E4%B8%80%E4%B8%AA2_5d%E6%82%AC%E6%B5%AE%E5%B0%8F%E4%BA%BA/） 转载或引用必须申明原指尖魔法屋来源及源地址！