美文网首页服务器搭建教程vue技术栈
给你的网站加一个2.5D悬浮小人

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

作者: 指尖魔法师 | 来源:发表于2018-03-10 11:55 被阅读1887次
    live2d-widget-model-chitoselive2d-widget-model-chitose

    我们平常访问某些网站的时候,会发现在网站上总是悬浮者一个可爱的小人.而且还可以跟用户进行各种互动(说话?).
    一般这种小人都是通过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-chitoselive2d-widget-model-chitose

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

    live2d-widget-model-epsilon2_1

    live2d-widget-model-epsilon2_1live2d-widget-model-epsilon2_1

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

    live2d-widget-model-gf

    live2d-widget-model-gflive2d-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
    这是因为他这个包里有两个模型的原因

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

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

    live2d-widget-model-haru/01

    live2d-widget-model-haru/01live2d-widget-model-haru/01

    live2d-widget-model-haru/02

    live2d-widget-model-haru/02live2d-widget-model-haru/02

    live2d-widget-model-haruto

    live2d-widget-model-harutolive2d-widget-model-haruto

    live2d-widget-model-hibiki

    live2d-widget-model-hibikilive2d-widget-model-hibiki

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

    live2d-widget-model-izumi

    live2d-widget-model-izumilive2d-widget-model-izumi

    live2d-widget-model-koharu

    live2d-widget-model-koharulive2d-widget-model-koharu

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

    live2d-widget-model-miku

    live2d-widget-model-mikulive2d-widget-model-miku

    live2d-widget-model-ni-j

    live2d-widget-model-ni-jlive2d-widget-model-ni-j

    live2d-widget-model-nico

    live2d-widget-model-nicolive2d-widget-model-nico

    live2d-widget-model-nietzsche

    live2d-widget-model-nietzschelive2d-widget-model-nietzsche

    live2d-widget-model-nipsilon

    live2d-widget-model-nipsilonlive2d-widget-model-nipsilon

    live2d-widget-model-nito

    live2d-widget-model-nitolive2d-widget-model-nito

    live2d-widget-model-shizuku

    live2d-widget-model-shizukulive2d-widget-model-shizuku

    live2d-widget-model-tororo

    live2d-widget-model-tororolive2d-widget-model-tororo

    live2d-widget-model-tsumiki

    live2d-widget-model-tsumikilive2d-widget-model-tsumiki

    live2d-widget-model-unitychan

    live2d-widget-model-unitychanlive2d-widget-model-unitychan

    live2d-widget-model-wanko

    live2d-widget-model-wankolive2d-widget-model-wanko

    live2d-widget-model-z16

    live2d-widget-model-z16live2d-widget-model-z16

    总结

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

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

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

    相关文章

      网友评论

        本文标题:给你的网站加一个2.5D悬浮小人

        本文链接:https://www.haomeiwen.com/subject/hnivfftx.html