示例

2026-05-25

299 words

1 min

每个示例都可以点"运行"按钮直接在线体验。

基础用法

最简配置，模型出现在左下角：

import { createWidget } from 'l2d-widget';

createWidget({
  model: {
    path: 'https://model.hacxy.cn/cat-black/model.json',
  },
});

位置与动画

放到右下角，换成淡入效果：

createWidget({
  model: {
    path: 'https://model.hacxy.cn/cat-black/model.json',
  },
  position: 'bottom-right',
  transitionType: 'fade',
});

多模型切换

给两个模型，菜单里就多了切换按钮：

createWidget({
  transitionType: 'fade',
  position: 'bottom-right',
  model: [
    { path: 'https://model.hacxy.cn/cat-black/model.json' },
    { path: 'https://model.hacxy.cn/cat-white/model.json' },
  ],
});

自定义菜单

在默认菜单后面追加一个自定义按钮：

createWidget({
  model: {
    path: 'https://model.hacxy.cn/cat-black/model.json',
  },
  menus: {
    extraItems: [
      {
        icon: 'mdi:emoticon-happy-outline',
        label: '播放动作',
        onClick(widget) {
          const motions = widget.l2d.getMotions();
          const groups = Object.keys(motions);
          if (groups.length > 0) {
            widget.l2d.playMotion(groups[0]!);
          }
        },
      },
    ],
  },
});

打字动画与嘴型同步

气泡文字逐字打出的同时，模型的嘴也跟着动：

createWidget({
  model: {
    path: 'https://model.hacxy.cn/cat-black/model.json',
    tips: {
      offset: { y: -28, x: 10 },
      typing: {
        param: 'PARAM_MOUTH_OPEN_Y',
        speed: 200,
        minValue: 0,
        maxValue: 1,
      },
      welcomeMessage: ['你好，我是猫猫！', '今天天气真不错呢～'],
      messages: ['记得多喝水哦！', '休息一下眼睛吧～', '今天也要加油！'],
      duration: 4000,
      interval: 6000,
    },
  },
});