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

VUE集成Live2d

news 2025/9/19 7:30:19

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

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

编程新知 2025/9/6 20:28:13

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

编程新知 2025/9/7 0:12:53

c++ 面试题(1)-----深度优先搜索（DFS）实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

编程新知 2025/9/11 4:52:26

NFT模式：数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

编程新知 2025/8/27 2:19:34

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

编程新知 2025/8/27 10:42:43

听写流程自动化实践，轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

编程新知 2025/9/13 17:42:18

JAVA后端开发——多租户

数据隔离是多租户系统中的核心概念&#xff0c;确保一个租户&#xff08;在这个系统中可能是一个公司或一个独立的客户&#xff09;的数据对其他租户是不可见的。在 RuoYi 框架&#xff08;您当前项目所使用的基础框架&#xff09;中&#xff0c;这通常是通过在数据表中增加一个…...

编程新知 2025/8/15 1:44:58

Linux 内存管理实战精讲：核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

编程新知 2025/9/2 17:47:53

redis和redission的区别

Redis 和 Redisson 是两个密切相关但又本质不同的技术&#xff0c;它们扮演着完全不同的角色&#xff1a; Redis: 内存数据库/数据结构存储 本质&#xff1a; 它是一个开源的、高性能的、基于内存的 键值存储数据库。它也可以将数据持久化到磁盘。 核心功能&#xff1a; 提供丰…...

编程新知 2025/8/4 8:15:54

C++--string的模拟实现

一,引言 string的模拟实现是只对string对象中给的主要功能经行模拟实现&#xff0c;其目的是加强对string的底层了解&#xff0c;以便于在以后的学习或者工作中更加熟练的使用string。本文中的代码仅供参考并不唯一。 二,默认成员函数 string主要有三个成员变量&#xff0c;…...

编程新知 2025/9/9 10:04:09