又快到年底了，年会抽奖总是缺少一个炫酷的抽奖系统？今天给大家推荐一款基于Three.js和Vue3开发的3D球体动态抽奖应用，支持一键部署、高度定制化，非常优秀！
简介
log-lottery是一个可配置可定制化的抽奖应用，炫酷3D球体，可用于年会抽奖等活动，支持奖品、人员、界面、图片音乐配置。
想象一下这样的场景：一个大屏幕上，一个精美的3D球体在不断旋转，球面上展示着参与者的名字，当抽当抽奖开始时，名字高速滚动最终慢慢停在获奖人姓名上……这样的抽奖环节，不仅能点燃现场气氛，还能让每位参与者感受到科技的魅力。
核心特征
炫酷的3D球体效果
log-lottery与传统抽奖软件最大的区别在于其引人注目的3D球体抽奖界面。它利用Three.js的强大能力，创造了令人惊叹的视觉体验，让抽奖过程不再是简单的随机挑选，而是变成一场视觉盛宴。
高度可定制化
这款抽奖应用提供了极其丰富的定制选项：
-
奖品配置： 灵活添加和设置各个奖项的名称、抽取人数、是否全员参与以及显示的图片 -
人员管理： 支持Excel模板导入参与者信息，大大简化了大量人员的录入过程 -
界面个性化： 可自定义标题、列数、卡片颜色、首页图案等 -
背景音乐与图片： 支持上传自定义背景图片和音乐，营造贴合活动主题的氛围
数据本地化存储
采用IndexedDB技术，所有数据（包括配置、人员信息和抽奖结果）都存储在浏览器本地，既保证了数据安全，又减少了对服务器的依赖。
跨平台兼容性
项目使用PC端最新版Chrome或Edge浏览器可以获得最佳体验。
部署使用
本地部署
如果你希望在本地环境运行log-lottery，只需几步简单操作：
-
克隆项目
git clone https://github.com/LOG1997/log-lottery.git
-
安装依赖
pnpm i # 或者 npm install
-
开发运行
pnpm dev # 或者 npm run dev
-
构建生产版本
pnpm build # 或者 npm run build
如果想要直接通过HTML文件运行，可以使用特殊构建命令：
pnpm build:file
然后在生成的dist目录中直接打开index.html即可。
基本使用流程
-
配置参与人员： 在人员配置管理界面下载Excel模板，填写数据后导入 -
设置奖项： 在奖项配置界面添加奖项，定义名称、抽取人数和相关图片 -
调整界面： 根据活动主题定制界面颜色、标题等视觉元素 -
上传素材： 根据需要上传背景图片和音乐 -
开始抽奖： 进入抽奖界面，点击开始，享受震撼的3D抽奖过程
界面预览
首页
抽奖
配置
图片音乐配置
开源地址
https://github.com/LOG1997/log-lottery
构建高质量的技术交流社群，欢迎从事编程开发、技术招聘HR进群，也欢迎大家分享自己公司的内推信息，相互帮助，一起进步！
文明发言，以
交流技术、职位内推、行业探讨为主
广告人士勿入，切勿轻信私聊，防止被骗
点下方的“❤”支持我们，非常感谢！