live2d-library

Live2d + TypeScript + Vite

基于 Live2d SDK 4.x 实现, 在官方给的 demo 上修改

视线跟踪设定

在 Model3.json 增加参数映射 Mapper 字段

{
    "Version": 3,
    "FileReferences": {
        "Moc": "FileReferences_Moc_0.moc3",
        "Textures": [
            "FileReferences_Textures_0_0.png",
        ],
        "Physics": "FileReferences_Physics_0.json",
        "Mapper": "Param_Mapper.json",
        "Motions": {
            "Idle": [
                {
                    "File": "FileReferences_Motions_Idle_0_File_0.json"
                }
            ],
            ...
        }
    },
    ...
}

Param_Mapper.json 参数映射文件实现, 文件中 Id 不用修改, 改 Value 为对应的参数即可, 如果没有实现 Param_Mapper.json 那么 id 值就是默认参数

{
  "Meta": {
    "MapperCount": 6
  },
  "Mapper": [
    {
      "Value": "PARAM_ANGLE_X",
      "Id": "ParamAngleX"
    },
    {
      "Value": "PARAM_ANGLE_Y",
      "Id": "ParamAngleY"
    },
    {
      "Value": "PARAM_ANGLE_Z",
      "Id": "ParamAngleZ"
    },
    {
      "Value": "PARAM_BODY_ANGLE_X",
      "Id": "ParamBodyAngleX"
    },
    {
      "Value": "PARAM_EYE_BALL_X",
      "Id": "ParamEyeBallX"
    },
    {
      "Value": "PARAM_EYE_BALL_Y",
      "Id": "ParamEyeBallY"
    }
  ]
}

模型命中检测

在 Model3.json 中 HitAreas 里面添加 Motion 字段, 点击 HitAreas Name 区域, 将自动获取 Motions 字段下对应的 Motion, 并执行

{
    "Version": 3,
    "FileReferences": {
        "Moc": "FileReferences_Moc_0.moc3",
        "Textures": [
            "FileReferences_Textures_0_0.png",
        ],
        "Physics": "FileReferences_Physics_0.json",
        "Mapper": "Param_Mapper.json",
        "Motions": {
            "Idle": [
                {
                    "File": "FileReferences_Motions_Idle_0_File_0.json"
                }
            ],
            "1": [
                {
                    "File": "FileReferences_Motions_Id_favor1_1_0_File_0.json",
                    "Sound": "FileReferences_Motions_1_0_Sound_0.mp3"
                },
                {
                    "File": "FileReferences_Motions_Id_favor1_2_0_File_0.json",
                    "Sound": "FileReferences_Motions_1_1_Sound_0.mp3"
                },
                {
                    "File": "FileReferences_Motions_Id_favor1_3_0_File_0.json",
                    "Sound": "FileReferences_Motions_1_2_Sound_0.mp3"
                }
            ],
            "2": [
                {
                    "File": "FileReferences_Motions_Id_favor2_1_0_File_0.json",
                    "Sound": "FileReferences_Motions_2_0_Sound_0.mp3"
                },
                {
                    "File": "FileReferences_Motions_Id_favor3_1_0_File_0.json",
                    "Sound": "FileReferences_Motions_2_1_Sound_0.mp3"
                }
            ],
            "3": [
                {
                    "File": "FileReferences_Motions_Id_favor4_1_0_File_0.json",
                    "Sound": "FileReferences_Motions_3_0_Sound_0.mp3"
                },
                {
                    "File": "FileReferences_Motions_Id_favor5_1_0_File_0.json",
                    "Sound": "FileReferences_Motions_3_1_Sound_0.mp3"
                },
                {
                    "File": "FileReferences_Motions_Id_favor6_1_0_File_0.json",
                    "Sound": "FileReferences_Motions_3_2_Sound_0.mp3"
                }
            ]
        }
    },
    "HitAreas": [
        {
            "Name": "head",
            "Id": "HitArea",
            "Motion": "1"
        },
        {
            "Name": "body",
            "Id": "HitArea2",
            "Motion": "2"
        },
        {
            "Name": "tui",
            "Id": "HitArea3",
            "Motion": "3"
        }
    ]
}

