从0到1打造会催你搬砖的3D桌面宠物：Electron + Vue3实战心得 点击关注公众号，“技术干货” 及时达！当二次元遇上生产力工具最近开发了一款名为"小桌宠"的跨平台桌面应用，将3D宠物与任务管理结合。这只兔子不仅能卖萌，还会在你摸鱼时弹出提醒，堪称赛博监工。 项目已开源,欢迎star!https://github.com/zlmica/3d-desktop-pet，「懒得自己运行程序也可以直接到视频介绍下方获取安装包体验，支持多平台」 分享几个关键技术点的实现方案： 一、透明窗口与跨进程通信（核心黑科技）「实现效果」：宠物始终置顶显示，右键菜单唤起任务/提醒窗口 function createWindow() { const primaryDisplay = screen.getPrimaryDisplay() const { width: screenWidth, height: screenHeight } = primaryDisplay.workAreaSize win = new BrowserWindow({ icon: path.join(process.env.VITE_PUBLIC, 'rabbit.png'), webPreferences: { preload: path.join(__dirname, 'preload.mjs'), }, width: 180, height: 200, x: screenWidth - 200, y: screenHeight - 150, autoHideMenuBar: true, transparent: true, frame: false, alwaysOnTop: true, resizable: false, hasShadow: false, }) // Test active push message to Renderer-process. win.webContents.on('did-finish-load', () = { win?.webContents.send('main-process-message', new Date().toLocaleString()) }) if (VITE_DEV_SERVER_URL) { win.loadURL(VITE_DEV_SERVER_URL) } else { win.loadFile(path.join(RENDERER_DIST, 'index.html')) } win.setVisibleOnAllWorkspaces(true, { visibleOnFullScreen: true, }) 关键代码解读： transparent: true+frame: false实现无边框透明窗口alwaysOnTop: true实现窗口置顶IPC通信控制子窗口状态「避坑指南」：透明窗口的点击穿透问题通过计算鼠标位置+动态调整窗口大小解决 二、3D宠物交互系统（TresJS魔法）「模型加载与动画控制」： const isPlaying = ref(false) const play = async () = { currentAction2.value.play() isPlaying.value = true } const sleep = () = { currentAction2.value.stop() isPlaying.value = false } const hello = () = { if (isPlaying.value) { currentAction2.value.stop() } currentAction.value.reset() currentAction.value.play() currentAction.value.setLoop(THREE.LoopOnce, 1) currentAction.value.clampWhenFinished = true currentAction.value.getMixer().addEventListener('finished', () = { currentAction.value.stop() if (isPlaying.value) { currentAction2.value.play() } }) } 使用GLTFLoader加载骨骼动画模型AnimationMixer实现打招呼/运动/休息状态切换点击事件穿透处理：将3D对象坐标转换为屏幕坐标「性能优化」： 空闲状态自动降帧（30FPS → 15FPS）离屏时暂停渲染三、任务管理系统（Dexie.js实战）「数据库设计」： class PetAppDB extends Dexie { tasks!: TableTask reminders!: TableReminder constructor() { super('petApp') // 定义数据库表结构和索引 this.version(1).stores({ tasks: '++id, title, status, priority, createdAt, updatedAt, dueDate', reminders: '++id, title, reminderTime, repeatType, isEnabled, lastAcknowledgedAt, createdAt', }) } /** * 添加任务 * @param {OmitTask, 'id' | 'createdAt' | 'updatedAt'} task - 任务数据 * @returns {Promisestring} 返回新增任务的ID */ async addTask(task: OmitTask, 'id' | 'createdAt' | 'updatedAt') { const timestamp = Date.now() return await this.tasks.add({ ...task, createdAt: timestamp, updatedAt: timestamp, }) } /** * 更新任务 * @param {string} id - 任务ID * @param {PartialOmitTask, 'id' | 'createdAt'} changes - 更新的字段 * @returns {Promisenumber} 返回更新的记录数 */ async updateTask( id: string, changes: PartialOmitTask, 'id' | 'createdAt' ) { return await this.tasks.update(id, { ...changes, updatedAt: Date.now(), }) } /* 提醒相关方法 ...*/ 智能排序算法：未完成 有截止时间 创建时间自动过期检测：通过dueDate字段+定时器实现离线存储：IndexedDB + 本地备份机制「典型查询示例」： // 获取24小时内到期的任务 constupcomingTasks =awaitdb.tasks .where('dueDate') .between(Date.now(),Date.now() +86400000) .toArray() 四、提醒系统（多窗口协同）「架构设计」： export function useReminder() { /** * 检查是否有需要提醒的事项 */ async function checkReminders() { const reminders = await db.checkReminders() reminderQueue.value = reminders if (reminderQueue.value.length 0) { window.ipcRenderer.send('show-reminder-window') } } 主窗口：轮询检查提醒窗口：队列管理+动画效果IPC消息流：show-reminder-window / hide-reminder-window「动效实现」： TransitionGroup name="reminder" div v-for="reminder in reminderQueue" :key="reminder.id" class="relative bg-white rounded-2xl p-4 w-[180px] border border-gray-100 animate-slide-in before:content-[''] before:absolute before:bottom-[-8px] before:left-[30px] before:w-4 before:h-4 before:bg-white before:transform before:rotate-45" div class="flex justify-between items-start mb-2" h3 class="font-medium select-none"{{ reminder.title }}/h3 span class="text-xs bg-blue-100 text-blue-800 px-2 py-0.5 rounded-full ml-2" {{ new Date(reminder.reminderTime).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', }) }} /span /div p class="text-gray-600 text-sm mb-4 select-none" {{ reminder.description || '' }} button @click="acknowledgeReminder(reminder)" class="w-[60px] bg-blue-500 text-white py-1.5 rounded-full text-sm hover:bg-blue-600 transition-colors select-none" 知道了 /button /div /TransitionGroup 使用Vue TransitionGroup + CSS Keyframe实现卡片弹出效果 五、性能优化实践「窗口管理」：子窗口单例模式（避免内存泄漏）「3D渲染」：离屏Canvas + 按需渲染「数据库」：批量操作+索引优化「打包优化」：electron-builder配置多平台构建// @see - https://www.electron.build/configuration/configuration { $schema: "https://raw.githubusercontent.com/electron-userland/electron-builder/master/packages/app-builder-lib/scheme.json", appId: "YourAppID", asar: true, productName: "小桌宠", directories: { output: "release/${version}", }, files: ["dist", "dist-electron"], mac: { target: ["dmg"], artifactName: "${productName}-Mac-${version}-Installer.${ext}", }, win: { target: [ { target: "nsis", arch: ["x64"], }, ], artifactName: "${productName}-Windows-${version}-Setup.${ext}", }, nsis: { oneClick: false, perMachine: false, allowToChangeInstallationDirectory: true, deleteAppDataOnUninstall: false, }, linux: { target: ["AppImage"], artifactName: "${productName}-Linux-${version}.${ext}", }, } 结语：桌面应用的思考通过这个项目验证了Electron在现代桌面开发中的可行性。尽管安装包体积较大，但开发效率和跨平台能力优势明显。未来计划加入： 宠物更换系统 ?更多交互功能宠物更换功能已发布，文章地址: https://juejin.cn/post/7475544117415624739「顺便一提」：项目结合AI开发，省时又省力，一个字，爽！！！ 关注更多AI编程资讯请去AI Coding专区：https://juejin.cn/aicoding 点击"阅读原文"了解详情~ 阅读原文