Live2D 参数控制系统

🎛️ 一个强大的 Live2D 模型参数实时控制和预览工具

✨ 功能特点

• 🎚️ 实时参数控制：13 个滑块实时控制模型各项参数
• 🎬 原生动作播放：支持播放模型自带的所有动作文件
• 👁️ 自动眨眼：可开关的自动眨眼功能
• 🫁 自动呼吸：可开关的自动呼吸动画
• 📊 参数导出：导出当前参数配置为 JSON
• ℹ️ 模型信息：查看模型的详细参数信息
• 🎭 多模型支持：支持加载不同的 Live2D 模型

🚀 快速开始

安装依赖

npm install

启动开发服务器

npm run dev

访问 http://localhost:3000/param-control.html

📁 项目结构

live2d-param-control/
├── param-control.html       # 主页面
├── param-control.js         # 主逻辑
├── public/                  # 模型资源
│   ├── airi/               # Airi (Hiyori) 模型
│   ├── haru/               # Haru 模型（26个动作）
│   ├── miku/               # Miku 模型
│   └── model/              # 简单测试模型
├── package.json
└── vite.config.js

🎮 使用说明

参数控制区

左侧滑块可以实时控制模型的各项参数：

• 头部角度：X/Y/Z 轴旋转
• 身体角度：Z 轴旋转
• 眼睛：左右眼开合、眨眼控制
• 嘴巴：嘴型控制
• 手臂：手臂和手部姿势

动作模板区

右上方按钮可以播放预设动作模板：

• 原生动作：M1-M26 按钮播放模型自带的动作文件
• 快速预览：点击即可查看效果

控制按钮

• 自动眨眼：开关自动眨眼功能
• 自动呼吸：开关自动呼吸动画
• 导出参数：导出当前参数为 JSON 文件
• 模型信息：查看模型的所有参数详情

🎯 支持的参数

• ParamAngleX - 头部左右摇
• ParamAngleY - 头部上下点
• ParamAngleZ - 头部左右倾斜
• ParamBodyAngleZ - 身体左右倾斜
• ParamEyeLOpen - 左眼开合
• ParamEyeROpen - 右眼开合
• ParamEyeLSmile - 左眼笑眯
• ParamEyeRSmile - 右眼笑眯
• ParamMouthForm - 嘴型
• ParamArmRA - 右臂角度 A
• ParamArmRB - 右臂角度 B
• ParamHandAngleR - 右手角度
• 更多参数...

🛠️ 技术栈

• Live2D SDK: Cubism 4
• 渲染引擎: PixiJS + pixi-live2d-display
• 构建工具: Vite
• 样式: 原生 CSS（响应式布局）

💡 使用技巧

1. 组合参数：同时调整多个滑块创造独特表情
2. 参数导出：保存喜欢的参数配置，方便后续使用
3. 动作学习：播放原生动作观察参数变化，学习动画制作
4. 实时预览：所有参数调整实时反映到模型上

📝 注意事项

• 不同模型的参数名称和数量可能不同
• 某些参数可能在特定模型上无效果
• 建议使用现代浏览器以获得最佳性能

🎨 自定义模型

将你的 Live2D 模型文件放入 public/ 目录，然后修改 param-control.js 中的模型路径即可。

📄 许可证

本项目仅供学习交流使用。Live2D 模型版权归原作者所有。

🤝 贡献

欢迎提交 Issue 和 Pull Request！

---

Made with ❤️ by liuhaofang