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模型相关推荐

  1. html网页制作看板娘原理,博客网页上添加live2D看板娘

    一:前言 "看板娘",简而言之就是小店的女服务生,也有"吸引顾客,招揽生意,提高人气"等作用类似品牌形象代言人的含义.所用的技术是live2D,live2d并不 ...

  2. 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 ...

  3. vs code vue插件_干货分享 | Vue框架常见问题浅谈

    友情提示:全文7800多文字,预计阅读时间10分钟 Vue是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手, ...

  4. 原声html中怎么加载vue文件,HTML文件引入Vue开发

    HTML文件引入Vue开发 页面标题 {{text}} {{item.text}} 点击事件 @click {{text}} 添加文本使用两个大括号{{文本}} img标签中src前面得加冒号 new ...

  5. 创建Vue插件(手动展示vue组件)

    一.插件通常用来为 Vue 添加全局功能. 1.添加全局方法或者 property. 2.添加全局资源:指令/过滤器/过渡等.如 vue-touch 3.通过全局混入来添加一些组件选项.如 vue-r ...

  6. 【echarts 中国地图射线版本】vue实现中国地图航线动画效果,地图上添加散点效果【详细注释,通俗易懂】

    先上效果图 前置条件,必看 首先你需要安装echarts并引入 然后你需要下载china.json文件并注册引入,不然不生效 当然很多新手可能不知道china.json在哪里下载,因为官方已经没有了, ...

  7. jplayer插件的api_如何使用jPlayer插件(jQuery)在您的网站上添加音频和视频

    jplayer插件的api jPlayer video player. Today we continue jQuery lessons, and will talk about adding cus ...

  8. 运用Share.js插件在网页上添加一键分享到微博、微信等

    最近做项目遇到一个需求,就是给网站添加一键分享到微博,微信,qq等社交媒体的功能. 想来应该是通过调用一些现成的接口就可以了,这里总结一下运用Share,js来实现的详细步骤 具体做法: 1.下载gi ...

  9. Vue3 高级语法(二)—— 自定义指令、Teleport、Vue插件

    一.认识自定义指令 在Vue的模板语法中我们学习过各种各样的指令:v-show.v-for.v-model等等,除了使用这些指令之外,Vue也允许我们来自定义自己的指令. 注意:在Vue中,代码的复用 ...

  10. pycharm中找不到vue插件

    pycharm中找不到vue插件 刚刚开始学习vue,想创建一个vue 组件,但是创建时没有这个选项,查询后发现需要下载vue插件. 打开file-settings,选择Plugins,搜索vue,选 ...

最新文章

  1. android应用框架搭建之BaseActivity
  2. jvm调优:GC日志格式
  3. 网站 服务器 用sqlite,sqlite服务器数据库
  4. 09-Elasticsearch重要的系统配置
  5. C++类模板 简单示例
  6. Google Maps JavaScript API V3 官方网站
  7. python基本语言元素是_Python-基本语法元素
  8. 最新CPC客户端安装教程,亲试有效
  9. 中英文1:2等宽字体
  10. 电子签名,后疫情时代“智慧校园”创新新方向
  11. eighth week(2)
  12. LIN雨量传感器:拆解最低配的传感器8U0955559
  13. 几种数据增强:Mixup,Cutout,CutMix 和yolov4中的 Mosaic
  14. transition和transition的区别
  15. Idea中GsonFormat插件安装
  16. 汇编指令学习(CMP,TEST)
  17. 基础007_FIFO原理
  18. Android自定义控件之应用程序首页轮播图
  19. Carsim学习心得
  20. 【无标题】分享3款好用的简易视频剪辑软件

热门文章

  1. Android 代码中执行adb shell命令
  2. PHP通用网站后台管理系统
  3. 高等数学(第七版)同济大学 习题4-4(后14题) 个人解答
  4. 利用ABBYY Screenshot Reader快速截取网页并识别文本
  5. mysql中修改表字段的类型长度_mysql中修改表字段名/字段长度/字段类型详解
  6. 直线方程求x坐标c语言,已知两点坐标,求直线方程、距离其中一点距离为L的某点...
  7. 服装CAD计算机按钮在哪里,富仪服装CAD快捷键大全
  8. 只有一百行的xss扫描工具——DSXS源码分析
  9. java 关机命令_(windows )定时关机命令
  10. QT5.12安装图文教程与安装成功后环境配置详细教程