当前位置： 首页 > news >正文

VUE集成Live2d

news 2025/11/8 4:34:52

VUE集成Live2d

目前基于大模型，可以实现一个桌面的3D动画小人，个人猜测可以简介这个项目进行实现

1-参考网址

试了很多项目，只有这个项目直观的把问题说清楚了

  • Live2D Vue3技术应用:https://blog.csdn.net/hh1233321/article/details/140694778
  • 个人编写代码仓库：https://gitee.com/enzoism/live2d-manual

2-核心逻辑

  • 1）下载Live2d官方文件
  • 2）创建VUE项目
  • 3）VUE项目添加Live2d的【模型文件】+【js】文件
  • 4）然后修改App.vue文件

3-上手实践

1-创建VUE项目

# 1-创建VUE项目
vue create live2d-render# 2-Vue3项目创建/安装软件包/并运行
- cd live2d-render
- npm run serve

2-安装live2d对应的依赖

npm install pixi-live2d-display pixi.js@6.x

3-拷贝2D的模型到项目中

1. 下载 Live2D Cubism SDK
  • 前往 Live2D Cubism SDK 下载页面。
  • 选择 Web 版本，下载后解压文件。
  • 找到 live2dcubismcore.js 文件，通常位于解压后的 Core 文件夹中。
2. 将 live2dcubismcore.js 文件放置到项目中
  • 将 live2dcubismcore.js 文件复制到 Vue 项目的 public 目录下，例如 public/live2dcubismcore.js。
3. 在 index.html 中引入 live2dcubismcore.js
  • 打开 public/index.html 文件，在 <body> 标签中添加以下代码：
    <script src="live2dcubismcore.js"></script>
4. 确保正确加载模型文件

可以从下载的Live2D Cubism SDK 下载页面中【CubismSdkForWeb-5-r.3/Samples/Resources】下找一个样例

  • 确保 Live2D 模型文件（如 .model3.json）已放置在 public 目录下，并在代码中正确引用路径。例如：
    const model = await Live2DModel.from('models/your-model-name.model3.json');

5-编辑显示页面

<template>
<canvas ref="liveCanvas"></canvas></template><script setup >
import {ref,onMounted,onBeforeUnmount} from  "vue";
import * as PIXI from "pixi.js"
import { Live2DModel } from "pixi-live2d-display/cubism4";
console.log(Live2DModel,'===Live2DModel')window.PIXI =PIXI
let app;
let model;
const liveCanvas=ref(null);
onMounted(async ()=>{console.log(liveCanvas,'1111');app=new PIXI.Application({view:liveCanvas.value || undefined,autoStart:true,resizeTo:window,backgroundAlpha:0})// model = await Live2DModel.from('https://cdn.jsdelivr.net/gh/guansss/pixi-live2d-display/test/assets/haru/haru_greeter_t03.model3.json')model = await Live2DModel.from('./kebai_model/kei_basic_free.model3.json')app.stage.addChild(model);model.scale.set(0.1)
});
onBeforeUnmount(()=>{model?.destroy();app?.destroy()
})</script><style scoped></style>

6-运行项目

npm run serve

相关文章：

VUE集成Live2d

VUE集成Live2d 目前基于大模型&#xff0c;可以实现一个桌面的3D动画小人&#xff0c;个人猜测可以简介这个项目进行实现 1-参考网址 试了很多项目&#xff0c;只有这个项目直观的把问题说清楚了 Live2D Vue3技术应用:https://blog.csdn.net/hh1233321/article/details/1406947…...

编程日记 2025/3/5 21:01:46

【CPP面经】科大讯飞 腾讯后端开发面经分享

文章目录 C 面试问题整理基础问题简答1. 内存对齐2. this 指针3. 在成员函数中删除 this4. 引用占用内存吗&#xff1f;5. C 越界访问场景6. 进程通信方式7. 无锁队列实现8. ping 在哪一层&#xff1f;实现原理&#xff1f;9. HTTPS 流程10. GDB 使用及 CPU 高使用定位11. 智能…...

编程日记 2025/3/5 20:59:42

el-card 结合 el-descriptions 作为信息展示

