动漫小可爱-网页添加L2Dwidget.js

news2024/11/30 10:38:00

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动漫小可爱</title>
    <link rel="stylesheet" href="waifu/waifu.css">
</head>

<body>

    <div class="waifu">
        <div class="waifu-tips"></div>
        <canvas id="live2d" 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>
</body>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/L2Dwidget.min.js"></script>
<script src="waifu/waifu-tips.js"></script>
<script src="waifu/live2d.min.js"></script>
<script type="text/javascript">
    /* 可直接修改部分参数 */
    live2d_settings['hitokotoAPI'] = 'hitokoto.cn';  // 一言 API
    live2d_settings['modelId'] = 3;                  // 默认模型 ID
    live2d_settings['modelTexturesId'] = 2;          // 默认材质 ID
    live2d_settings['modelStorage'] = false;         // 不储存模型 ID
    initModel("waifu/waifu-tips.json")
    var selectAry = [
        ["chitose"],
        ["epsilon2_1"],
        ['haru'],
        ["gf"],
        ["haruto"],
        ["hibiki"],
        ["hijiki"],
        ["izumi"],
        ["koharu"],
        ["miku"],
        ["nico"],
        ["ni-j"],
        ["nipsilon"],
        ["nito"],
        ["nietzsche"],
        ["shizuku"],
        ["tororo"],
        ["tsumiki"],
        ["unitychan"],
        ["wanko"],
        ["z16"]
    ];
    var num = ['01', '02'];
    var mode = selectAry[parseInt(Math.random() * selectAry.length)][0];
    var modeClass = mode;
    if (mode == 'haru') {
        let S = num[parseInt(Math.random() * num.length)];
        mode = mode + '/' + S;
        modeClass = mode.replace('/', '');
    }
    L2Dwidget.init({
        "model": { "jsonPath": "packages/live2d-widget-model-" + mode + "/assets/" + modeClass + ".model.json", "scale": 1, "hHeadPos": 0.5, "vHeadPos": 0.618 },
        "dialog": {
            enable: true,
            script: {
                //每20s，显示一言（调用一言Api返回的句子）
                'every idle 20s': '$hitokoto$',
                'hover div': '星星在天上而你在我心里 (*/ω＼*)',
                //触摸到身体
                'tap body': '害羞⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄',
                //触摸到头部
                'tap face': '~~'
            }
        },
        "mobile": { "show": true, scale: 0.5 },
        "display": {
            "superSample": 2,
            "width": 200,
            "height": 400,
            "position": "right",
            "hOffset": 0,
            "vOffset": 0
        }

    });
</script>

</html>