项目简介
马上又到公司年会，需要开发一个抽奖平台，想找个界面酷炫、免费且无广告的抽奖工具，市面上的选择往往难以兼顾视觉效果与数据隐私。 偶然在 GitHub 发现 log-lottery 这个开源项目，一款专为年会场景设计的 3D 动态抽奖应用，视觉冲击力很强。 采用 Vue 3 + Three.js 构建，核心界面是一个由员工名单组成的 3D 旋转球体，抽奖过程平滑流畅，且完全纯前端运行。
功能设计也相当周全，支持 Excel 一键导入人员名单，自定义奖品图片、背景音乐和壁纸，甚至还贴心内置了“内定” 功能，可以指定特定人员中奖。 支持断电或刷新后自动恢复进度，抽奖结果可直接导出 Excel。对于正在筹备年会或团建的行政、HR 来说，这是一个既有面子又好上手的现成方案。要求
使用PC端最新版Chrome或Edge浏览器。
访问地址：
https://1kw20.fun/log-lottery
or
https://log1997.github.io/log-lottery/
详细介绍
配置参与人员
于人员配置管理界面下载excel模板，按要求填好数据后导入即可。
配置奖项
于奖项配置管理界面添加奖项后，自定义修改名称、抽取人数、是否全员参加、图片显示。
界面配置
可自定义配置标题、列数、卡片颜色、首页图案等。
图片和音乐管理
上传图片或音乐即可，数据使用indexdb在浏览器本地进行存储。
预览
首页
抽奖
配置
技术
-
vue3 -
threejs -
indexdb -
pinia -
daisyui
开发
安装依赖
pnpm i
or
npm install
开发运行
pnpm dev
or
npm run dev
打包
pnpm build
or
npm run build
预览
pnpm preview
or
npm run preview
若想直接以打开html文件的方式运行，请执行以下命令进行打包。打包完成后在dist目录中直接打开index.html即可。
pnpm build:file
or
npm run build:file
项目思路来源于 https://github.com/moshang-xc/lottery
Docker支持
构建镜像
docker build -t log-lottery .
运行容器
docker run -d -p 9279:80 log-lottery
容器运行成功后即可在本地通过http://localhost:9279/log-lottery/访问
项目地址
https://github.com/LOG1997/log-lottery/blob/main/README.md
扫码加入技术交流群，备注「开发语言-城市-昵称」
合作请注明
如果你觉得这篇文章不错，别忘了点赞、在看、转发给更多需要的小伙伴哦！我们下期再见！