Live2D Vue3技术应用

1.先创建一个vue3项目

vue create live2d

2.下载live2d素材资源Live2D示例数据集 (可免费下载) | Live2D Cubism（可能需要翻墙）

3.下载Cubism SDK for WebLive2D Cubism SDK for Web | Live2D Cubism

4.找到刚下载的文件在core目录下将live2dcubismcore.min.js复制到vue3项目中的public文件夹下，并在index.html中引入，模型文件同样引入到public中

 5.安装pixi依赖

npm add pixi-live2d-display pixi.js@6.x

6.APP.vue代码部分

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

7.跑一下项目就发现可以正常运行啦