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

VUE集成Live2d

article 2026/3/25 21:35:29

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…...

编程日记 2026/3/16 20:34:53

C++蓝桥杯基础篇（七）

片头 嗨~小伙伴们&#xff0c;大家好&#xff01;今天我们来一起学习蓝桥杯基础篇&#xff08;七&#xff09;&#xff0c;学习相关字符串的知识&#xff0c;准备好了吗&#xff1f;咱们开始咯&#xff01; 一、字符与整数的联系——ASCII码 每个常用字符都对应一个-128~127的…...

编程日记 2026/3/16 20:23:10

常见的非关系性数据库

非关系型数据库&#xff08;NoSQL&#xff09;有多种类型&#xff0c;每种类型针对不同的应用场景提供了不同的存储和查询方式。以下是一些常见的非关系型数据库及其特点&#xff1a; 1. 键值数据库&#xff08;Key-Value Stores&#xff09; 特点&#xff1a;数据以键值对的…...

编程日记 2026/2/20 23:20:04

【Java反序列化测试】

Java反序列化测试 1. 识别反序列化入口点2. 构造探测Payload3. 发送Payload并观察结果4. 绕过可能的防护5. 自动化工具注意事项总结 Java反序列化测试&#xff1a; 1. 识别反序列化入口点 常见入口&#xff1a; HTTP请求参数&#xff08;如POST数据、Cookie、Headers&#xff…...

编程日记 2026/2/21 16:29:04

代码规范和简化标准

代码规范和简化标准是编写高质量、可维护、可扩展和可读代码的基本原则。遵循这些标准不仅能提高团队协作效率&#xff0c;还能减少出错的概率和后期维护的成本。以下是一些常见的代码规范和简化标准&#xff1a; 1. 命名规范 变量命名&#xff1a; 使用具有描述性的名称&…...

编程日记 2026/3/2 14:59:57

RabbitMQ怎么实现延时支付？

一、使用“死信队列”消息过期时间 1、原理&#xff1a; 设置消息”存活时间“&#xff0c;如果没有被及时消费&#xff0c;就会被丢弃到一个”死信队列“&#xff0c;然后消费者监听这个死信队列处理消息 2、步骤&#xff1a; 2.1、创建两个队列&#xff1a; 2.1.1、普通队…...

编程日记 2026/2/24 1:58:34

node项目前后端密码加密传输及存储方案

前端&#xff1a;使用crypto-js库的SHA256算法&#xff0c;包含用户注册时使用的邮箱加上自定义的secret key生成盐值&#xff0c;接着使用PBKDF2算法进行加密。最后将加密后的密码传给后端。 import CryptoJS from "crypto-js";export const encryptPassword (ema…...

编程日记 2026/2/21 22:44:50

迷你世界脚本方块接口：Block

方块接口&#xff1a;Block 彼得兔 更新时间: 2024-08-27 11:04:56 具体函数名及描述如下&#xff1a; 序号 函数名 函数描述 1 isSolidBlock(...) 是否是固体方块 2 isLiquidBlock(...) 是否是液体方块 3 isAirBlock(...) 是否是气体方块 4 getBl…...

编程日记 2026/2/21 0:02:51

el-input实现金额输入

需求&#xff1a;想要实现一个输入金额的el-input&#xff0c;限制只能输入数字和一个小数点。失焦数字转千分位&#xff0c;聚焦转为数字&#xff0c;超过最大值&#xff0c;红字提示 效果图 失焦 聚焦 报错效果 // 组件limitDialog <template><el-dialog:visible.s…...

编程日记 2026/3/17 4:25:31

双碳战略下的智慧能源实践：安科瑞储能管理系统助力企业绿色转型

在全球碳中和目标加速推进的背景下&#xff0c;中国“十四五”规划明确提出构建以新能源为主体的新型电力系统&#xff0c;储能技术成为支撑能源结构转型的核心要素。安科瑞储能能量管理系统作为企业级智慧能源解决方案的核心载体&#xff0c;凭借其技术创新与场景适配能力&…...

编程日记 2026/3/16 20:34:56

《鸢尾花数学大系：从加减乘除到机器学习》开源资源

《鸢尾花数学大系&#xff1a;从加减乘除到机器学习》开源资源 Gitee&#xff1a;https://gitee.com/higkoo/ bilibili&#xff1a;https://space.bilibili.com/513194466 GitHub&#xff1a;https://github.com/Visualize-ML...

编程日记 2026/3/16 20:35:52

本地部署HDFS集群

