一个在 Web 页面上运行 live2D 模型的简易插件。
- 可以切换模型并支持动态交互(模型目前只支持 Cubism 3)。
- 可以配置默认启用和禁用。
- pixijs
- pixi-live2d-display
- webpack
下载自己想要想要运行的 Live2D 模型,修改 Resources.js 中相关的配置,配置项可以影响显示的内容:
Configs.Canvas.Actived
定义显示模型时的画布大小和图标的位置信息。Configs.DefaultModel
和Configs.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 是运行时的核心文件,不可缺少。
具体效果可以参考我的个人站点。