轻量级 Live2D 加载器

为你的网站添加
可爱的看板娘

只需一行代码，即可为网站添加智能交互式 Live2D 模型，提升用户体验

开始使用 查看配置
Live2D 演示
🎀
看板娘将在页面右下角显示

快速开始

复制以下代码到你的网页中即可

1

添加脚本

将以下代码添加到你网页的 <body> 标签末尾

<script src="loads.js"></script>

自定义配置

通过配置对象自定义看板娘的行为和外观

2

高级配置

在引入脚本前添加配置对象

<script>
  window.live2dConfig = {
    model: 0,           // 默认模型索引
    scale: 1.0,         // 模型缩放比例
    x: 0,               // X轴偏移
    y: 0,               // Y轴偏移
    position: 'right',  // 显示位置: left / right
    mobileHide: false,  // 移动端是否隐藏
    mobileBreakpoint: 768  // 移动端断点
  };
</script>
<script src="loads.js"></script>
model
指定要加载的模型索引
默认: 0
scale
模型的缩放比例
默认: 1.0
x / y
模型的位置偏移量
默认: 0
position
屏幕显示位置
默认: 'right'
mobileHide
移动端是否隐藏模型
默认: false
mobileBreakpoint
移动端判断断点
默认: 768

常见问题

遇到问题？看看这里有没有答案

通过配置 window.live2dConfig 中的 model 属性来更换模型。例如 model: 0 表示第一个模型，model: 1 表示第二个模型。你也可以点击看板娘工具栏的切换按钮来切换。

请检查以下几点：
1. 确保网站支持 HTTPS 协议
2. 检查浏览器控制台是否有错误信息
3. 确认服务器允许跨域资源共享 (CORS)
4. 尝试清除浏览器缓存后重新加载

在特定页面的 JavaScript 中添加：
localStorage.setItem('waifu-display', Date.now());
这将隐藏模型。用户可以通过点击页面右下角的图标重新显示。