换装模型超多的Live2d

在线预览

https://qkongtao.gitee.io/live2d-widget/

代码示例

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

<head>
    <!-- 基础信息 -->
    <meta charset="utf-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="force-rendering" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="qkongtao.cn">
    <meta name="keywords" content="qkongtao.cn">
    <meta name="author" content="qkongtao.cn">
    <link rel="icon" href="http://qiniu.qkongtao.cn/2021/08/header.png" sizes="192x192" />
    <title>live2D演示</title>
</head>

<body>



    <!--FOOTER_CODE_END-->
    <script type="text/javascript">
        // live2d_path 参数建议使用绝对路径
        // const live2d_path = "./live2d-widget/";
        const live2d_path = "https://code.haiyong.site/live2d-widget/";

        // 封装异步加载资源的方法
        function loadExternalResource(url, type) {
            return new Promise((resolve, reject) => {
                let tag;

                if (type === "css") {
                    tag = document.createElement("link");
                    tag.rel = "stylesheet";
                    tag.href = url;
                } else if (type === "js") {
                    tag = document.createElement("script");
                    tag.src = url;
                }
                if (tag) {
                    tag.onload = () => resolve(url);
                    tag.onerror = () => reject(url);
                    document.head.appendChild(tag);
                }
            });
        }

        // 加载 waifu.css live2d.min.js waifu-tips.js
        if (screen.width >= 768) {
            Promise.all([
                loadExternalResource(live2d_path + "waifu.css", "css"),
                loadExternalResource(live2d_path + "live2d.min.js", "js"),
                loadExternalResource(live2d_path + "waifu-tips.js", "js")
            ]).then(() => {
                // 配置选项的具体用法见 README.md
                initWidget({
                    waifuPath: live2d_path + "waifu-tips.json",
                    cdnPath: "https://npm.elemecdn.com/akilar-live2dapi@latest/",
                    // cdnPath: "./live2d_api-1.0.8/",
                    // tools: ["hitokoto", "asteroids", "switch-model", "switch-texture", "photo", "info", "quit"
                    tools: ["hitokoto", "switch-model", "switch-texture", "photo", "quit"]
                });
            });
        }
    </script>

</body>
</html>

项目目录结构：

自己使用的时候可以根据自己的需求将资源和模型文件放在服务器或者cdn上。

或者新建一个html文件，直接使用上面代码即可。

一木呈广予口贝/live2d-widget

换装模型超多的Live2d

在线预览

代码示例

简介

发行版

贡献者

近期动态

一木呈广予口贝/live2d-widget .gitee-modal { width: 500px !important; }

换装模型超多的Live2d

在线预览

代码示例

简介

发行版

贡献者

近期动态

搜索帮助

一木呈广予口贝/live2d-widget