Live2D demo

Live2D 看板娘插件 (https://www.fghrsh.net/post/123.html) 的前端 HTML 源码

特性

基于 API 加载模型，支持定制提示语
增加参数设置一键定制看板娘，易用性++
增加看板娘样式设置，可直接设置宽高度等
支持多种一言接口，基于 JQuery UI 实现拖拽

使用

目录结构

│  demo1-default.html       // 常规引用 Demo
│  demo2-autoload.html      // autoload.js Demo
│  demo3-waifu-tips.html    // 内置 waifu-tips Demo
│
└─assets
        autoload.js                     // 自动异步加载
        flat-ui-icons-regular.eot       // Flat UI 字体
        flat-ui-icons-regular.svg       // Flat UI 字体
        flat-ui-icons-regular.ttf       // Flat UI 字体
        flat-ui-icons-regular.woff      // Flat UI 字体
        live2d.js                       // Live2D 核心
        waifu-tips.js                   // Live2D 看板娘 扩展
        waifu-tips.json                 // Live2D 看板娘 提示语
        waifu.css                       // Live2D 看板娘 样式表

食用方法

依赖类库
- JQuery (waifu-tips.js)
- JQuery UI (仅实现 拖拽效果 需要)
常规方式引入
1. 在 </head> 前引入 waifu.css 样式表
2. 在 </body> 前引入 waifu-tips.js 和 live2d.js
3. 在 </body> 前插入初始化 JS，可在初始化前设置参数

<html>
<head>

        · · ·   · · ·

    <link rel="stylesheet" type="text/css" href="https://www.example.com/path/to/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>
    
    <script src="path/to/waifu-tips.js"></script>
    <script src="path/to/live2d.js"></script>
    
    <script type="text/javascript">
        live2d_settings['modelId'] = 1;
        live2d_settings['modelTexturesId'] = 87;
    	initModel("https://www.example.com/path/to/waifu-tips.json")
    </script>
</body>
</html>

autoload.js 引入
1. 在 </body> 前引入 autoload.js
2. 修改 autoload.js 文件路径，可在初始化前设置参数

    · · ·   · · ·
    <script src="path/to/autoload.js"></script>
</body>
</html>

try {
    · · ·   · · ·
    live2d_settings['modelId'] = 1;
    live2d_settings['modelTexturesId'] = 87;
    initModel('https://www.example.com/path/to/waifu-tips.json');
} catch(err) { console.log('[Error] JQuery is not defined.') }

定制属于你的看板娘
- 修改 waifu-tips.js 顶部的设置参数 (或初始化前设置
- 修改 waifu-tips.json，定制看板娘提示语，打造专属看板娘

设置参数

Tips： waifu-tips.js 已自带默认参数，如无特殊要求可跳过

后端接口
- live2d_settings['modelAPI']
  看板娘 API 地址，默认值 '//live2d.fghrsh.net/api/'
- live2d_settings['tipsMessage']
  提示语读取路径，默认值 'waifu-tips.json' (一般在 initModel 时指定)
- live2d_settings['hitokotoAPI']
  一言 API 接口，可选 'lwl12.com'，'hitokoto.cn'，'jinrishici.com' (古诗词)
默认模型
- live2d_settings['modelId']
  默认模型(分组) ID，可在 Demo 页 [F12] 呼出 控制台(Console) 找到
- live2d_settings['modelTexturesId']
  默认材质(模型) ID，可在 Demo 页 [F12] 呼出 控制台(Console) 找到
工具栏设置
- live2d_settings['showToolMenu']，显示工具栏， true | false
- live2d_settings['canCloseLive2d']，关闭看板娘按钮，true | false
- live2d_settings['canSwitchModel']，切换模型按钮， true | false
- live2d_settings['canSwitchTextures']，切换材质按钮， true | false
- live2d_settings['canSwitchHitokoto']，切换一言按钮， true | false
- live2d_settings['canTakeScreenshot']，看板娘截图按钮，true | false
- live2d_settings['canTurnToHomePage']，返回首页按钮， true | false
- live2d_settings['canTurnToAboutPage']，跳转关于页按钮，true | false
模型切换模式
- live2d_settings['modelStorage']，记录 ID (刷新后恢复)，true | false
- live2d_settings['modelRandMode']，模型切换，可选 'rand' (随机) | 'switch' (顺序)
- live2d_settings['modelTexturesRandMode']，材质切换，可选 'rand' | 'switch'
提示消息选项
- live2d_settings['showHitokoto']，空闲时一言，true | false
- live2d_settings['showF12Status']，控制台显示加载状态，true | false
- live2d_settings['showF12Message']，提示消息输出到控制台，true | false
- live2d_settings['showF12OpenMsg']，控制台被打开触发提醒，true | false
- live2d_settings['showCopyMessage']，内容被复制触发提醒，true | false
- live2d_settings['showWelcomeMessage']，进入面页时显示欢迎语，true | false
看板娘样式设置
- live2d_settings['waifuSize']，看板娘大小，例如 '280x250'，'600x535'
- live2d_settings['waifuTipsSize']，提示框大小，例如 '250x70'，'570x150'
- live2d_settings['waifuFontSize']，提示框字体，例如 '12px'，'30px'
- live2d_settings['waifuToolFont']，工具栏字体，例如 '14px'，'36px'
- live2d_settings['waifuToolLine']，工具栏行高，例如 '20px'，'36px'
- live2d_settings['waifuToolTop']，工具栏顶部边距，例如 '0px'，'-60px'
- live2d_settings['waifuMinWidth']
  面页小于指定宽度隐藏看板娘，例如 'disable' (停用)，'768px'
- live2d_settings['waifuEdgeSide']
  看板娘贴边方向，例如 'left:0' (靠左 0px)，'right:30' (靠右 30px)
- live2d_settings['waifuDraggable']
  拖拽样式，可选 'disable' (禁用)，'axis-x' (只能水平拖拽)，'unlimited' (自由拖拽)
- live2d_settings['waifuDraggableRevert']，松开鼠标还原拖拽位置，true | false
其他杂项设置
- live2d_settings['l2dVersion']，当前版本 (无需修改)
- live2d_settings['l2dVerDate']，更新日期 (无需修改)
- live2d_settings['homePageUrl']，首页地址，可选 'auto' (自动)，'{URL 网址}'
- live2d_settings['aboutPageUrl']，关于页地址，'{URL 网址}'
- live2d_settings['screenshotCaptureName']，看板娘截图文件名，例如 'live2d.png'

定制提示语

Tips： waifu-tips.json 已自带默认提示语，如无特殊要求可跳过

"waifu" 系统提示
- "console_open_msg" 控制台被打开提醒（支持多句随机）
- "copy_message" 内容被复制触发提醒（支持多句随机）
- "screenshot_message" 看板娘截图提示语（支持多句随机）
- "hidden_message" 看板娘隐藏提示语（支持多句随机）
- "load_rand_textures" 随机材质提示语（暂不支持多句）
- "hour_tips" 时间段欢迎语（支持多句随机）
- "referrer_message" 请求来源欢迎语（不支持多句）
- "referrer_hostname" 请求来源自定义名称（根据 host，支持多句随机）
- "model_message" 模型切换欢迎语（根据模型 ID，支持多句随机）
- "hitokoto_api_message"，一言 API 输出模板（不支持多句随机）
"mouseover" 鼠标触发提示（根据 CSS 选择器，支持多句随机）
"click" 鼠标点击触发提示（根据 CSS 选择器，支持多句随机）
"seasons" 节日提示（日期段，支持多句随机）

版权声明

( ˃ ˄ ˂̥̥ ) 都看到这了，点个 Star 吧 ~

Open sourced under the GPL v2.0 license.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Live2D demo

特性

使用

目录结构

食用方法

设置参数

定制提示语

版权声明

About

Releases

Packages

Languages

Name		Name	Last commit message	Last commit date
Latest commit History 20 Commits
assets		assets
LICENSE		LICENSE
README.md		README.md
demo1-default.html		demo1-default.html
demo2-autoload.html		demo2-autoload.html
demo3-waifu-tips.html		demo3-waifu-tips.html

License

erwindy/live2d_demo

Folders and files

Latest commit

History

Repository files navigation

Live2D demo

特性

使用

目录结构

食用方法

设置参数

定制提示语

版权声明

About

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages