前端 AI 必会的 live2D，还支持对口型

作者：微信小助手

发布时间：2025-04-23T17:05:55

随着这几年 AI 数字人的兴起，前端需要通过一些工具来更生动的展示这些虚拟人角色。

live2D 就是先进的二维动画技术，能够在前端网页中实现高度逼真的角色动画效果。

它是日本公司开发的，主要还是动画风格。核心技术是：

基于多层次的2D绘制，通过对角色进行分割并赋予不同部位独立的动作能力，实现角色的自由变形和动态效果。

官方文档：

https://www.live2d.com/zh-CHS/learn/sample/

需要模型文件：

准备一个 Live2D 模型文件，通常是以.moc或.moc3等格式存储的。这些文件包含了角色的图形和骨架信息。

下面就是Live2D 模型文件，具体来说是一个基于 Cubism 4 SDK 的.model3.json文件，描述了 3D 模型的参数、纹理、骨骼绑定等信息。

https://cdn.jsdelivr.net/gh/guansss/pixi-live2d-display/test/assets/haru/haru_greeter_t03.model3.json

{  "Version": 3,  "FileReferences": {    "Moc": "haru_greeter_t03.moc3",    "Textures": [      "haru_greeter_t03.2048/texture_00.png",      "haru_greeter_t03.2048/texture_01.png"    ],    "Physics": "haru_greeter_t03.physics3.json",    "Pose": "haru_greeter_t03.pose3.json",    "DisplayInfo": "haru_greeter_t03.cdi3.json",    "Expressions": [      {        "Name": "f00",        "File": "expressions/F01.exp3.json"      },      {        "Name": "f01",        "File": "expressions/F02.exp3.json"      },      {        "Name": "f02",        "File": "expressions/F03.exp3.json"      },      {        "Name": "f03",        "File": "expressions/F04.exp3.json"      },      {        "Name": "f04",        "File": "expressions/F05.exp3.json"      },      {        "Name": "f05",        "File": "expressions/F06.exp3.json"      },      {        "Name": "f06",        "File": "expressions/F07.exp3.json"      },      {        "Name": "f07",        "File": "expressions/F08.exp3.json"      }    ],    "Motions": {      "Idle": [        {          "File": "motion/haru_g_idle.motion3.json"        },        {          "File": "motion/haru_g_m07.motion3.json"        },        {          "File": "motion/haru_g_m15.motion3.json"        }      ],      "Tap": [        {          "File": "motion/haru_g_m14.motion3.json",          "Sound": "../shizuku/sounds/flickHead_00.mp3"        },        {          "File": "motion/haru_g_m05.motion3.json",          "Sound": "../shizuku/sounds/flickHead_01.mp3"        }      ]    }  },  "Groups": [    {      "Target": "Parameter",      "Name": "EyeBlink",      "Ids": [        "ParamEyeLOpen",        "ParamEyeROpen"      ]    },    {      "Target": "Parameter",      "Name": "LipSync",      "Ids": [        "ParamMouthOpenY"      ]    }  ],  "HitAreas": [    {      "Id": "HitArea",      "Name": "Head"    },    {      "Id": "HitArea2",      "Name": "Body"    }  ]}

下面我们一一解析下：

.model3.json文件通常包含以下关键部分：

模型版本信息：

"Version":3

该模型基于 Cubism 4 SDK 生成。

文件引用：

"FileReferences": {    "Moc": "haru_**.moc3",    "Textures": ["haru_**.1024/texture_00.png"]}

Moc 指向 .moc3 文件，包含模型的骨骼动画数据
Textures 指向纹理图片，用于渲染模型外观

参数和部件：

"Parameters": { ... },"Parts": { ... }

Parameters 定义模型的变形参数
Parts 定义模型的部件结构（头发等）

物理设置：

"Physics": { ... }

描述模型的物理特性（如重力）

表达式和动作：

Expressions
定义表情数据
Motions
定义动作数据

SDK 的选择：

pixijs 的版本

https://github.com/guansss/pixi-live2d-display

它有多个版本：

import { Live2DModel } from 'pixi-live2d-display';// 如果只需要 Cubism 2.1import { Live2DModel } from 'pixi-live2d-display/cubism2';// 如果只需要 Cubism 4import { Live2DModel } from 'pixi-live2d-display/cubism4';

调用方式：

</ul>
<pre class="code-snippet__js" data-lang="javascript"><code><span leaf=""><span class="code-snippet__keyword">import</span>&nbsp;{&nbsp;</span></code><code><span leaf="">&nbsp;&nbsp;<span class="code-snippet__title">Live2DModel</span></span></code><code><span leaf="">}&nbsp;<span class="code-snippet__keyword">from</span><span class="code-snippet__string">'pixi-live2d-display'</span>;</span></code><code><span leaf=""><br></span></code><code><span leaf=""><span class="code-snippet__keyword">const</span>&nbsp;model =&nbsp;<span class="code-snippet__keyword">await</span>&nbsp;<span class="code-snippet__title">Live2DModel</span>.<span class="code-snippet__title">from</span>(<span class="code-snippet__string">'**.model.json'</span>);</span></code></pre>

Live2DModel.from()方法加载模型文件。

那如何把模型添加到 PixiJS 舞台进行渲染

import * as PIXI from 'pixi.js';const app = new PIXI.Application({  view: document.getElementById('canvas'),});
app.stage.addChild(model);

还支持嘴型同步功能

官方文档：

https://docs.live2d.com/en/cubism-editor-manual/motion-sync/

很多简单的方式：通过不同播放中的音频的声调大小来控制口型的开合程度

比如可以通过 py 的 librosa 这种工具