Lottery是一款基于MIT协议开源且免费的3D动态抽奖系统，专为满足公司年会、团队建设、线下会议等场景的抽奖需求而设计。它支持通过Excel批量导入参与人员名单，并允许用户完全自定义奖品、界面样式、背景音乐等参数，同时还能导出中奖结果，灵活适应各类活动的具体要求。
与依赖后端服务的传统抽奖方案不同，该系统采用纯前端架构，这意味着你无需部署任何服务器即可运行，真正实现了开箱即用，大大降低了使用门槛。其核心亮点在于利用3D球体动画来呈现所有参与者，通过充满科技感的视觉效果极大地增强了现场的仪式感和互动氛围，让抽奖环节不再枯燥。
核心功能特性
- 抽奖展示
- 基于 Three.js 实现3D球体旋转动画，抽奖过程动态可视化，有效提升现场氛围。
- 支持国际化多语言显示。
- 人员管理
- 支持Excel模板批量导入人员信息，可配置是否允许重复中奖。
- 所有数据在浏览器本地存储，无需服务器，兼顾便利性与数据安全。
- 奖项配置
- 完全自定义奖项名称、数量及不同轮次的抽奖规则。
- 可灵活配置奖项的展示样式，满足个性化需求。
- 抽奖管理
- 实时展示中奖人员信息与抽奖弹幕。
- 支持将中奖结果导出为文件，抽奖进度自动保存，防止意外中断。
- 界面管理
- 自定义页面标题、深色/浅色主题、背景音乐，强化现场效果。
- 支持上传背景图片，融入品牌元素。
- 部署管理
- 可直接在本地运行，也可构建为静态资源部署到任何Web服务器。
- 提供 Docker 镜像，方便快速部署和分发。
系统功能界面预览
主界面与抽奖准备：
抽奖过程与结果：
（效果图同上文3D球体及结果展示界面）
后台管理配置：
人员名单管理
奖品配置
全局界面配置
界面细节配置
二次开发指南
如果你希望自定义或集成此系统，其技术栈基于现代 Vue 生态，具体如下：
技术栈： Vue、Vite、Three、Pinia、DaisyUI
开发步骤：
-
获取源码后，安装项目依赖：
pnpm i
# 或使用 npm
# npm install
-
启动本地开发服务器进行调试：
pnpm dev
# 或使用 npm
# npm run dev
-
构建生产环境静态文件：
pnpm build
# 或使用 npm
# npm run build
快速启动体验
方式一：安装包（最简单）
直接下载官方提供的打包好的安装包，运行对应的可执行文件(.exe)即可。
方式二：Docker 部署
适合希望在服务器或容器环境下运行的场景。
-
构建Docker镜像：
docker build -t log-lottery .
-
运行容器：
docker run -d -p 9279:80 log-lottery
-
在浏览器中访问：
http://localhost:9279/log-lottery/
项目开源地址
这是一个在GitHub上活跃的 开源实战 项目，你可以直接访问其仓库页面获取完整的源代码、详细的使用文档以及最新的发布版本。对于开发者而言，这不仅是即用的工具，也是一个学习 Vue3 与 Three.js 结合实现复杂3D可视化界面的优秀案例。
本文分享的开源项目来自社区，希望对需要筹办年会或活动的朋友有所帮助。如果你在云栈社区发现了其他有趣的项目或技术实践，也欢迎一起交流探讨。 | 
发表于 昨天 09:16
|
查看: 1|
回复: 0
