关于 wl-live2d

热度 : loading...

wlLive2d

built-with-love uses-html contains-cat-gifs powered-by-electricity

wlLive2d 是一个运行在浏览器环境的 Live2D 看板组件，支持从 model2 与 model4 版本的 Live2D 模型，开箱即用且可定制化。如果你想为你的个人网站增加一个看板娘，那么请看看这个！🥳

查阅文档以了解更多详细的使用教程 🎉

✨ 特点:

支持 CDN 或 ES6 Module 导入
默认集成 Cubism 2 SDK 和 Cubism 4 SDK
按需引入或全量导入 Cubism SDK 依赖
支持配置多个模型，使用控件对其切换。
支持自定义扩展控件，支持无刷新加载

🌈 使用

CDN 引入

通过 CDN 方式导入的示例如下。

相关配置选项的详细内容请查看: 配置选项

在 <body> 标签中加入以下内容:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>wlLive2d</title>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/wl-live2d/dist/es/index.js"></script>
  <script>
    wlLive2d({
      models: [
        {
          path: 'https://cdn.jsdelivr.net/gh/Eikanya/Live2d-model/Live2D/Senko_Normals/senko.model3.json',
          scale: 0.12,
          position: [-50, 50],
          stageStyle: {
            width: 320
          }
        },
        {
          path: 'https://cdn.jsdelivr.net/gh/Eikanya/Live2d-model/galgame%20live2d/Fox%20Hime%20Zero/mori_miko/mori_miko.model3.json',
          position: [50, 100],
          stageStyle: {
            width: 300,
            height: 450
          }
        }
      ]
    });
  </script>
</body>
</html>

如果网站启用了 PJAX，由于看板娘不必每页刷新，需要注意将该脚本放到 PJAX 刷新区域之外

使用包管理工具安装

npm install wl-live2d
# or
yarn add wl-live2d

ESM 使用示例

相关配置选项的详细内容请查看: 配置选项

import { WlLive2d } from 'wl-live2d';

WlLive2d({
  models: [
    {
      path: 'https://cdn.jsdelivr.net/gh/Eikanya/Live2d-model/Live2D/Senko_Normals/senko.model3.json',
      scale: 0.12,
      position: [-50, 50],
      stageStyle: {
        width: 320
      }
    },
    {
      path: 'https://cdn.jsdelivr.net/gh/Eikanya/Live2d-model/galgame%20live2d/Fox%20Hime%20Zero/mori_miko/mori_miko.model3.json',
      position: [50, 100],
      stageStyle: {
        width: 300,
        height: 450
      }
    }
  ]
});

如果您想更换自己的模型或对其进行自定义，请查阅文档的相关内容