1. 项目背景与核心功能年会抽奖环节一直是企业活动中最受期待的环节之一。传统的抽奖方式往往缺乏视觉冲击力难以调动现场气氛。这个基于Windows平台的3D圆球抽奖系统正是为了解决这个问题而设计的。核心功能亮点炫酷的3D球体动态效果所有参与者的名字在球体表面流动旋转完全可定制的界面元素背景、音乐、奖品展示等支持Excel导入参与者名单导出抽奖结果本地化存储配置数据无需担心隐私泄露开箱即用的Windows安装包无需复杂配置技术提示系统底层使用Three.js实现3D渲染Vue3构建用户界面IndexDB处理本地数据存储这种技术组合既保证了视觉效果又确保了流畅的用户体验。2. 环境准备与安装指南2.1 系统要求检查在开始安装前请确保您的Windows系统满足以下要求操作系统Windows 10/11 64位内存至少4GB可用内存显卡支持WebGL 2.0的显卡浏览器最新版Chrome或Edge用于Web版本.NET Framework 4.7.2或更高版本2.2 三种安装方式详解2.2.1 直接使用Web版本最简单的使用方式是直接访问官方提供的Web版本打开Chrome或Edge浏览器访问 https://log1997.github.io/log-lottery/首次使用时建议点击全局配置→界面配置→重置所有数据2.2.2 Windows安装包方式对于需要离线使用的场景前往GitHub Releases页面下载最新.exe安装包双击运行安装程序按向导完成安装安装完成后桌面会出现快捷方式首次运行时系统会自动创建必要的配置文件夹2.2.3 Docker容器方式适合技术团队部署到内网环境# 拉取最新镜像 docker pull log1997/log-lottery:latest # 运行容器映射到本地9279端口 docker run -d --name log-lottery -p 9279:80 log1997/log-lottery:latest访问地址http://localhost:9279/log-lottery/3. 核心功能配置详解3.1 人员名单管理系统支持多种方式导入参与者信息Excel模板导入推荐下载系统提供的模板文件按格式填写姓名、部门、工号等信息在人员配置界面点击导入Excel手动添加在界面中直接输入人员信息支持批量粘贴从其他系统复制的名单临时添加抽奖过程中可随时添加遗漏人员新增人员会立即加入抽奖池实战技巧建议提前准备好两份名单 - 全员名单和各部门名单这样可以根据不同奖项灵活切换抽奖范围。3.2 奖项与规则设置每个奖项都可以独立配置基础设置奖项名称、奖品图片、抽取人数高级规则是否允许重复中奖特定部门/岗位限制中奖后是否从后续抽奖中排除自定义中奖动画效果// 奖项配置数据结构示例 { awardName: 特等奖, quota: 1, allowRepeat: false, departments: [技术部,产品部], animation: explosion }3.3 界面个性化定制系统提供丰富的视觉定制选项主题颜色预设12种配色方案支持自定义RGB值3D球体参数粒子大小旋转速度高亮颜色背景透明度文字效果中奖字体大小跑马灯速度弹幕显示设置背景音乐支持多首音乐循环播放可设置不同阶段的背景音乐准备、抽奖、中奖4. 抽奖流程与现场控制4.1 标准抽奖流程预热阶段播放背景音乐3D球体展示所有参与者名字开始抽奖点击开始按钮球体加速旋转抽取结果点击停止系统通过物理引擎模拟球体减速过程结果展示中奖者名字高亮显示伴有动画和音效记录保存自动记录到历史记录可随时导出4.2 高级控制技巧节奏控制通过空格键快速开始/停止比鼠标操作更流畅多屏支持可将结果输出到投影仪操作界面留在控制台紧急预案突然断电数据会自动保存恢复后可继续误操作提供撤销上一步功能系统卡顿备用的简化模式关闭3D效果4.3 数据管理与备份所有配置和数据都存储在本地位置C:\Users[用户名]\AppData\Roaming\log-lottery备份建议定期复制整个文件夹到安全位置使用导出配置功能生成.json备份文件重要活动前保存系统快照5. 技术原理与性能优化5.1 3D渲染核心机制系统采用Three.js实现3D效果粒子系统每个名字对应一个3D粒子物理引擎模拟球体旋转的物理效果着色器自定义GLSL着色器实现流光效果性能优化视锥体裁剪实例化渲染按需加载5.2 数据存储方案IndexDB存储配置和人员数据本地文件保存图片、音乐等大文件内存缓存抽奖过程中的高频访问数据5.3 常见问题解决方案3D显示异常更新显卡驱动在chrome://flags中启用Override software rendering list降低画质设置导入失败处理检查Excel是否使用模板格式确保没有特殊字符尝试将文件另存为.csv格式再导入性能优化建议超过500人时启用简化模式关闭不必要的后台程序使用有线网络连接对于Web版6. 扩展应用与二次开发6.1 企业定制化方向集成企业OA系统自动同步人员信息添加LDAP/AD域认证开发微信小程序联动功能定制企业VI主题包6.2 开发者指南项目采用前后端分离架构前端Vue3 TypeScript Three.js打包Vite样式DaisyUI# 开发环境搭建 git clone https://github.com/LOG1997/log-lottery.git cd log-lottery pnpm install pnpm dev # 构建生产版本 pnpm build6.3 插件开发系统支持通过插件扩展功能在src/plugins目录下创建新插件实现核心接口interface LotteryPlugin { name: string; init(): Promisevoid; onEvent(event: string, data: any): void; }在main.ts中注册插件我在实际使用中发现这套系统最出色的地方在于它的灵活性。去年我们公司年会时临时需要增加一个最佳着装奖通过系统的快速奖项功能5分钟就完成了设置而且效果丝毫不打折扣。对于技术团队来说它的开源特性也让我们能够根据公司需求进行深度定制比如我们集成了员工照片自动显示功能当中奖时不仅显示名字还会显示员工照片现场效果非常好。 
长河君 · 2026/11/2 3:19:13 · 阅读 1.2k 3D圆球抽奖系统：企业年会的炫酷解决方案
1. 项目背景与核心功能年会抽奖环节一直是企业活动中最受期待的环节之一。传统的抽奖方式往往缺乏视觉冲击力难以调动现场气氛。这个基于Windows平台的3D圆球抽奖系统正是为了解决这个问题而设计的。核心功能亮点炫酷的3D球体动态效果所有参与者的名字在球体表面流动旋转完全可定制的界面元素背景、音乐、奖品展示等支持Excel导入参与者名单导出抽奖结果本地化存储配置数据无需担心隐私泄露开箱即用的Windows安装包无需复杂配置技术提示系统底层使用Three.js实现3D渲染Vue3构建用户界面IndexDB处理本地数据存储这种技术组合既保证了视觉效果又确保了流畅的用户体验。2. 环境准备与安装指南2.1 系统要求检查在开始安装前请确保您的Windows系统满足以下要求操作系统Windows 10/11 64位内存至少4GB可用内存显卡支持WebGL 2.0的显卡浏览器最新版Chrome或Edge用于Web版本.NET Framework 4.7.2或更高版本2.2 三种安装方式详解2.2.1 直接使用Web版本最简单的使用方式是直接访问官方提供的Web版本打开Chrome或Edge浏览器访问 https://log1997.github.io/log-lottery/首次使用时建议点击全局配置→界面配置→重置所有数据2.2.2 Windows安装包方式对于需要离线使用的场景前往GitHub Releases页面下载最新.exe安装包双击运行安装程序按向导完成安装安装完成后桌面会出现快捷方式首次运行时系统会自动创建必要的配置文件夹2.2.3 Docker容器方式适合技术团队部署到内网环境# 拉取最新镜像 docker pull log1997/log-lottery:latest # 运行容器映射到本地9279端口 docker run -d --name log-lottery -p 9279:80 log1997/log-lottery:latest访问地址http://localhost:9279/log-lottery/3. 核心功能配置详解3.1 人员名单管理系统支持多种方式导入参与者信息Excel模板导入推荐下载系统提供的模板文件按格式填写姓名、部门、工号等信息在人员配置界面点击导入Excel手动添加在界面中直接输入人员信息支持批量粘贴从其他系统复制的名单临时添加抽奖过程中可随时添加遗漏人员新增人员会立即加入抽奖池实战技巧建议提前准备好两份名单 - 全员名单和各部门名单这样可以根据不同奖项灵活切换抽奖范围。3.2 奖项与规则设置每个奖项都可以独立配置基础设置奖项名称、奖品图片、抽取人数高级规则是否允许重复中奖特定部门/岗位限制中奖后是否从后续抽奖中排除自定义中奖动画效果// 奖项配置数据结构示例 { awardName: 特等奖, quota: 1, allowRepeat: false, departments: [技术部,产品部], animation: explosion }3.3 界面个性化定制系统提供丰富的视觉定制选项主题颜色预设12种配色方案支持自定义RGB值3D球体参数粒子大小旋转速度高亮颜色背景透明度文字效果中奖字体大小跑马灯速度弹幕显示设置背景音乐支持多首音乐循环播放可设置不同阶段的背景音乐准备、抽奖、中奖4. 抽奖流程与现场控制4.1 标准抽奖流程预热阶段播放背景音乐3D球体展示所有参与者名字开始抽奖点击开始按钮球体加速旋转抽取结果点击停止系统通过物理引擎模拟球体减速过程结果展示中奖者名字高亮显示伴有动画和音效记录保存自动记录到历史记录可随时导出4.2 高级控制技巧节奏控制通过空格键快速开始/停止比鼠标操作更流畅多屏支持可将结果输出到投影仪操作界面留在控制台紧急预案突然断电数据会自动保存恢复后可继续误操作提供撤销上一步功能系统卡顿备用的简化模式关闭3D效果4.3 数据管理与备份所有配置和数据都存储在本地位置C:\Users[用户名]\AppData\Roaming\log-lottery备份建议定期复制整个文件夹到安全位置使用导出配置功能生成.json备份文件重要活动前保存系统快照5. 技术原理与性能优化5.1 3D渲染核心机制系统采用Three.js实现3D效果粒子系统每个名字对应一个3D粒子物理引擎模拟球体旋转的物理效果着色器自定义GLSL着色器实现流光效果性能优化视锥体裁剪实例化渲染按需加载5.2 数据存储方案IndexDB存储配置和人员数据本地文件保存图片、音乐等大文件内存缓存抽奖过程中的高频访问数据5.3 常见问题解决方案3D显示异常更新显卡驱动在chrome://flags中启用Override software rendering list降低画质设置导入失败处理检查Excel是否使用模板格式确保没有特殊字符尝试将文件另存为.csv格式再导入性能优化建议超过500人时启用简化模式关闭不必要的后台程序使用有线网络连接对于Web版6. 扩展应用与二次开发6.1 企业定制化方向集成企业OA系统自动同步人员信息添加LDAP/AD域认证开发微信小程序联动功能定制企业VI主题包6.2 开发者指南项目采用前后端分离架构前端Vue3 TypeScript Three.js打包Vite样式DaisyUI# 开发环境搭建 git clone https://github.com/LOG1997/log-lottery.git cd log-lottery pnpm install pnpm dev # 构建生产版本 pnpm build6.3 插件开发系统支持通过插件扩展功能在src/plugins目录下创建新插件实现核心接口interface LotteryPlugin { name: string; init(): Promisevoid; onEvent(event: string, data: any): void; }在main.ts中注册插件我在实际使用中发现这套系统最出色的地方在于它的灵活性。去年我们公司年会时临时需要增加一个最佳着装奖通过系统的快速奖项功能5分钟就完成了设置而且效果丝毫不打折扣。对于技术团队来说它的开源特性也让我们能够根据公司需求进行深度定制比如我们集成了员工照片自动显示功能当中奖时不仅显示名字还会显示员工照片现场效果非常好。