首先完成本地部署大数据集群前置准备&#xff0c;可参考&#xff1a; 本地部署大数据集群前置准备https://blog.csdn.net/m0_73641796/article/details/145994787?spm1001.2014.3001.5501 1.下载hadoop 下载Hadoop安装包&#xff0c;本文用的是hadoop-3.3.4.tar.gz 2. 集群…...

编程日记 2026/3/16 20:35:02

Windows 环境下 Nginx、PHP 与 ThinkPHP 开发环境搭建

Windows 环境下 Nginx、PHP 与 ThinkPHP 开发环境搭建 目录 安装 Nginx 和 PHP配置 Nginx配置 PHP启动服务ThinkPHP 配置常见问题排查 1. 安装 Nginx 和 PHP 安装 Nginx 访问 Nginx 官网 下载 Windows 版本解压到指定目录&#xff0c;如 C:\nginx 安装 PHP 访问 PHP 官网…...

编程日记 2026/2/26 9:24:19

10.【线性代数】—— 四个基本子空间

十、 四个基本子空间 1. 列空间 C ( A ) C(A) C(A) in R m R^m Rm2. 零空间 N ( A ) N(A) N(A) in R n R^n Rn3. 行空间 C ( A T ) C(A^T) C(AT) in R n R^n Rn4. 左零空间 N ( A T ) N(A^T) N(AT) in R m R^m Rm综述5. 新的向量空间 讨论矩阵 A m ∗ n A_{m*n} Am∗n​…...

编程日记 2026/3/17 9:23:28

基于vue框架的游戏商城系统cq070（程序+源码+数据库+调试部署+开发环境）带论文文档1万字以上，文末可获取，系统界面在最后面。

系统程序文件列表 项目功能&#xff1a;用户,分类,商品信息,游戏高手,游戏代练 开题报告内容 基于Vue框架的游戏商城系统开题报告 一、研究背景与意义 随着互联网技术的飞速发展和游戏产业的蓬勃兴起&#xff0c;游戏商城作为游戏产业链中的重要一环&#xff0c;迎来了前所…...

编程日记 2026/3/16 20:35:03

我代表中国受邀在亚马逊云科技全球云计算大会re:Invent中技术演讲

大家好我是小李哥&#xff0c;本名叫李少奕&#xff0c;目前在一家金融行业公司担任首席云计算工程师。去年5月很荣幸在全球千万名开发者中被选为了全球亚马逊云科技认证技术专家&#xff08;AWS Hero&#xff09;&#xff0c;是近10年来大陆地区仅有的第9名大陆专家。同时作为…...

编程日记 2026/3/16 20:38:56

css3d放置的面板方向不对问题排查

以往在threejs左手坐标系下&#xff0c;cameranew THREE.Vector3(0, 0, 1)&#xff0c;好像在贴css3d的时候从来不会出问题。而这次接到一个朋友是用右手坐标系的&#xff0c;camera默认不设置方向&#xff0c;则应该是&#xff08;0&#xff0c;1&#xff0c;0&#xff09; c…...

编程日记 2026/3/18 22:43:31

网络安全法与等级保护 PPT 精华汇总

资源描述 本资源文件为《网络安全法与等级保护》的PPT精华汇总&#xff0c;内容涵盖了网络安全法与等级保护的总体框架及相关标准规范。该PPT详细介绍了网络安全法与等级保护的各个章节和条款&#xff0c;并提供了基础类和应用类的相关标准文件&#xff0c;帮助读者全面了解和…...

编程日记 2026/3/18 1:11:17

chrome下载文件提示“贵组织屏蔽了该文件，因为它不符合安全政策” 安装chrome插件出现问题

查了一圈发现有如下解决方法 可逐一排查 1. 检查是否安装了阿里旺旺&#xff0c;会导致你无法安装chrome的插件。卸载阿里旺旺后&#xff0c;重启chrome即可 2. 注册表出现问题&#xff0c;删除\HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Google\Chrome 下的 EnabledPlugins 文…...

编程日记 2026/3/1 16:47:49

linux磁盘满了怎么安全删除文件

df -h 通过df -h /dir 查看被占满的目录&#xff0c;dir替换为你的文件目录 du -sh * 进入被占满的目录&#xff0c;执行 du -sh * &#xff0c;查看哪些文件占的磁盘大 查看占用磁盘最大的文件 du -sh * | sort -rh | head -n N N通常可以设置为10 有的docker容器文件太…...

编程日记 2026/3/9 3:30:40

探秘基带算法：从原理到5G时代的通信变革【十】基带算法应用与对比

