0

为你的网站加入这些可爱的看板娘吧

 1 year ago
source link: https://segmentfault.com/a/1190000040681871
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

chrome-capture.gif

chrome-capture.gif

在线demo:live2d

源码:gitee

1.在你的网站根目录下新建一个文件夹,命名为live2d
2.将你喜欢的模型所对应assets-*文件夹,及两个js文件放入你的live2d文件夹中
3.将assets-*文件夹重命名为assets
4.在你希望出现2D模型的页面的html代码中加入如下代码(注意更改代码中的模型名):

<div>
    <canvas id="live2dcanvas" width="150" height="300"></canvas>
</div>
<style>
    #live2dcanvas {
        position: fixed;
        width: 150px;
        height: 300px;
        opacity: 0.7;
        right: 0px;
        z-index: 999;
        pointer-events: none;
        bottom: -20px;
    }
</style>
<script type="text/javascript" src="/live2d/device.min.js"></script>
<script type="text/javascript">
    const loadScript = function loadScript(c, b) {
        var a = document.createElement("script");
        a.type = "text/javascript";
        "undefined" != typeof b && (a.readyState ? a.onreadystatechange = function () {
            if ("loaded" == a.readyState || "complete" == a.readyState) a.onreadystatechange = null, b()
        } : a.onload = function () {
            b()
        });
        a.src = c;
        document.body.appendChild(a)
    };
    (function () {
        if ((typeof(device) != 'undefined') && (device.mobile())) {
            document.getElementById("live2dcanvas").style.width = '75px';
            document.getElementById("live2dcanvas").style.height = '150px';
        } else if (typeof(device) === 'undefined') console.error('Cannot find current-device script.');
        loadScript("/live2d/script.js", function () {
            loadlive2d("live2dcanvas", "/live2d/assets/模型名.model.json", 0.5);
        });
    })();
</script>  

获取模型可以去live2d官网下载自己导出,注意下许可协议
image.png


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK