createLive2dFigure()

创建 Live2D 角色，支持表情和动作控制。

函数签名


createLive2dFigure(id: string, props: {
  name: string;
  path: string;
  avatar?: string;
  expressionId?: string;
  motionId?: string;
}): Live2dFigure

参数

参数	类型	描述
`id`	`string`	角色唯一标识
`name`	`string`	角色名称
`path`	`string`	model.json 路径
`avatar`	`string?`	头像路径
`expressionId`	`string?`	初始表情 ID
`motionId`	`string?`	初始动作 ID

基础用法


const anon = createLive2dFigure("anon", {
  name: "千早爱音",
  path: "/figures/anon/casual/model.json",
  avatar: "/avatars/anon.webp",
});

显示角色


const position = {
  x: -27.04,
  y: 7.73,
  scaleX: 0.43,
  scaleY: 0.43,
};
 
anon.show(position);

表情和动作


// 切换表情
anon.expression("anon_smile01");
 
// 播放动作
anon.motion("anon_wave");
 
// 链式调用
anon.motion("anon_smile01")
    .expression("anon_smile01")
    .speak`我在微笑`;

切换模型


// 切换到另一套服装/模型
anon.switch("/figures/anon/live_sr_01/model.json");
 
// 切换回原模型
anon.switch("/figures/anon/casual/model.json");

可用方法

方法	描述
`.speak()`	显示对话
`.show(props?)`	显示角色
`.hide()`	隐藏角色
`.set(props)`	设置属性
`.to(props, options?)`	补间动画
`.expression(id)`	切换表情
`.motion(id)`	播放动作
`.switch(path)`	切换模型
`.fadeIn()`	淡入
`.fadeOut()`	淡出
`.bounce()`	弹跳
`.shake()`	抖动

注意事项

关于live2d

自行取得 live2D 的授权

到 https://cdn.jsdelivr.net/gh/dylanNew/live2d/webgl/Live2D/lib/live2d.min.js

和 https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js 分别下载 live2D 和 cubismcore

分别重命名为 live2d.min.js 和 live2dcubismcore.min.js ，然后将文件放到public目录

注意：本项目的作者没有使用任何 live2D SDK 的源码和模型，由于使用 live2D 造成的任何版权纠纷，皆由二次开发者或制作者自行承担！