Vue、Html前端页面引入live2dw 使用看板娘

飞熊 • 2023年12月18日下午11:46 • Vue • 阅读 335

一. 不下载文件

<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": "right", "width": 110, "height": 150,
            "hOffset": 0, "vOffset": -20
        }, "mobile": {"show": true, "scale": 0.5},
        "react": {"opacityDefault": 0.8, "opacityOnHover": 0.1}
    });
</script>

二. 下载文件
要使用看板娘，需要先下载对应的资源文件分享我的百度网盘链接
链接：https://pan.baidu.com/s/1y0vPPCSyD0urEy5BGQ3EbA
提取码：0501
–来自百度网盘超级会员V5的分享
也可以扫码提取

三.使用步骤
1.把下载好的文件放入到项目目录下的static文件夹下，没有这个文件夹的话放到和index.html同级的放静态资源的文件目录下 vue项目一般放在public文件夹下。

2.引入js文件
在静态页面中引入live2dw的js文件，注意js的路径

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

3.init初始化看板娘组件

<!--model 模型的配置
json 文件资源路径，可以支持网络路径，此处使用的是相对路径
scale 模型缩放系数
display 模型布局
position 位置
width 宽度
height 高度
hOffset 水平偏移量
vOffset 垂直偏移量
mobile 移动端配置
show 显示/隐藏
scale 缩放比例
react 模型矩形框样式
opacity 透明度
opacityDefault 默认透明度
opacityOnHover 鼠标悬浮透明度-->
<script>
    L2Dwidget.init({
        pluginRootPath: "/live2dw/",//资源root路径
        pluginJsPath: "lib/",//js相对root的路径
        pluginModelPath: "assets/",//模型相对root的路径
        tagMode: false,
        debug: false,
        model: {
            jsonPath: "/live2dw/live2d-widget-model-haru_2/assets/haru02.model.json"
        },
        display: {
            position: "left", width: 300, height: 600,
            hOffset: 0, vOffset: 0
        },
        mobile: {show: true,scale: 0.5},
        react: {opacityDefault: 0.8, opacityOnHover: 0.1}
    });
</script>

vue项目则需要这样

 export default {
    name: 'App',
    created() {
        setTimeout(() => {
            window.L2Dwidget.init({
                pluginRootPath: '/live2dw/',
                pluginJsPath: 'lib/',
                pluginModelPath: 'live2d-widget-model-haru_2/assets/', //中间这个haru_2就是你的老婆,想换个老婆,换这个就可以了
                tagMode: false,
                debug: false,
                model: { jsonPath: '/live2dw/live2d-widget-model-haru_2/assets/haru02.model.json' }, 
                display: { position: 'left', width: 350, height: 800 },  //调整大小,和位置
                mobile: { show: true },   //要不要盯着你的鼠标看
                log: false,
            })
        }, 1000)
    }
  }