🧩 一、环境准备

非常好 ✅
那我们把 Week 1 原型 换成用 Live2D 实现。目标相同：
→ 在桌面上显示一个 Live2D 角色，能播放表情与动作动画（例如 idle / smile / surprise），点击时切换动画。

下面是完整、实战级的 Electron + Live2D 实现指南。
（可直接运行，支持 Linux / Windows / macOS）

🧩 一、环境准备

1️⃣ 安装 Node.js

确认 Node.js ≥ 18：

node -v
npm -v

如果没有：

sudo pacman -S nodejs npm

2️⃣ 新建项目目录

mkdir doumeichan-live2d
cd doumeichan-live2d
npm init -y

3️⃣ 安装依赖

npm install electron pixi.js pixi-live2d-display

pixi-live2d-display 是一个封装了 Cubism SDK 的 JS 实现，可直接在 Electron/Web 渲染 Live2D 模型。
它兼容 .model3.json 格式的模型（Cubism 3/4 均支持）。

📁 二、项目结构

doumeichan-live2d/
├── package.json
├── main.js              # Electron 主进程
├── index.html           # 页面入口
├── renderer.js          # 渲染逻辑 (Pixi + Live2D)
└── assets/
    └── model/
        ├── Haru/
        │   ├── Haru.model3.json
        │   ├── Haru.moc3
        │   ├── Haru.physics3.json
        │   ├── Haru.motion3.json
        │   ├── textures/
        │   │   └── texture_00.png

Live2D 官方示例模型 “Haru” 可免费下载：
https://www.live2d.com/download/sample-data/

⚙️ 三、Electron 主进程

main.js

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    transparent: true,
    frame: false,
    alwaysOnTop: true,
    resizable: false,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: true,
      contextIsolation: false,
    },
  });

  win.loadFile('index.html');
  // 若想鼠标穿透可启用
  // win.setIgnoreMouseEvents(true, { forward: true });
}

app.whenReady().then(createWindow);
app.on('window-all-closed', () => app.quit());

🪞 四、网页与渲染逻辑

index.html

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>抖妹酱 Live2D 原型</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      background: transparent;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <script type="module" src="renderer.js"></script>
</body>
</html>

renderer.js

import * as PIXI from 'pixi.js';
import { Live2DModel } from 'pixi-live2d-display';

// 初始化 PIXI 应用
const app = new PIXI.Application({
  width: 800,
  height: 600,
  backgroundAlpha: 0,
});
document.body.appendChild(app.view);

// 加载 Live2D 模型
(async () => {
  const model = await Live2DModel.from('assets/model/Haru/Haru.model3.json');

  model.scale.set(0.4);
  model.position.set(app.screen.width / 2, app.screen.height * 0.95);
  model.anchor.set(0.5, 1);

  app.stage.addChild(model);

  // 设置动作动画列表
  const motions = ['Idle', 'TapBody', 'Shake'];

  let current = 0;
  function playNextMotion() {
    const motion = motions[current];
    model.motion(motion);
    current = (current + 1) % motions.length;
  }

  playNextMotion();

  // 点击切换动画
  app.view.addEventListener('click', playNextMotion);
})();

💡 说明：
pixi-live2d-display 自动解析 motion3.json 文件并播放动画。
如果模型带有 Haru.motion3.json 文件，你可以直接调用 model.motion('TapBody') 之类的动作。
如果你的模型没有对应动作，可调用 model.motion('Idle') 或自定义。

🚀 五、运行项目

执行：

npx electron .

你会看到 Haru 模型（或你自己的 Live2D 模型）在桌面透明窗口中动起来。
点击模型可以切换动画！

🌈 六、添加你的角色（抖妹酱）

将你自己的 Live2D Cubism 模型导出为 .model3.json 格式（包含 .moc3、.physics3.json、.motion3.json、textures），放入：

assets/model/doumeichan/

然后修改：

const model = await Live2DModel.from('assets/model/doumeichan/doumeichan.model3.json');

🧠 七、进一步增强（Week 2 方向）

✅ 添加 表情切换按钮（smile, surprise）
✅ 根据语音输入改变动作（STT + emotion analysis）
✅ 实现 透明穿透 模式（Qt 桌宠效果）
✅ 增加 鼠标跟随、眨眼、物理抖动

💾 八、免费 Live2D 模型资源推荐

名称	链接	用途
Haru (官方)	https://www.live2d.com/download/sample-data/	开发测试
Hiyori	同上	更多表情
Koharu	同上	Cubism 4 新模型
OpenLive2DModels	https://github.com/guansss/open-live2d-models	GPL 模型集合
LAppModel (旧版)	https://github.com/Live2D/CubismWebSamples	官方 JS SDK 示例

🧩 九、注意事项

GPU 加速：Electron 默认启用，可在低端机上关闭 app.disableHardwareAcceleration()。
透明穿透：win.setIgnoreMouseEvents(true, { forward: true }) 可让点击穿透桌宠。
性能调优：限制帧率为 60fps；模型超过 1 个可考虑延迟加载。

是否希望我帮你：
👉 直接生成一个可运行的 完整 Electron + Live2D 模板 ZIP 包（带 Haru 模型与三种动作）？
你只需下载、npm install、npx electron . 就能直接看到 Live2D 桌宠在动。