vue3中使用live2D

概述

本文将介绍如何在vue3项目中使用Live2D。

Live2D 介绍

Live2D 是什么

Live2D 是一种用于将二维图像转化为可动画三维模型的技术，主要应用于游戏、虚拟角色和互动应用中。它允许开发者通过对静态图像进行分层和建模，使角色在不同角度下能够进行流畅的动作和表情变化。

Live2D 主要特点

• 动态表现：Live2D 可以让角色在不改变原始图像的情况下，实现多种动作和表情，例如眨眼、微笑、转头等。

• 用户交互：它可以与用户的输入进行互动，比如鼠标移动或触摸屏幕时，角色会作出相应的反馈。

• 应用广泛：被广泛应用于手机游戏、动画、虚拟直播、社交软件等领域。

• 易于使用：通过 Live2D 提供的工具（如 Live2D Cubism），艺术家可以方便地创建和编辑模型，无需深入的编程知识。

Live2D 效果

vue3 中使用 Live2D

如果前端项目是用vite搭建，则需要在index.html中引入live2d.min.js库，因为在 vue 组件中引入会报错。

封装 Live 组件

template

template部分如下:

<template>
  <div
    :class="{
      'vue-live2d': true,
      'vue-live2d-on-left': true,
      // 'vue-live2d-on-right': direction === 'right',
    }"
    :style="{
      width: `300px`,
      height: `300px`,
      position: 'absolute',
      left: '10px',
      bottom: '20px',
    }"
    @mouseover="openLive2dTool"
    @mouseout="closeLive2dTool"
  >
    <div
      v-show="true"
      v-html="data.tipText"
      :class="{
        'vue-live2d-tip': true,
        'vue-live2d-tip-on-top': true,
        // 'vue-live2d-tip-on-bottom': tipPosition === 'bottom',
      }"
    ></div>
    <canvas
      :id="customId"
      v-show="mainShow"
      :class="{
        'vue-live2d-main': true,
        'vue-live2d-main-on-left': true,
        // 'vue-live2d-main-on-right': direction === 'right',
      }"
      width="300"
      height="300"
    >
    </canvas>
    <div v-show="toolShow" class="vue-live2d-tool">
      <span
        v-for="(tool, index) in tools"
        :key="index"
        :class="tool.className"
        v-html="tool.svg"
        @click="tool.click"
      />
    </div>
    <div
      v-show="toggleShow"
      @click="