live2DModel
/
index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>全球首家大型线上吸猫网站</title>
</head>
<body style="background: gainsboro;">
<h3>全球首家大型线上吸猫网站</h3>
<p>原&nbsp;&nbsp;作&nbsp;&nbsp;者：<a href="https://github.com/QiShaoXuan/live2DModel" target="_blank">https://github.com/QiShaoXuan/live2DModel</a></p>
<p>本站源码：<a href="https://gitee.com/tczmh/live2DModel" target="_blank">https://gitee.com/tczmh/live2DModel</a></p>
<div style="font-size: 24px">
    <span>在线选猫：</span>
    <a href="javascript:show(tororo)">白猫</a>
    <a href="javascript:show(hijiki)">黑猫</a>
</div>
</body>
<script src="l2dwidget.min.js"></script>
<script>
    var tororo = 'tororo/assets/tororo.model.json';
    var hijiki = 'hijiki/assets/hijiki.model.json';

    function show(path) {
        config.model.jsonPath = path;
        L2Dwidget.init(config)
    }
    // 配置文件官方API: https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init
    var config = {
        model: {
            jsonPath: '', // xxx.model.json 的路径
        },
        display: {
            superSample: 1, // 超采样等级
            width: 350, // canvas的宽度
            height: 400, // canvas的高度
            position: 'right', // 显示位置：左或右
            hOffset: 0, // canvas水平偏移
            vOffset: 0, // canvas垂直偏移
        },
        mobile: {
            show: true, // 是否在移动设备上显示
            scale: 1, // 移动设备上的缩放
            motion: true, // 移动设备是否开启重力感应
        },
        react: {
            opacityDefault: 1, // 默认透明度
            opacityOnHover: 1, // 鼠标移上透明度
        },
    }
    window.onload = function () {
        show(tororo);
    }
</script>
</html>