Needs Puma Managers

    vuepress-plugin-pixi-live2d-display

    1.0.2 • Public • Published

    vuepress pixi-live2d-display插件

    感谢vuepress-plugin-cat给的灵感

    因为我找了半天没有可以自定义live2d模型的插件,只能自己写了

    仅支持新版本的模型!

    预览

    预览DEMO

    安装

    npm i vuepress-plugin-pixi-live2d-display
    
    or
    
    yarn add vuepress-plugin-pixi-live2d-display

    使用

    在你的config.js中增加

    module.exports = {
      plugins: [
          ['vuepress-plugin-pixi-live2d-display', { model: "你的模型地址" }]
      ]
    }
    

    其他参数

    属性 类型 必填 默认 说明
    containerStyle Object false {} 给整个容器的样式,默认为右下角400 x 400的方框
    model String true null model3.json的地址
    mobile boolean false false 是否在手机上显示
    offsetX number false 0 模型位置偏移,根据模型实际尺寸来,可能很大
    offsetY number false 0 模型位置偏移,根据模型实际尺寸来,可能很大
    delay number false 2000 受限于引入依赖库的问题,需要延迟加载模型,延迟的时间,建议至少大于1s
    scale number false 1 模型缩放

    开发

    实现原理

    挂载了一个Live2d.vue放在右下角来加载live2d的模型文件,内部使用pixi-live2d-display实现

    文件说明

    • index.js 主入口,加载插件,包含加载lib和挂载全局的vue文件
    • enhanceAppFilevuepress运行时注入一个支持设定propsvue文件
    • live2d.vue 显示组件
    • lib/index.jshtml内注入所需的第三方js
    • lib/*.js 第三方js,实际上未使用

    传参的魔改原理

    官方文档没找到如果正确给ui组件传参数,所以魔改了一个,具体代码看enhanceAppFileindex.js内引用enhanceAppFile的方式

    魔改vue文件的propsdefault属性

    参考

    Install

    npm i vuepress-plugin-pixi-live2d-display

    DownloadsWeekly Downloads

    4

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    2.34 MB

    Total Files

    12

    Last publish

    Collaborators

    • mizuka