网站建设的目标与期望,wordpress简单主题下载,校园网站设计开题报告,电子商务平台中搜索词拆解时文章目录 前言v1.1.x版本#xff1a;vue集成看板娘#xff08;暂不使用#xff0c;在v1.2.x已替换#xff09;集成看板娘实现看板娘拖拽效果方案资源备份存储 当前最新调研#xff1a;2024.10.2开源方案1#xff1a;OhMyLive2D#xff08;推荐#xff09;开源方案2vue集成看板娘暂不使用在v1.2.x已替换集成看板娘实现看板娘拖拽效果方案资源备份存储 当前最新调研2024.10.2开源方案1OhMyLive2D推荐开源方案2fghrsh提供后端接口开源方案3live2dw模型直接本地放置开源方案4vue-live2d支持vue推荐基于方案2改造 v1.2.x版本集成vue-live2d开发定位集成步骤效果展示 参考文章 前言
博主介绍✌目前全网粉丝3Wcsdn博客专家、Java领域优质创作者博客之星、阿里云平台优质作者、专注于Java后端技术领域。
涵盖技术内容Java后端、大数据、算法、分布式微服务、中间件、前端、运维等。
博主所有博客文件目录索引博客目录索引(持续更新)
视频平台b站-Coder长路 下面的v1.1.x、v1.2.x指的是我的开源项目https://gitee.com/changluJava/studio-vue
v1.1.x版本vue集成看板娘暂不使用在v1.2.x已替换
说明在截止到哈希吗为46678653b6cd6636f4a375fe7243618547a12df7及之前都是使用的这个方案后续已替换下面的开源方案4。 集成看板娘 对应文件资源 链接https://pan.baidu.com/s/1q1s0hL7fxAz68fP5tV9SyQ 提取码e6k2 在vue项目添加live2d可交互的看板娘
相关其他博客
https://www.fghrsh.net/post/123.html
效果 1、首先在index.html引入jquery
script srchttps://cdn.staticfile.org/jquery/2.2.4/jquery.min.js/script或者你可以将jquery下载到本地引入如
npm install jquery //之后再main.js中全局引入
import $ from jquery/dist/jquery
window.jquery window.$ $2、将对应四个文件放入 紧接着将对应的index.vue放入 3、最后在layout组件中进行引入组件 Live2d ///引入看板娘
import Live2d from /components/live2dcomponents: { // 引入组件Live2d},实现看板娘拖拽效果 本质使用的jquery-ui以及对应的css文件实现的拖拽效果要三个文件 由于在上面集成中的waifu-tips.js中本身就集成了拖拽 我们这里还需要引入jquery的ui库其中应该是需要draggable函数支持
网上的demo案例
style hrefhttps://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css/style
script srchttps://www.fghrsh.net/zb_system/script/jquery-1.8.3.min.js/script
script srchttps://www.fghrsh.net/zb_users/plugin/live2d/assets/jquery-ui.min.js/script这是我自己上传到图床里的备用
style hrefhttps://zhifengstudio.oss-cn-beijing.aliyuncs.com/assets/jquery-ui.min.css/style
script srchttps://zhifengstudio.oss-cn-beijing.aliyuncs.com/assets/jquery-1.8.3.min.js/script
script srchttps://zhifengstudio.oss-cn-beijing.aliyuncs.com/assets/jquery-ui.min.js/script对于vue的话直接在index.html中进行引入 后面改为了放置到当前本地文件引用。 方案资源备份存储 链接https://pan.baidu.com/s/1q4_IV0pzYtTlABmyDmM8_A
提取码w6BC当前最新调研2024.10.2 开源方案1OhMyLive2D推荐
官网https://oml2d.com/
b站配套视频https://www.bilibili.com/video/BV1TD421M7zm
github地址https://github.com/oh-my-live2d/oh-my-live2d
应用场景可直接应用于index.html相关的。 开源方案2fghrsh提供后端接口
配套视频live2d动态亚丝娜看板娘网页教程-零基础 https://www.bilibili.com/video/BV184411o75s
live2d-widgethttps://github.com/xiazeyu/live2d-widget.js
live2d后端API以及源码插件https://github.com/fghrsh
后端APIhttps://github.com/fghrsh/live2d_api前端源码插件https://github.com/fghrsh/live2d_demo
说明实际上上面的vue集成方案就是基于当前的这个live2d-widget以及fghrsh进行二开的。配置过程可见在vue项目添加live2d可交互的看板娘
问题描述使用了这个目前会出现模型渲染有问题情况后考虑使用vue-live2d。 开源方案3live2dw模型直接本地放置
Vue中引入看板娘教程见方式一https://blog.csdn.net/qq_57485314/article/details/127892079
直接将所有模型放置到前端本地工程中。 开源方案4vue-live2d支持vue推荐基于方案2改造 关于搭建 live2d api接口详细步骤https://blog.csdn.net/RAXCL/article/details/127685261 该开源方案同样也使用到了 live2d api开源up主个人自己搭建了一套api我们可以直接使用。 演示网址https://evgo2017.com/repo/vue-live2d
github网址https://github.com/evgo2017/vue-live2d
案例demohttps://github.com/evgo2017/vue-live2d/blob/master/example/App.vue v1.2.x版本集成vue-live2d
开发定位
位于开发分支feat_1.2.x_fsstudio提交哈希码e3aadc69735949e92058a856fa84b3137438fec1
集成步骤
安装依赖
npm install vue-live2d封装vue组件live2d.vue templatedivlive2d:stylestyle:model[Potion-Maker/Pio, school-2017-costume-yellow]:directiondirection:sizesize/live2d/div
/templatescript
import live2d from vue-live2dexport default {name: Live2d,components: {live2d},data () {return {direction: right,style: position: fixed;bottom: 0;right: 20px;z-index: 1;font-size: 0;-webkit-transform: translateY(3px);transform: translateY(3px);,width: 500,height: 500,size: 260,tips: {mouseover: [{selector: .vue-live2d,texts: [这样可以修改默认语句]}]}}},created() {},methods: {}
}
/scriptstyle scoped/style集成使用 Live2d/// 引入live2d看板娘
import Live2d from ../components/live2d/index.vuecomponents: { // 引入组件Live2d
},效果展示 参考文章
[1]. 搭建 live2d api接口详细步骤https://blog.csdn.net/RAXCL/article/details/127685261
[2]. vue-live2d开源演示https://evgo2017.com/repo/vue-live2d 整理者长路 时间2024.10.2
