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

VUE集成Live2d

news 2026/2/9 19:00:56

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

多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

编程新知 2026/2/8 16:53:48

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

编程新知 2025/8/23 5:51:08

【位运算】消失的两个数字（hard）

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

编程新知 2025/11/15 16:18:24

DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

编程新知 2025/9/24 13:35:36

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的 第一部分&#xff1a; 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...

编程新知 2025/8/27 0:09:05

Kubernetes 网络模型深度解析：Pod IP 与 Service 的负载均衡机制，Service到底是什么？

Pod IP 的本质与特性 Pod IP 的定位 纯端点地址&#xff1a;Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址&#xff08;如 10.244.1.2&#xff09;无特殊名称&#xff1a;在 Kubernetes 中&#xff0c;它通常被称为 “Pod IP” 或 “容器 IP”生命周期&#xff1a;与 Pod …...

编程新知 2025/11/4 22:48:45

深度剖析 DeepSeek 开源模型部署与应用：策略、权衡与未来走向

在人工智能技术呈指数级发展的当下&#xff0c;大模型已然成为推动各行业变革的核心驱动力。DeepSeek 开源模型以其卓越的性能和灵活的开源特性&#xff0c;吸引了众多企业与开发者的目光。如何高效且合理地部署与运用 DeepSeek 模型&#xff0c;成为释放其巨大潜力的关键所在&…...

编程新知 2025/12/27 19:12:07

二维FDTD算法仿真

二维FDTD算法仿真&#xff0c;并带完全匹配层&#xff0c;输入波形为高斯波、平面波 FDTD_二维/FDTD.zip , 6075 FDTD_二维/FDTD_31.m , 1029 FDTD_二维/FDTD_32.m , 2806 FDTD_二维/FDTD_33.m , 3782 FDTD_二维/FDTD_34.m , 4182 FDTD_二维/FDTD_35.m , 4793...

编程新知 2025/9/10 21:14:06

Git 命令全流程总结

以下是从初始化到版本控制、查看记录、撤回操作的 Git 命令全流程总结&#xff0c;按操作场景分类整理&#xff1a; 一、初始化与基础操作 操作命令初始化仓库git init添加所有文件到暂存区git add .提交到本地仓库git commit -m "提交描述"首次提交需配置身份git c…...

编程新知 2025/10/22 3:22:49

npm安装electron下载太慢，导致报错

npm安装electron下载太慢&#xff0c;导致报错 背景 想学习electron框架做个桌面应用&#xff0c;卡在了安装依赖&#xff08;无语了&#xff09;。。。一开始以为node版本或者npm版本太低问题&#xff0c;调整版本后还是报错。偶尔执行install命令后&#xff0c;可以开始下载…...

编程新知 2026/2/5 8:04:32