Live2d vue 插件 将live2d引入vue工程 在网页上添加live2d模型
Live2d vue 插件 将live2d引入vue工程 在网页上添加live2d模型
前面的废话:
Live2d火过一阵,因为当我搜索“live2d 添加到网页上“的时候可以看到很多宅友已经给自己的博客首页加上了live2d看板娘并且发了博客跟大家分享了添加方法。
Live2d官方已经开源了网页上用的WebGL SDK,还提供了若干示例代码,鼓励开发者在更多场景下使用live2d。不过感觉最近十几个月感觉已经听说不到关于live2d的消息了,有一种逐渐变凉的气息啊。确实,目前live2d主流的应用场景似乎不是太多(?),手机端大多是二次元手游里的角色在使用,而网页上就是。。。看板娘,比如一些博客首页的,比如b站网页直播间的。
看板娘教程看多了以后就会发现,大家几乎都是将某个大神写好的一个什么,直接添加到自己博客的html代码中,用script一引入就完成了(有时甚至模型文件都是一样的,更不用说人物的动作、对话形式)。想来大家都是一时新鲜,体验一番即可,并不想费麻烦事去自己改写什么(好看又能调戏不就够了吗??!!)。
本人因为如下原因:
- 并不是想添加看板娘
- 不想要批量生产的感觉
- 在vue工程中引入并自定义动作似乎不是很方便?
而决定自己包装一个vue插件,用于将live2d模型引入前端工程,展示在网页上并可以实现交互。我基于官方提供的WebGL SDK和示例代码制作了插件,目前已经实现了必要功能并发布啦,希望这个插件带来的便利性可以让更多人有机会发掘出live2d更多的玩法,给大家带来快乐~
正文:
插件名字叫作 live2d4vue
(live2d for vue),可以使用npm很方便地安装在你的vue工程中,每一个<Live2d />
组件就是一个模型,有可配置的props来修改画布大小、模型文件以及模型动作。
也就是说,对于一个vue工程,你可以很整洁地引入live2d模型,并且使用这个模型实现比看板娘更多更丰富的功能。
关于插件的具体安装使用方法和参数api请查看github仓库,插件仓库地址:https://github.com/wseven7677/live2d4vue,欢迎大家使用、交流~
201909更新:
在这一年多时间非常感谢大家使用我的插件,从收到的反馈来看,插件还是有很多需要完善的地方,包括提供一个可运行的官方demo等等
主要是2019年我玩别的去了,没怎么玩live2d了,导致迟迟没有时间更新插件。。
(我刚才甚至搜到一位朋友在他的文章中提到live2d4vue的作者“杳无音信”了,吓得我赶紧刷新一下存在感(不是))
也有看到其他关键词是live2d、vue的插件,大家都很勤劳很厉害,不过我可能还是会按我的思路继续做下去
总之再次感谢~2019年我还收获好几十个star,开心~至于插件更不更新还要看排期 。。
end
Live2d vue 插件 将live2d引入vue工程 在网页上添加live2d模型相关推荐
- html网页制作看板娘原理,博客网页上添加live2D看板娘
一:前言 "看板娘",简而言之就是小店的女服务生,也有"吸引顾客,招揽生意,提高人气"等作用类似品牌形象代言人的含义.所用的技术是live2D,live2d并不 ...
- Vue插件报错:Vue.js is detected on this page.
Vue插件报错:Vue.js is detected on this pag 下载Vue插件 解决:Vue.js not detected 解决:Vue.js is detected on this ...
- vs code vue插件_干货分享 | Vue框架常见问题浅谈
友情提示:全文7800多文字,预计阅读时间10分钟 Vue是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手, ...
- 原声html中怎么加载vue文件,HTML文件引入Vue开发
HTML文件引入Vue开发 页面标题 {{text}} {{item.text}} 点击事件 @click {{text}} 添加文本使用两个大括号{{文本}} img标签中src前面得加冒号 new ...
- 创建Vue插件(手动展示vue组件)
一.插件通常用来为 Vue 添加全局功能. 1.添加全局方法或者 property. 2.添加全局资源:指令/过滤器/过渡等.如 vue-touch 3.通过全局混入来添加一些组件选项.如 vue-r ...
- 【echarts 中国地图射线版本】vue实现中国地图航线动画效果,地图上添加散点效果【详细注释,通俗易懂】
先上效果图 前置条件,必看 首先你需要安装echarts并引入 然后你需要下载china.json文件并注册引入,不然不生效 当然很多新手可能不知道china.json在哪里下载,因为官方已经没有了, ...
- jplayer插件的api_如何使用jPlayer插件(jQuery)在您的网站上添加音频和视频
jplayer插件的api jPlayer video player. Today we continue jQuery lessons, and will talk about adding cus ...
- 运用Share.js插件在网页上添加一键分享到微博、微信等
最近做项目遇到一个需求,就是给网站添加一键分享到微博,微信,qq等社交媒体的功能. 想来应该是通过调用一些现成的接口就可以了,这里总结一下运用Share,js来实现的详细步骤 具体做法: 1.下载gi ...
- Vue3 高级语法(二)—— 自定义指令、Teleport、Vue插件
一.认识自定义指令 在Vue的模板语法中我们学习过各种各样的指令:v-show.v-for.v-model等等,除了使用这些指令之外,Vue也允许我们来自定义自己的指令. 注意:在Vue中,代码的复用 ...
- pycharm中找不到vue插件
pycharm中找不到vue插件 刚刚开始学习vue,想创建一个vue 组件,但是创建时没有这个选项,查询后发现需要下载vue插件. 打开file-settings,选择Plugins,搜索vue,选 ...
最新文章
- android应用框架搭建之BaseActivity
- jvm调优:GC日志格式
- 网站 服务器 用sqlite,sqlite服务器数据库
- 09-Elasticsearch重要的系统配置
- C++类模板 简单示例
- Google Maps JavaScript API V3 官方网站
- python基本语言元素是_Python-基本语法元素
- 最新CPC客户端安装教程,亲试有效
- 中英文1:2等宽字体
- 电子签名,后疫情时代“智慧校园”创新新方向
- eighth week(2)
- LIN雨量传感器:拆解最低配的传感器8U0955559
- 几种数据增强:Mixup,Cutout,CutMix 和yolov4中的 Mosaic
- transition和transition的区别
- Idea中GsonFormat插件安装
- 汇编指令学习(CMP,TEST)
- 基础007_FIFO原理
- Android自定义控件之应用程序首页轮播图
- Carsim学习心得
- 【无标题】分享3款好用的简易视频剪辑软件
热门文章
- Android 代码中执行adb shell命令
- PHP通用网站后台管理系统
- 高等数学(第七版)同济大学 习题4-4(后14题) 个人解答
- 利用ABBYY Screenshot Reader快速截取网页并识别文本
- mysql中修改表字段的类型长度_mysql中修改表字段名/字段长度/字段类型详解
- 直线方程求x坐标c语言,已知两点坐标,求直线方程、距离其中一点距离为L的某点...
- 服装CAD计算机按钮在哪里,富仪服装CAD快捷键大全
- 只有一百行的xss扫描工具——DSXS源码分析
- java 关机命令_(windows )定时关机命令
- QT5.12安装图文教程与安装成功后环境配置详细教程