VUE集成Live2d
- IT业界
- 2025-09-13 14:42:02
VUE集成Live2d
目前基于大模型，可以实现一个桌面的3D动画小人，个人猜测可以简介这个项目进行实现
1-参考网址试了很多项目，只有这个项目直观的把问题说清楚了
Live2D Vue3技术应用: blog.csdn.net/hh1233321/article/details/140694778个人编写代码仓库： gitee /enzoism/live2d-manual2-核心逻辑 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(' 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由讯客互联IT业界栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“VUE集成Live2d”
