L2Dwidget 动漫

最新推荐文章于 2024-08-08 07:55:33 发布

i鲸落

最新推荐文章于 2024-08-08 07:55:33 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/XinYe666666/article/details/103489474

版权

可参考https://huaji8.top/post/live2d-plugin-2.0/选模型,模型地址 https://github.com/xiazeyu/live2d-widget-models/tree/master/packages,中文文档 https://github.com/EYHN/hexo-helper-live2d/blob/master/README.zh-CN.md

1.单个HTML页面,只需要在【页首html代码】中引入L2Dwidget.js即可。

<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>

<script>

　　L2Dwidget.init({ "model": { jsonPath:

　　"https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",

　　"scale": 1 }, "display": { "position": "left", "width": 150, "height": 300,

　　"hOffset": 0, "vOffset": -20 }, "mobile": { "show": true, "scale": 0.5 },

　　"react": { "opacityDefault": 0.7, "opacityOnHover": 0.2 } });

</script>

2.vue中,先在index.html中引入

<script type="text/javascript" src="/static/live2dw/lib/L2Dwidget.min.js"></script>

再在app.vue的mounted中引入

setTimeout(()=>{
      window.L2Dwidget.init({
        pluginRootPath: 'static/live2dw/',//插件在站点上的根目录（相对）
        pluginJsPath: 'lib/',//脚本文件相对与插件根目录路径（相对）
        pluginModelPath: 'live2d-widget-model-koharu/assets/',//模型文件相对与插件根目录路径
        tagMode: false,//标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
        debug: false,//调试, 是否在控制台输出日志
        log: false,
        model: {
          jsonPath: '/static/live2dw/live2d-widget-model-tororo/assets/tororo.model.json',//模板
        },
        display: {
          position: 'right',//位置
          width: 100,//宽度
          height: 200,//高度
        },
        mobile: {
          show: true,//手机上展示
        },
        react:{
          opacity:1,//透明度
        }
      })
    },200)

效果如下: