我們平常訪問某些網(wǎng)站的時(shí)候,會(huì)發(fā)現(xiàn)在網(wǎng)站上總是懸浮者一個(gè)可愛的小人.而且還可以跟用戶進(jìn)行各種互動(dòng)(說(shuō)話?).
一般這種小人都是通過(guò)js加載出來(lái)的, 搜索關(guān)鍵詞網(wǎng)上有教程. 不過(guò)我今天在這里記錄的是,如何添加2.5D互動(dòng)小人
平臺(tái): hexo + hexo-plugins(live2d-widget-models)
同時(shí)也支持jekyll, wordpress, etc.
安裝
sudo npm install --save hexo-helper-live2d
項(xiàng)目github地址
https://github.com/xiazeyu/live2d-widget-models
然后在_config.yml(hexo或者主題的都行)中添加
live2d:
enable: true
scriptFrom: local
model:
use: live2d-widget-model-wanko //使用的模型名,下面會(huì)詳細(xì)講
display: //如果覺得默認(rèn)定位不滿意可在此微調(diào),bottom
position: right
width: 150
height: 300
bottom:-30
mobile:
show: true
自定義模型的使用點(diǎn)我
hexo下現(xiàn)有模型的安裝
npm install {packagename}
安裝示例
sudo npm install live2d-widget-model-chitose
最新版現(xiàn)有模型測(cè)試與預(yù)覽
OK, 這是重點(diǎn)[哭笑不得],
現(xiàn)實(shí)效果是會(huì)動(dòng)的, 由于截gif過(guò)于麻煩, 我就只好截屏了. 現(xiàn)實(shí)效果絕對(duì)比這帥.
live2d-widget-model-chitose
唔, 這是一個(gè)美少年. 比較適合女生. 我就不用這個(gè)了.
live2d-widget-model-epsilon2_1
一個(gè)夏裝妹子, 比較適合宅男
live2d-widget-model-gf
一個(gè)卡通人物(廢話), 很炫酷
live2d-widget-model-haru
這個(gè)模型需要兩點(diǎn)注意,
- 它的安裝方式是
npm install live2d-widget-model-haru
模型的使用卻是
use: live2d-widget-model-haru/01 或者
use: live2d-widget-model-haru/02
這是因?yàn)樗@個(gè)包里有兩個(gè)模型的原因
- 它在子模型下的json文件是空的,
所以你要將/博客路徑/node_modules/live2d-widget-model-haru/package.json復(fù)制進(jìn)01, 02 文件夾.
live2d-widget-model-haru/01
live2d-widget-model-haru/02
live2d-widget-model-haruto
live2d-widget-model-hibiki
吐槽一句, 這位同學(xué)太高了,已經(jīng)把我電腦屏幕高快全占了
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
總結(jié)
我把官網(wǎng)所有的模型都裝了一次, 最后發(fā)現(xiàn)一個(gè)規(guī)律, 那就是模型妹子偏多. 看來(lái)技術(shù)宅喜歡動(dòng)漫少女的說(shuō)法基本正確. 由于我裝了一個(gè)多小時(shí)的模型, 已經(jīng)對(duì)此有些反感了, 所以就保留最后一個(gè)不換了. 想看效果的可以電腦端訪問https://www.thinkmoon.cn 看效果
mobile 的值決定了在手機(jī)端是否顯示
由于顯示會(huì)影響閱讀,我這兒設(shè)為false
