给自己的vue网站添加live2d

最新推荐文章于 2024-08-03 20:57:01 发布
最新推荐文章于 2024-08-03 20:57:01 发布
阅读量926 收藏 1
点赞数 1
分类专栏： 前端 随笔 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36576430/article/details/127793635
版权

使用 stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platform (github.com)

引入live2d-widget

下载源码，将下载好的文件放在public文件夹下，保证文件能被打包

直接在APP.vue中引用autoload即可

live2d的一些自定义

  1. 可以将live2d_path修改为本地，这样就可以通过修改waifu-tips.json文件来修改气泡内容
  2. 如果想使用自定义live2d模型，需要自定义后端apiPath,java版可以参考​​​​​​WhiteMagic2014/live2d_api_java: 看板娘live2d_api服务端(java版) (github.com)

原博发布于：inGamev

inGamev
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Live2d vue 插件 将live2d引入vue工程 在网页上添加live2d模型
weixin_42740139的博客
07-27 7455
Live2d vue 插件 将live2d引入vue工程 在网页上添加live2d模型 前面的废话： Live2d火过一阵，因为当我搜索“live2d 添加到网页上“的时候可以看到很多宅友已经给自己的博客首页加上了live2d看板娘并且发了博客跟大家分享了添加方法。 Live2d官方已经开源了网页上用的WebGL SDK，还提供了若干示例代码，鼓励开发者在更多场景下使用live2d。不过...
pixi-live2d-display:一个PixiJS插件，可以显示任何形式的Live2D模型
05-02
pixi-live2d-display v5的Live2D集成。 该项目旨在成为Web平台上的通用Live2D框架。 尽管正式的Live2D框架非常复杂且有问题，但该项目已对其进行了重写，以统一和简化API，这使您无需了解内部系统的工作原理就可以在较高级别上控制Live2D模型。 特征 支持所有版本的Live2D模型 支持PIXI.RenderTexture和PIXI.Filter Pixi样式的转换API：位置，比例，旋转，倾斜，锚点 自动互动：重点关注，命中测试 与官方框架相比，增强了动作保留逻辑 从上传的文件/ zip文件加载（实验） 全打字-我们都爱打字！ 要求 PixiJS：> 5.2.0（未测试较低版本） 浏览器：WebGL，ES6 演示版 文献资料 API文档 立体主义 立体派是Live2D SDK的名称。 到目前为止，它有三个版本：立体主义2.1，立体主义3和立
Live2D Widget.js：让网页动起来的轻量级动画库
gitblog_00033的博客
03-25 630
Live2D Widget.js：让网页动起来的轻量级动画库 项目地址:https://gitcode.com/xiazeyu/live2d-widget.js 项目简介 Live2D Widget.js 是一个基于 JavaScript 的开源库，它实现了著名的二维动态模型技术——Live2D，并将其轻量化应用在Web环境中。此项目由开发者夏泽宇打造，旨在为网页开发者提供一种简单易用的方式，将生...
在vue项目添加live2d可交互的看板娘
hk1052606583的博客
01-27 3664
在vue项目添加live2d可交互的看板娘
Vue-live2d在项目中展示Live2D 模型
weixin_43073383的博客
03-22 797
Live2D 技术可以为网页增添一些趣味性，而 Vue-live2d 是一个基于 Live2D 技术的 Vue 组件，可以帮助我们在 Vue 项目中展示可爱的 Live2D 模型。在本文中，我们将介绍如何安装、配置和使用 Vue-live2d，并展示一些示例代码。现在，我们可以在 Vue 组件中使用 Vue-live2d 组件来展示 Live2D 模型。首先，我们需要安装 Vue-live2d。// xxx.model.json 的路径。//看板娘的表现位置left。//人物文件夹的位置。
vue中使用live2d，看板娘！
答案的博客
08-25 9558
普通的html中，咱们要引入这个太简单了！ 新建一个页面，复制下边代码就可以出来了！ <!DOCTYPE html> <html lang="en"> <head> </head> <body> <div id="page_end_html"> <script type="text/javascript" ...
vue3组件中使用live2d看板娘（仰望星空的sun）
qq_39123467的博客
07-19 1018
因为上个官方包版的canvas总是不能按理想状态更好的控制，渲染在vue中，所以我依然想参考“仰望星空的sun”大佬的笔记以及git开源项目，但是似乎困难重重，打包后的ts被vue当做js引用后使用总会出现一些问题，所以现在是没有成功实现，但是我还是要记个笔记留个底。
live2d在vue中的运用
sungancd的博客
07-14 2581
live2d在vue中的运用: 1.首先先下载live2d的安装包 链接：https://pan.baidu.com/s/1Ay3Tk3sZInHHwqpBkBHP7w 提取码：zjsk 2.将下载好的安装包解压到static下 3.在上一级目录中的index.html文件中加标签 文件地址一定要对应!!! <script type="text/javascript" src="./static/live2dw/lib/L2Dwidget.min.js"></script> 4
Live2D应用(vue2)详细教程以及问题解决
wxt987的博客
04-09 939
live2d 在vue2中的应用,详细教程,npm问题解决
vue-live2d:vue live2d招牌女孩（演示
05-04
项目引入npm install vue-live2d// 在组件中引入import vueLive2d from 'vue-live2d'// 组件中的使用方法具体参考 `example/App.vue` 文件3. 本地浏览其中包含源码，example/App.vue 为使用示例。$ git clone ...
在Vue中快速引入Live2d
08-12
Live2D是一种二维实时渲染技术，可以创建逼真的动态角色模型，广泛应用于游戏、社交媒体应用和网站中。Vue.js是一个轻量级且功能强大的渐进式JavaScript框架，非常适合构建用户界面。接下来我们将详细介绍如何在Vue...
vue项目引入live2d-高度自定义方法
07-29
vue项目引入live2d-高度自定义方法
live2d-widget.js:在网站上集成Live2D看板娘具有开箱即用的体验
05-11
在网站上集成Live2D看板娘具有开箱即用的体验欢迎使用和Star支持，如使用过程中碰到问题，可以提出Issue，我会尽力完善线上预览预览 :right_arrow:项目使用一款简洁优雅的hexo主题：一款简洁优雅的VuePress主题：Vue...
Hexo项目：添加live2d模型
修行的凡人的博客
03-10 612
基于Hexo架构，快速开发博客项目
Vue系列面试题
qq_44186810的博客
07-23 1245
Vue2中采用Object.defineProperty来实现数据响应式，Object.definePropery虽然可以监听到数组的变化，但是由于在性能和体验的性价比上考虑，Vue2放弃了这个特性。1）v-for优先于v-if被解析，从源码中发现，先处理静态节点，在处理once，在处理for，在处理if，代码显示for的优先级比if高，断点调试也证实for优先于if。v-if：是惰性渲染机制，在属性初始为false时，组件就不会被渲染，直到条件为true，并且切换条件时会触发销毁/挂载组件。
Vue详解
最新发布
敲厉害的燕宝的博客
08-03 555
Vue 是一套用于构建用户界面的渐进式 JavaScript 框架。
运行中动态加载远程vue文件，解析template、script、style并注册全局组件：
qq_42152032的博客
08-03 248
(1).通过http请求获取组件数据，然后使用http-vue-loader插件解析script(解析为各生命周期钩子函数和methods对象),然后动态注册为vueComponent使用。 通过:is 来动态切换组件。 必须使用全量vue库，因为需要Vue来解析。 因为template已由vue2-sfc-loader解析了，可不用全量vue库。),然后动态注册为vueComponent使用。通过:is 来动态切换组件。(1).通过http请求获取组件数据，然后。后再注册为VueComponent。
数理方法习题 前六章.pdf
08-03
数理方法习题 前六章
Vue2怎么使用自己制作的live2d人物
05-13
要在Vue2中使用自己制作的live2d人物，您可以按照以下步骤进行： 1. 在Vue项目中安装live2d-widget.js插件。您可以使用npm或yarn来安装此插件： ``` npm install live2d-widget ``` 或者 ``` yarn add live2d-...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值