开箱即用的 Live2d ​

你可能注意到网站右下角的Live2d人物了，对此我对Live2d做了类封装几行代码就能实现网站加载Live2d人物。该库包含了live2d与live2d_3的模型。

安装 ​

npm i @tomiaa/live2d

使用 ​

import { Live2d } from "@tomiaa/live2d"

new Live2d({
  // el: "#live2d",
  el: document.getElementById("live2d"),
})

TS 类型 ​

// 配置类型
import type { Live2dOptions } from "@tomiaa/live2d"

依赖文件地址配置 ​

依赖文件的地址文件IP都在github，下面参数主要考虑到国内经常被墙，可以使用下面参数使用其他服务器地址。

• jsBaseURL：配置依赖的js文件baseURL地址目录，默认加载的https://github.com/tomiaa12/live2d/tree/main/public下的js文件，修改后需要保证该目录下也应该存在同样的文件。
• live2d_2_ModelBaseURL: live2d模型的baseURL地址目录，默认使用jsBaseURL参数。
• live2d_3_ModelBaseURL: live2d_3模型的baseURL地址目录，默认使用jsBaseURL参数。

Vue Demo ​

<template>
  <div ref="live2dContentRef"></div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue"
import { Live2d } from "@tomiaa/live2d"

const live2dContentRef = ref()

onMounted(() => {
  new Live2d({
    el: live2dContentRef.value,
    showLoading: false,
    maxWidth: 350,
  })
})
</script>

参数 ​

成员属性 ​