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

VUE集成Live2d

article 2025/3/6 2:32:17

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>