口形同步

在 Model3.json 文件中 Motions 字段下对应动作, 添加 Sound 字段, 以及 Groups 字段 Motions 还可以添加字幕 Text 通过 emitter.on('message', (text: string) => {}) 监听

{
    "Version": 3,
    "FileReferences": {
        ...
        "Motions": {
            "Idle": [
                {
                    "File": "FileReferences_Motions_Idle_0_File_0.json"
                }
            ],
            "1": [
                {
                    "File": "FileReferences_Motions_Id_favor1_1_0_File_0.json",
                    "Sound": "FileReferences_Motions_1_0_Sound_0.mp3",
                    "Text": "这是一段字幕"
                },
                {
                    "File": "FileReferences_Motions_Id_favor1_2_0_File_0.json",
                    "Sound": "FileReferences_Motions_1_1_Sound_0.mp3"
                },
                {
                    "File": "FileReferences_Motions_Id_favor1_3_0_File_0.json",
                    "Sound": "FileReferences_Motions_1_2_Sound_0.mp3"
                }
            ],
            "2": [
                {
                    "File": "FileReferences_Motions_Id_favor2_1_0_File_0.json",
                    "Sound": "FileReferences_Motions_2_0_Sound_0.mp3"
                },
                {
                    "File": "FileReferences_Motions_Id_favor3_1_0_File_0.json",
                    "Sound": "FileReferences_Motions_2_1_Sound_0.mp3"
                }
            ],
            "3": [
                {
                    "File": "FileReferences_Motions_Id_favor4_1_0_File_0.json",
                    "Sound": "FileReferences_Motions_3_0_Sound_0.mp3"
                },
                {
                    "File": "FileReferences_Motions_Id_favor5_1_0_File_0.json",
                    "Sound": "FileReferences_Motions_3_1_Sound_0.mp3"
                },
                {
                    "File": "FileReferences_Motions_Id_favor6_1_0_File_0.json",
                    "Sound": "FileReferences_Motions_3_2_Sound_0.mp3"
                }
            ]
        }
    },
    "Groups": [
        {
            "Target": "Parameter",
            "Name": "LipSync",
            "Ids": [
                "PARAM_MOUTH_OPEN_Y"
            ]
        },
        {
            "Target": "Parameter",
            "Name": "EyeBlink",
            "Ids": [
                "PARAM_EYE_L_OPEN",
                "PARAM_EYE_R_OPEN"
            ]
        }
    ]
    ...
}

教程

在HTML文档中引用官方 Cubism Core for Web

<script src="./Core/live2dcubismcore.min.js"></script>

安装

npm install live2d-library

yarn add live2d-library

使用 demo 查看 demo 需要翻墙 Github demo

import live2d from 'live2d-library'

interface Live2dOptions {
    canvas: HTMLCanvasElement
    models: string[]
    scale?: number
    position?: [number, number]
}

interface Live2dReturn {
    emitter: Emitter<Events>
    nextModel: () => void
    nextRandomModel: () => void
    onResize: () => void
    setScale: (scale: number) => void
    release: () => void
}

live2d(options: Live2dOptions)

浏览器支持列表

平台	浏览器	版本号
Android	Google Chrome	90.0.4430.210
Android	Microsoft Edge	46.04.4.5157
Android	Mozilla Firefox	88.1.4
iOS / iPadOS	Google Chrome	90.0.4430.216
iOS / iPadOS	Microsoft Edge	46.3.13
iOS / iPadOS	Mozilla Firefox	33.1
iOS / iPadOS	Safari	14.1
macOS	Google Chrome	91.0.4472.77
macOS	Microsoft Edge	90.0.818.66
macOS	Mozilla Firefox	88.0.1
macOS	Safari	14.1
Windows	Google Chrome	91.0.4472.77
Windows	Internet Explorer 11	19041.928
Windows	Microsoft Edge	90.0.818.66
Windows	Mozilla Firefox	88.0.1