记录下el-card 组合 el-descriptions 实现动态展示信息 文章结构 实现效果1. el-descriptions 组件使用1.1 结合v-for实现列表渲染1.2 解析 2. 自定义 el-descriptions 样式2.1 修改背景色、字体颜色2.2 调整字体大小2.3 解析 3. el-card 结合 el-descriptions 作为信息展示3.…...

编程日记 2025/3/5 20:58:40

GaussDB自带诊断工具实战指南

一、引言 GaussDB是一种分布式的关系型数据库。在数据库运维中&#xff0c;快速定位性能瓶颈、诊断故障是保障业务连续性的关键。GaussDB内置了多种诊断工具&#xff0c;结合日志分析、执行计划解析和实时监控功能&#xff0c;帮助开发者与运维人员高效解决问题。本文深入讲解…...

编程日记 2025/3/5 20:57:38

LeetCode 链表章节

简单 21. 合并两个有序链表 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1&#xff1a; 输入&#xff1a;l1 [1,2,4], l2 [1,3,4] 输出&#xff1a;[1,1,2,3,4,4]示例 2&#xff1a; 输入&#xff1a;l1 [], l2…...

编程日记 2025/3/5 20:51:29

SSL证书和HTTPS：全面解析它们的功能与重要性

每当我们在互联网上输入个人信息、进行在线交易时&#xff0c;背后是否有一个安全的保障&#xff1f;这时&#xff0c;SSL证书和HTTPS便扮演了至关重要的角色。本文将全面分析SSL证书和HTTPS的含义、功能、重要性以及它们在网络安全中的作用。 一、SSL证书的定义与基本概念 S…...

编程日记 2025/3/5 20:43:12

正交投影与内积空间：机器学习的几何基础

前言 本文隶属于专栏《机器学习数学通关指南》&#xff0c;该专栏为笔者原创&#xff0c;引用请注明来源&#xff0c;不足和错误之处请在评论区帮忙指出&#xff0c;谢谢&#xff01; 本专栏目录结构和参考文献请见《机器学习数学通关指南》 正文 &#x1f50d; 1. 内积空间的…...

编程日记 2025/3/5 20:42:09

Qt中txt文件输出为PDF格式

main.cpp PdfReportGenerator pdfReportGenerator;// 加载中文字体if (QFontDatabase::addApplicationFont(":/new/prefix1/simsun.ttf") -1) {QMessageBox::warning(nullptr, "警告", "无法加载中文字体");}// 解析日志文件QVector<LogEntr…...

编程日记 2025/3/5 20:41:07

《HelloGitHub》第 107 期

兴趣是最好的老师&#xff0c;HelloGitHub 让你对编程感兴趣&#xff01; 简介 HelloGitHub 分享 GitHub 上有趣、入门级的开源项目。 github.com/521xueweihan/HelloGitHub 这里有实战项目、入门教程、黑科技、开源书籍、大厂开源项目等&#xff0c;涵盖多种编程语言 Python、…...

编程日记 2025/3/5 20:40:05

Langchain解锁LLM大语言模型的结构化输出能力（多种实现方案）

在 LangChain解锁LLM大语言模型的结构化输出能力&#xff1a;调用 with_structured_output() 方法 这篇博客中&#xff0c;我们了解了格式化LLM输出内容的必要性以及如何通过调用langchain框架中提供的 with_structured_output() 方法对LLM输出进行格式化&#xff08;三种可选方…...

编程日记 2025/3/5 20:33:57

AI数据分析：deepseek生成SQL

在当今数据驱动的时代&#xff0c;数据分析已成为企业和个人决策的重要工具。随着人工智能技术的快速发展&#xff0c;AI 驱动的数据分析工具正在改变我们处理和分析数据的方式。本文将着重介绍如何使用 DeepSeek 进行自动补全SQL 查询语句。 我们都知道&#xff0c;SQL 查询语…...

编程日记 2025/3/5 20:29:52

力扣-动态规划-115 不同子序列

思路 dp数组定义&#xff1a;0_i-1的字符串中有0_j-1的字符串有dp[i][j]个递推公式&#xff1a; if(s[i-1] t[j-1]){dp[i][j] dp[i-1][j-1] dp[i-1][j]; }else{dp[i][j] dp[i-1][j]; } 在该元素相同时&#xff0c;有两种可能1&#xff1a;使用该元素&#xff0c;所以0_i-2…...

