Live2D Widget 在网页中添加看板猫🐱

665 阅读1分钟

今天去看了一下黑果小兵的部落阁, 本来想看一下黑果知识,被右下角的小猫吸引了。之前在一些博客也看到一些看板娘,在github上的看板娘库是这个,这个live2d。把人物模型换成猫这个少见到。下面是代码。

Kapture 2022-10-15 at 11.57.01.gif

目录结构

截屏2022-10-15下午3.46.41.png

// 先进了L2Dwidget.min.js,传了一些配置进去
L2Dwidget.init({
  pluginRootPath: "static/",
  pluginJsPath: "lib/",
  pluginModelPath: "assets/",
  model: {
    scale: 1.5, // 缩小放大
    hHeadPos: 0.5,
    vHeadPos: 0.618,
    jsonPath: "/static/assets/tororo.model.json",
  },
  display: {
    superSample: 2,
    width: 300,
    height: 450,
    position: "right",
    hOffset: 50,
    vOffset: 0,
  },
  mobile: { show: !1, scale: 0.5 },
  react: { opacityDefault: 1, opacityOnHover: 1 },
  log: !1,
  tagMode: !1,
});

image.png

实际上面这个init方法最后是走了theRealInit这个方法

截屏2022-10-15下午5.00.44.png

建一个canvas, 监听鼠标事件。

1.gif

代码在此