x-live2d
1.0.5 • Public • Published
live2dcubismcore.min.js文件需要自己从官网下载，官方不允许分发
使用前注意
- 基于CubismSdkForWeb-4 版本进行的封装，需要moc3模型(包含的材质文件是Haru.2048(模型名.图片尺寸),而非textures的文件夹,motions下文件按数字递增)
- public/live2d/core/live2dcubismcore.min.js 根目录下需要存在该文件
- live2d/resources 下存在模型文件(moc3格式) 可导入官方SDK目录下Resources文件 或 下方地址
- CubismSdkForWeb修改后源码下载 https://gitee.com/xyzgy/cubism-sdk-for-web
安装
npm i x-live2d
使用
import live2d from "x-live2d/live2d.vue";
components: { live2d }
<live2d :show="true" >
//对话框，工具条使用slot允许自定义
<template v-slot:info></template>
<template v-slot:tool></template>
</live2d>
注意
在app.vue文件中使用，暂时未解决单页面使用，切换页面之后全局变量Live2DCubismCore带来的各种问题- 1.0.3 版本解决上述问题
模型文件说明
- 模型数据（moc3）
- 动态数据（motion3.json）
- 模型设定文件（model3.json）
- 物理模拟设定文件（physics3.json）
- 表情数据（exp3.json）
- 姿势设定文件（pose3.json）
- 显示辅助文件（cdi3.json）
- 声音文件（wav）
模型地址 (不适用CubismSdkForWeb4版本)
参考文档
x-live2d使用说明
- 基于vue3开发，可根据需要配合bundle.js进行二次封装
参数
| 字段 |
说明 |
类型 |
默认值 |
备注 |
| position |
live2d位置 |
String |
"bottom: 10px;right: 10px;" |
|
| show |
live2d显示与隐藏 |
Boolean |
true |
全局一次性引入，通过改变该字段值控制在页面的显示与隐藏 |
| live2dcubismcore |
live2dcubismcore 路径 |
String |
"live2d/core/live2dcubismcore.min.js" |
public目录下 |
| resourcesPath |
模型根路径 |
String |
"live2d/resources/" |
public目录下 |
| modelDir |
模型目录名 |
Array |
["Haru", "Hiyori"] |
|
| backImageName |
背景图片 |
String |
'' |
|
| gearImageName |
右上角齿轮 |
String |
null |
|
| debugLogEnable |
是否调试模式 |
Boolean |
false |
|
| headMessage |
点击头部显示文案 |
Array |
[ "讨厌不要掐人家的脸嘛"] |
|
| bodyMessage |
点击身体 |
Array |
["哼，坏人"] |
|
| defaultMessage |
未监听指定区域时显示文案 |
Array |
["我是谁"] |
|
| isGlobal |
模型是否跟随全局鼠标移动 |
Boolean |
true |
|
| isAuto |
是否自动显示预设文案 |
Boolean |
true |
|
| autoSpeakTime |
文案自动切换间隔 |
Number |
5000 |
|
方法
| 字段 |
说明 |
备注 |
| initLive2d |
初始化模型 |
|
| nextScene |
切换下一个模型 |
|
| changeScene(index) |
切换指定模型 |
|
| addEventListener |
全局监听 |
|
| mousedown |
点击模型 |
|
bundle.js 导出变量
- LAppDefine 初始化对应变量
- LAppDelegate 模型的初始化及销毁等
- LAppLive2DManager 模型的信息及相关交互
Package Sidebar
Install
Weekly Downloads