编程日记 2025/3/5 20:28:50

Qt C++ 开发 动态上下页按钮实现

项目开发&#xff0c;想实现动态的显示按钮&#xff0c;考虑使用QStackedWidget做两个页面去切换。 首先&#xff0c;我们使用Qt ui 画出两个QStackedWidget的两个页面 要实现切换&#xff0c;我们只需要调用stackedWidget->setCurrentIndex(index)就行。 那么如何自动调…...

编程日记 2025/3/5 20:27:49

数据结构第五节：排序

1.常见的排序算法 插入排序&#xff1a;直接插入排序、希尔排序 选择排序&#xff1a;直接选择排序、堆排序 交换排序&#xff1a;冒泡排序、快速排序 归并排序&#xff1a;归并排序 排序的接口实现&#xff1a; // 1. 直接插入排序 void InsertSort(int* a, int n); // 2. 希…...

编程日记 2025/3/5 20:25:46

从文件到块: 提高 Hugging Face 存储效率

Hugging Face 在Git LFS 仓库中存储了超过30 PB 的模型、数据集和 Spaces。由于 Git 在文件级别进行存储和版本控制&#xff0c;任何文件的修改都需要重新上传整个文件。这在 Hub 上会产生高昂的成本&#xff0c;因为平均每个 Parquet 和 CSV 文件大小在 200-300 MB 之间&#…...

编程日记 2025/3/5 20:22:41

Android14 串口控制是能wifi adb实现简介

Android14 串口控制是能wifi adb实现简介 一、前言 文章目录 Android14 串口控制是能wifi adb实现简介一、前言二、Android14 串口控制是能wifi adb实现1、设置prop属性命令开启adb&#xff08;1&#xff09;相关prop属性设置&#xff08;2&#xff09;在设置界面或者 ifconfi…...

编程日记 2025/3/5 20:21:40

vue3中 组合式~测试深入组件：事件 与 $emit()

一、语法(props) 第一步&#xff1a;在组件模板表达式中&#xff0c;可以直接用$emit()方法触发自定义事件&#xff0c; <!-- MyComponent --> <button click"$emit(someEvent)">Click Me</button> 第二步父组件可以通过 v-on (缩写为 ) 来监听…...

编程日记 2025/3/5 20:20:39

SQL-labs13-16闯关记录

http://127.0.0.1/sqli-labs/less-13/ 基于POST单引号双注入变形 1&#xff0c;依然是一个登录框&#xff0c;POST型SQL注入 2&#xff0c;挂上burpsuite&#xff0c;然后抓取请求&#xff0c;构造请求判断漏洞类型和闭合条件 admin 发生了报错&#xff0c;根据提示闭合方式是(…...

编程日记 2025/3/5 20:19:38

基于微信小程序的停车场管理系统的设计与实现

第1章 绪论 1.1 课题背景 随着移动互联形式的不断发展&#xff0c;各行各业都在摸索移动互联对本行业的改变&#xff0c;不断的尝试开发出适合于本行业或者本公司的APP。但是这样一来用户的手机上就需要安装各种软件&#xff0c;但是APP作为一个只为某个公司服务的一个软件&a…...

编程日记 2025/3/5 20:18:36

DAIR-V2X-R数据集服务器下载

【官方github链接】https://github.com/ylwhxht/V2X-R 点击并登录 选择并点击下载 浏览器弹窗&#xff0c;右键选择复制下载链接 ------------------------------------服务器下载----------------------------------------- 登录服务器&#xff0c;选在要下载的文件夹复制路…...

编程日记 2025/3/5 20:11:29

零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

编程新知 2025/9/22 15:46:39

脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

编程新知 2025/7/31 5:34:43

渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

编程新知 2025/11/7 17:10:35

江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

编程新知 2025/10/31 2:55:19

在Ubuntu中设置开机自动运行（sudo）指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

编程新知 2025/10/28 23:14:00

Mac软件卸载指南，简单易懂！

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

编程新知 2025/10/27 13:40:44

深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

编程新知 2025/10/30 23:46:10

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

编程新知 2025/9/27 18:25:59

多模态大语言模型arxiv论文略读（108）

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

编程新知 2025/10/30 22:15:43

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

编程新知 2025/9/24 10:52:31