VUE集成Live2d
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