雁城传奇|

WuMin4

园龄:6个月粉丝:0关注:0

各种live2d看板娘

各种live2d看板娘

用法:直接复制

live2D <script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>
<script src="https://live2d.fghrsh.net/assets/1.4.2/jquery.min.js"></script>
<script src="https://live2d.fghrsh.net/assets/1.4.2/jquery-ui.min.js"></script>
<script src="https://live2d.fghrsh.net/assets/1.4.2/autoload.js"></script>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/blogs/693306/waifu1.css"/>
<script src="https://blog-static.cnblogs.com/files/blogs/693306/jquery.min.js"></script>
<div class="waifu" id="waifu" style="left: 100px !important;>
<div class="waifu-tips" style="opacity: 1;"></div>
<canvas id="live2d" width="280" height="250" class="live2d"></canvas>
<div class="waifu-tool">
<span class="fui-home"></span>
<span class="fui-chat"></span>
<span class="fui-eye"></span>
<span class="fui-user"></span>
<span class="fui-photo"></span>
<span class="fui-info-circle"></span>
<span class="fui-cross"></span>
</div>
</div>
<script src="https://blog-static.cnblogs.com/files/blogs/693306/live2d.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/blogs/693306/waifu-tips.js"></script>
<script type="text/javascript">initModel()</script>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/blogs/693306/flat-ui.min.css"/>
<!-- live2D -->
<script src="https://l2dwidget.js.org//lib/L2Dwidget.min.js"></script>
<script type="text/javascript">
L2Dwidget
.on('*', (name) => {console.log('%c EVENT ' + '%c -> ' + name, 'background: #222; color: yellow', 'background: #fff; color: #000')})
.init({
    dialog: {
        enable: true,
        script: {
            'every idle 5s': '$hitokoto$',
            'hover .star': '星星在天上而你在我心里 (*/ω\*)',
            'tap body': '哎呀!别碰我!',
            'tap face': '人家已经不是小孩子了!'
        }
    },
    "model": {
        <!-- jsonpath控制显示看板娘模型 -->
        jsonPath: "https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json",
        "scale": 1
    },
    "display": {
        "position": "right", //看板娘的表现位置
        "width": 170, //看板娘的宽度
        "height": 300, //看板娘的高度
        "hOffset": 0,
        "vOffset": -20
    },
    "mobile": {
        "show": true,
        "scale": 0.5
    },
    "react": {
        "opacityDefault": 0.7,
        "opacityOnHover": 0.2
    }
});
</script>
<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-chitose@1.0.5/assets/chitose.model.json",
            "scale": 1
        },
        "display": {
            "position": "right",
            "width": 150,
            "height": 300,
            "hOffset": 0,
            "vOffset": -20
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 0.7,
            "opacityOnHover": 0.2
        }
    });
</script>
<!--
初始化的jsonPath为: https://unpkg.com/2D模型全名称@1.0.5/assets/模型.model.json

例如:https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json

也可通过使用浏览器访问  https://unpkg.com/2D模型全名称@1.0.5/ 来查找对应的模型json地址,如https://unpkg.com/live2d-widget-model-chitose@1.0.5

2D模型全名称:

live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16
-->

参考博客:
https://www.cnblogs.com/lingyunvoid/p/beautify.html
https://www.cnblogs.com/dxdblog/p/10255503.html

本文作者:WuMin4

本文链接:https://www.cnblogs.com/WuMin4/p/18373436

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   WuMin4  阅读(100)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起