vue-live2d 看板娘
一、看板
有时候看博客会发现网页右下角有一个动态的模型,通常是动漫角色或者小动物,ta 们会看向你的鼠标方向,偶尔还会讲讲笑话,谈谈人生哲理。
仔细想想,它使网页有了“生命”,不再只有干巴巴的文字。它会与进行读者互动,同你对话,比如当你面对一个按钮不知所措时,它会说“看看我写的文章吧~”;当你切换到其他页面再回来时,它会说“哇,你终于回来了~”。
写到这里你也许已经理解了为什么叫做”看板“。
二、live2d
是一种绘图渲染技术,类似 3D 的 2D 图像。
更多了解:
https://zh.moegirl.org/Live2D
,https://www.live2d.com/about/
每一个人物就是一个模型,每个模型又有不同的贴图,从而方便的切换角色和服装。
这项技术不仅可以用在网页上,还可以用在游戏、动画等等。可在官网(https://www.live2d.com/zh-CHS/download/
)查看各种下载,同时官网提供了各种 SDK,方便在各平台上开发。
三、vue-live2d
方便用户在前端 vue
项目中添加看板娘。
之前添加看板娘功能时,没有发现可以在 vue
项目中直接使用的包,所以自己根据找到的资源进行了修改,同时也产生了制作和发布第一个 npm
包的想法,现已实现。
效果可查看上面(看板娘部分)的动图,也可以访问 在线 demo 使用平板或者电脑体验。
下面是代码地址,其中的 README.md
有较为详细的说明和使用示例,这里就不重复了。
https://github.com/evgo2017/vue-live2d
https://npmjs.org/package/vue-live2d
三、最后
这个拖了也蛮久了,之前重构代码结构,发现规范代码的工具内存超载,是组件核心依赖的 live2d.min.js
文件导致的,就开始着手 npm
包制作了。同时一大激励是我发现有类似名称的包,害怕再晚点不好取名字了,连夜提交,哈哈。
同时这次想法付诸实践的速度不错,构想的差不多就动手,边实践边调整,毕竟一口也吃不成大胖子。
尚在计划:自己搜集的短语,模型服装相关,代码优化等等。
目前版本有少量的可配置项,之后会继续完善,且采用官网的 SDK 作为核心文件。后续在 Github 项目内查看更新,欢迎 star。
vue-live2d 看板娘相关推荐
- Hexo添加Live2D看板娘最新教程
目录 前言 介绍 Live2D 看板娘 添加Live2D看板娘 准备工作 安装依赖 下载model文件 添加live2d看板娘到hexo 查看效果 发布 结束语 参考 前言 上次我们搭建了hexo博客 ...
- Live2D看板娘详细实现
Live2D看板娘实现 国际惯例先上图: 所需资源: 链接:https://pan.baidu.com/s/1s7IJIqGnn-cNRAfoS-qG5w 提取码:dhf4 其中包含了看板娘所需的CS ...
- html的美图片加上2d动画,网站上面添加一个动漫小女孩的html代码 WordPress添加live2d看板娘...
在你博客程序头部文件(header.php)引入界面样式,在 head 标签内插入如下代码 在你博客程序页脚文件(footer.php)引入脚本,在最后一个 标签前插入如下代码: var messag ...
- Live2D看板娘学习
一.看板娘一(小缓存) 废话不多说,直接上代码和效果(持续学习和更新): 1.代码: <!DOCTYPE html> <html><head><meta ch ...
- html网页制作看板娘原理,博客网页上添加live2D看板娘
一:前言 "看板娘",简而言之就是小店的女服务生,也有"吸引顾客,招揽生意,提高人气"等作用类似品牌形象代言人的含义.所用的技术是live2D,live2d并不 ...
- Live2D看板娘代码引用
下载相关插件 Live2D 看板娘插件 (https://www.fghrsh.net/post/123.html) 上使用的后端 API 特性 - 原生 PHP 开发,无需伪静态,开箱即用 - 支持 ...
- 搭建博客hexo 安装hexo、配置hexo、hexo主题美化和添加live2d看板娘--详细步骤
一.安装hexo 1.下载安装软件 git:https://git-scm.com/downloads node:https://nodejs.org/en/ 2.安装好两个工具之 ...
- hexo+yilia添加live2d看板娘
文章目录 安装 1.安装插件 2.选择模型 3.配置 4.效果图 补充 取消看板娘 暂时不用 卸载插件 添加live2d看板娘,插件:hexo-helper-live2d,github仓库:https ...
- live2d看板娘分享 我的老婆系列 , Vue实现看板娘!!!
文章目录 1.前言 2.流程 1.前言 最近在网上看到一个很可爱的插件 老婆??? 不行啊,我也要整一个!!!但是- 最后通过各种操作,终于搞定了,因为掉进很多坑,我想和大家分享一下如何正常的写出老婆 ...
- 博客园增加Live2D看板娘教程,超级简单,一看就懂
目录 一.前言 二.效果图 三.资源准备 1.相关的资源,可以点击下面的网盘链接直接下载 2.也可以通过下面的地址到Gitbuh中下载 四.实现教程 1.个人小站实现教程 2.博客园实现教程 一.前言 ...
最新文章
- 解决:无法创建该DNS 服务器的委派
- 菜鸟学习HTML5+CSS3(一)
- 博士如何高效率阅读文献?有哪些技巧可以借鉴?
- IOS响应式编程框架ReactiveCocoa(RAC)使用示例
- 2017-5-4 进程
- 不错的html学习网址。
- kafka in action
- Linux文本模式自动登录,Linux开机自动登录(文本模式)
- C语言--冒泡排序法(详细注释)
- 【新机软件安装及环境配置】(持续更新ing)
- 燃气行业引入电子签章推动燃气销售合同线上签署
- 线程池使用不当导致系统假死
- 少儿编程软件Scratch下载(Mac、Windows皆可)
- 计算机是如何存储矩阵,如何存储稀疏邻接矩阵(How to store sparse adjacency matrix)
- 公司为什么要融资上市?
- 索尼xz1c 日版融卡扩容经验分享(无需root,索尼XZP机型也适用)
- C语言实现王者荣耀护甲减免机制
- 银行卡电信诈骗危险预测
- 百度网盘加速无限试用_百度网盘上线 单日/单次 加速功能,最低仅需 2 块钱
- 最接地气的一套PHP面试题(总结不易,踩坑踩到挂了好多面试)