GitHub开源项目

live2d-kanban

2026-08-26
仓库
live2d-kanban

🌸 LQBBY · Live2D 看板娘 · live2d-kanban

一个跑在 NAS 上的 Live2D 看板娘 —— 鼠标悬停冒泡、点击工具栏可换模型 / 换服装 / 看一言 / 截图 / 跳转主页与关于页。纯前端 + 原生 PHP 接口，无数据库。

Live2D 看板娘横幅

License: MIT Live2D: Cubism 2.1 PHP 8.x 26+ models Deploy: Web Station Platform: NAS

✨ 特性

  • 🎭 26+ 内置模型 —— fghrsh 经典集（Pio / Tia / 22 / 33 / Shizuku / Neptune×19 / murakumo）
  • 🔄 一键切换 —— 👁 换模型、👕 换材质，工具栏点按即换
  • 💬 一言气泡 —— 鼠标悬停触发提示语，点击 💬 拉取一言
  • 📷 截图留念 —— 把当前看板娘姿态拍成图片
  • 🏠 主页 / 关于 —— 工具栏直达 homePageUrl / aboutPageUrl
  • 🧩 零依赖 —— 前端 jQuery 本地化，无外部 CDN；后端原生 PHP、无数据库
  • 💾 模型随仓 —— model/ 全集已纳入版本库，clone 即可跑

📚 目录

🛠 技术栈

层 项目 说明
前端 fghrsh/live2d_demo Cubism 2.1 运行时 live2d.js + 工具栏/气泡/拖拽 waifu-tips.js + 图标字体 waifu.css + 提示语 waifu-tips.json
后端 API fghrsh/live2d_api 原生 PHP，无数据库
模型 fghrsh 经典集 Cubism 2.1，详见内置模型

⚠️ 兼容性提示：本栈为老版 Cubism 2.1，不兼容 Cubism 3 的 .moc3 模型（如少女前线 C3 模型已下线下移入 _legacy_gf_frontline/）。如需换用 C3 模型，须换用支持 Cubism 3 的渲染内核（如 oh-my-live2d）。

📂 目录结构

index.html              展示页（深紫粉风格，底部含 live2d_settings 配置）
assets/                 前端资源（live2d.js / waifu-*.js / waifu.css / waifu-tips.json / jquery.min.js）
  img/banner.png        仓库封面图（README 横幅）
get/ switch/ rand/      后端接口（取模型 / 顺序换模型 / 随机模型）
rand_textures/ switch_textures/ add/   随机换材质 / 顺序换材质 / 重建材质缓存
tools/                  后端工具类（modelList / modelTextures / jsonCompatible）
model/                  Live2D 模型集（26 个模型，约 136 MB）
model_list.json         后端模型清单（1-based id → 模型名 → model/<name>/index.json）
README-WebStation.md    群晖 Web Station 部署详细步骤
LICENSE-live2d-api.txt  live2d_api 许可证
_legacy_*/              已下线的旧实现（不纳入版本库）

🎎 内置模型

数据来自 model_list.json，采用 1-based 编号，/get/?id=<模型id>-<材质id> 返回对应模型 JSON。

# 模型组 变体
1 Potion-Maker/Pio Pio
2 Potion-Maker/Tia Tia
3 bilibili-live/22 22
4 bilibili-live/33 33
5 ShizukuTalk shizuku-48, shizuku-pajama
6 HyperdimensionNeptunia neptune / noir / blanc / vert 等 19 个
7 KantaiCollection/murakumo 叢雲（むらくも）

🌐 API 接口

所有接口基于 live2d_settings.modelAPI（本项目为 /，同源根目录），路径拼成 GET /<接口>/。返回统一 Content-Type: application/json，并经 tools/jsonCompatible.php 做中文兼容编码。模型采用 1-based 编号，id 参数格式为 模型id-材质id（材质 id 可省略，默认取第 1 套）。

接口 方法 参数 返回 说明
/get/ GET id=模型id-材质id（必填） 模型 JSON：model / textures[] / motions / expressions / pose / physics（路径补全为 ../model/<Name>/...） 获取完整模型定义；前端加载 / 切换模型时调用
/switch/ GET id=模型id（必填，当前 id） {"model":{"id","name","message"}} 顺序切换模型，到末尾循环回 1（工具栏 👁 换模型）
/rand/ GET id=模型id（必填，当前 id） {"model":{"id","name","message"}} 随机切换模型（≠当前）
/switch_textures/ GET id=模型id-材质id（必填） {"textures":{"id","name","model"}} 顺序切换材质 / 服装，循环（工具栏 👕 换材质）
/rand_textures/ GET id=模型id-材质id（必填） {"textures":{"id","name","model"}} 随机切换材质（≠当前；仅 1 套时恒为 1）
/add/ GET 无 HTML 文本 <p>模型名 / textures.cache / Created｜Updated｜No Update.</p> 重建材质缓存 textures.cache，新增模型材质后手动触发；正常浏览不调用

调用示例

# 获取 Pio 第 1 套服装（模型 id=1, 材质 id=1）
GET /get/?id=1-1

从当前模型 id=1 顺序换到下一模型


GET /switch/?id=1


随机换材质（当前 id=1-1）


GET /rand_textures/?id=1-1

后端工具类位于 tools/：modelList（id ↔ 名称映射、模型列表）、modelTextures（材质清单 / 缓存管理）、jsonCompatible（JSON 兼容编码）。

🚀 部署

纯静态 + PHP，推荐群晖 Web Station（无需 Docker）。详细步骤见 README-WebStation.md。

  1. 站点挂在根路径 /（接口返回相对路径，勿放进子目录）。
  2. 文档根指向本仓库根目录，启用 PHP 8.x（json 扩展默认开启）。
  3. model/ 目录需可写（接口首次访问会在 model/<名称>/ 下生成 textures.cache）。
  4. 浏览器访问 http://<群晖IP>:<端口>/。

🔗 线上演示：**https://api.lqbby.com/live2d/**

⚙️ 关键配置

位于 index.html 底部 live2d_settings：

参数 默认值 本项目设定 说明
modelAPI //live2d.fghrsh.net/api/ '/' 同源根目录下的接口
modelId / modelTexturesId 1 / 53 1 / 1 默认 Potion-Maker/Pio 第 1 套服装
homePageUrl / aboutPageUrl auto / fghrsh 页 https://lqbby.com 首页 / 关于按钮地址
modelRandMode switch switch 换模型方式：顺序
modelTexturesRandMode rand rand 换材质方式：随机

🧰 工具栏

👁 换模型 · 👕 换材质 · 💬 一言 · 📷 拍照 · 🏠 首页 · ℹ️ 关于 · ✖ 关闭

各开关可在 live2d_settings 中启用或禁用：

canSwitchModel / canSwitchTextures / canSwitchHitokoto / canTakeScreenshot / canTurnToHomePage / canTurnToAboutPage / canCloseLive2d

📜 版权

  • 代码（live2d_api、live2d_demo 前端）为 MIT，可自由使用 / 修改 / 再分发，须保留许可证（见 LICENSE-live2d-api.txt）。
  • 模型文件版权归各原作者所有，仅供个人研究 / 学习 / 自娱，不得商用。对外展示请替换为拥有授权的模型。

Made with 💜 by lqbby · Live2D 看板娘

技术栈

JavaScript

标签

Live2D看板娘前端