Vue3项目中Live2D技术应用实战

Vue3项目中Live2D技术应用实战

引用

CSDN

1.

https://blog.csdn.net/hh1233321/article/details/140694778

Live2D是一种广泛应用于动画、游戏和社交媒体的3D角色渲染技术。本文将详细介绍如何在Vue3项目中集成Live2D，让开发者能够快速上手并实现自己的Live2D应用。

1. 创建Vue3项目

首先，使用Vue CLI创建一个新的Vue3项目：

vue create live2d

2. 下载Live2D素材资源

访问Live2D示例数据集（可能需要翻墙）下载所需的Live2D模型素材。

3. 下载Cubism SDK for Web

从Live2D Cubism SDK for Web下载适用于Web的Cubism SDK。

4. 配置项目环境

将下载的SDK中的live2dcubismcore.min.js文件复制到Vue3项目的public目录下，并在index.html中引入。同时，将模型文件也放置到public目录中。

5. 安装Pixi依赖

使用npm安装必要的Pixi依赖：

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

6. 编写APP.vue代码

在APP.vue文件中编写Live2D的渲染代码：

<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. 运行项目

按照上述步骤配置完成后，运行项目即可看到Live2D模型的渲染效果：

通过本文的介绍，读者可以快速掌握在Vue3项目中集成和使用Live2D的基本方法。这为开发具有Live2D交互功能的Web应用提供了基础技术支持。