Skip to content

yuweizzz/custom-live2d

Repository files navigation

custom-live2d

一个在 Web 页面上运行 live2D 模型的简易插件。

主要功能

  • 可以切换模型并支持动态交互(模型目前只支持 Cubism 3)。
  • 可以配置默认启用和禁用。

依赖

使用方法

下载自己想要想要运行的 Live2D 模型,修改 Resources.js 中相关的配置,配置项可以影响显示的内容:

  • Configs.Canvas.Actived 定义显示模型时的画布大小和图标的位置信息。
  • Configs.DefaultModelConfigs.Show 定义页面载入后是否显示模型和需要显示的模型, Configs.DefaultModel 应该是 Configs.Models 中的 key ,而 Configs.Show 只能是 'true''false' 两个字符值中的一个。
  • Configs.Models 可以定义多个模型,具体定义模型在画布中的偏移坐标和缩放比例, Configs.Models.uri 指定模型所在的资源路径,通过所在站点来拼接完整的 url 。交互动作在 Configs.Models.motion 指定,这个值应该来自 model3.json 中 FileReferences.Motions 中的 key 。
$ npm install
$ npm run build

生成的文件为 ./dist/CustomLive2D.js ,将下面的 HTML 代码添加到对应的 HTML 文件中即可生效。

<script src="https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js"></script>
<script type="text/javascript" src="CustomLive2D.js"></script>

live2dcubismcore.min.js 是运行时的核心文件,不可缺少。

具体效果可以参考我的个人站点

About

在 Web 页面上运行 live2D 模型的简易插件

Resources

License

Stars

Watchers

Forks