如果你正在为 公司年会抽奖环节 发愁——
觉得传统 PPT 抽奖太普通、网页抽奖太单调、现场氛围不够燃——
那你一定会喜欢这个 GitHub 项目：

moshang-ax / lottery

一个开箱即用的 3D 年会抽奖系统，打开就是满屏旋转的立体抽奖球，现场效果直接拉满。

使用效果

• 所有参与者以卡片形式组成一个 3D 球体

• 球体持续旋转，形成候选池

• 点击开始后高速旋转 → 缓慢停下 → 中奖者高亮展示

抽奖流程：

• Excel 导入参与人员

• 配置奖项和抽取规则

• 去重抽奖（不会重复中奖）

• 重抽补抽

• 结果导出 Excel

• 刷新不中断，支持断点续抽

技术栈概览

对前端开发者来说非常友好：

• 前端：Three.js + HTML + CSS + JavaScript

• 后端：Node.js + Express

• 数据：Excel 导入 / 导出

• 部署：本地运行 / Docker 一键部署

无需数据库，无复杂依赖，现场稳定运行。

项目启动

1. 下载项目

git clone https://github.com/moshang-ax/lottery.git (opens in a new tab) 

cd lottery 

2. 准备参与人员 Excel

路径：

server/data/user.xlsx 

表格格式如下：

表头不要改，填好保存即可。

3. 配置奖项规则

打开：

server/config.js 

你可以修改：

• 奖项名称（一等奖、二等奖…）

• 每个奖项人数

• 每轮抽取数量

• 公司名称

• 奖品图片

整个抽奖规则完全由配置驱动，不用改任何业务代码。

4. 安装依赖

根目录执行：

npm install 

进入前端目录：

cd web 

npm install 

5. 启动项目

回到根目录：

npm run dev 

浏览器访问：

http://localhost:7001 (opens in a new tab) 

3D 抽奖界面就会出现。

6. 生产环境或现场部署

npm run build 

npm run serve 

或者直接 Docker 一键部署：

docker build -t lottery . 

docker run -p 7001:7001 lottery 

抽奖代码原理

后端只负责一件事：抽奖正确性

• 从未中奖用户池中随机抽取

• 抽中即从池中移除（去重）

• 保存抽奖进度（刷新不中断）

• 支持重抽回退

• 最终导出 Excel

前端负责视觉叙事

• Three.js 生成球体

• 把每个参与者渲染成卡片贴在球面

• 持续旋转营造候选池效果

• 接到后端中奖名单后：

  • 延迟几秒制造悬念

  • 球体减速停止

  • 中奖卡片飞到镜头前高亮

结语

GitHub 地址：
https://github.com/moshang-ax/lottery (opens in a new tab)