文章目录 三、算法在现代通信系统中的应用3.1 5G 通信中的应用3.1.1 信道编码与调制解调3.1.2 大规模 MIMO 技术3.1.3 案例分析&#xff1a;5G 基站与终端实现 3.2 卫星通信中的应用3.2.1 抗干扰与纠错编码3.2.2 信号处理与调制解调3.2.3 案例分析&#xff1a;卫星通信系统实例…...

编程日记 2026/3/21 8:00:59

io学习-----＞标准io

思维导图&#xff1a; 一.io的作用 io是实现对文件的操作&#xff0c;把运行结果存到文件中&#xff0c;读取文件的数据&#xff0c;方便后期查询。 二.io的概念 io是指系统 和外部设备或用户之间的数据交互 I:input 表示数据从外部设备输入到内存中&#xff1b; O:output…...

编程日记 2026/3/19 5:03:59

go语言中字符串嵌套

在Go语言中&#xff0c;字符串嵌套通常是指在字符串中包含另一个字符串。可以通过以下几种方式实现&#xff1a; 1. 使用双引号和转义字符 如果需要在字符串中嵌套双引号&#xff0c;可以使用转义字符 \ 来表示内部的双引号。例如&#xff1a; s : "He said, \"He…...

编程日记 2026/2/16 5:54:58

2024-2025学年职业院校技能大赛“大数据应用开发”赛项竞赛样题-解析

2025年职业院校技术大赛-高职大数据应用开发赛项专题。 2024-2025学年广东省职业院校技能大赛“大数据应用开发”赛项竞赛样题1-任务B&#xff1a;离线数据处理_解析2024-2025学年广东省职业院校技能大赛“大数据应用开发”赛项竞赛样题2-任务B&#xff1a;离线数据处理_解析2…...

编程日记 2025/11/15 7:09:20

LeetCode 面试题 17.19. 消失的两个数字

LeetCode 面试题 17.19. 消失的两个数字 思路&#x1f9d0;&#xff1a; 运用位运算&#xff0c;我们先创建一个变量tmp&#xff0c;依次异或nums和1~N所有整数&#xff0c;此时就可以得到两个数的异或值。 然后通过右移操作&#xff0c;逐位检查tmp中的每一位&#xff0c;找到…...

编程日记 2026/3/19 13:28:48

KaiwuDB| Google Spanner 经典架构回顾

前言 大数据时代 &#xff0c;随着移动互联网和物联网技术的发展 &#xff0c; 全球数据量呈现爆发式增长&#xff0c;已经远远超出集中式单机数据库的处理能力。CCF 数据库专委 2021 年发布的《“十四五”数据库发展趋势与挑战》显示&#xff0c; 各行各业海量数据的管理需求…...

编程日记 2026/3/21 18:41:04

拼电商客户管理系统

内容来自&#xff1a;尚硅谷 难度&#xff1a;easy 目 标 l 模拟实现一个基于文本界面的 《 拼电商客户管理系统 》 l 进一步掌握编程技巧和调试技巧&#xff0c;熟悉面向对象编程 l 主要涉及以下知识点&#xff1a; 类结构的使用&#xff1a;属性、方法及构造器 对象的创建与…...

编程日记 2026/3/23 5:59:12

Electron、Tauri及其它跨平台方案终极对比

Electron、Tauri及跨平台方案终极对比&#xff08;2025版&#xff09; 一、核心框架深度解析 1.1 Electron&#xff1a;Web技术的桌面霸主 技术架构 基于Chromium&#xff08;浏览器内核&#xff09; Node.js&#xff08;后端运行时&#xff09;的双进程架构&#xff0c;支持…...

编程日记 2026/3/25 20:12:52

WireGuard搭建网络，供整个公司使用

一、清理现有配置&#xff08;如已有失败尝试&#xff09; # 停止并删除现有 WireGuard 接口 sudo wg-quick down wg0 sudo rm -rf /etc/wireguard/wg0.conf# 验证接口已删除 (执行后应该看不到 wg0) ifconfig二、服务器端完整配置流程 1. 安装 WireGuard sudo apt update &…...

编程日记 2026/3/19 17:22:47

项目准备（flask+pyhon+MachineLearning）- 1

目录 这是一篇学习笔记 1. 搭建项目 2.前期准备工作 3.创建用户(user)模板 这是一篇学习笔记 目的&#xff1a;用flask快速实现发布有关机器学习的项目&#xff0c;掌握flask框架&#xff0c;机器学习模型的存储和调用。 1. 搭建项目 使用pycharm创建项目&#xff0c;fl…...

编程日记 2026/3/19 4:42:44