ThreeJS + Vue3 3D 球体动态年会抽奖应用

概述

在快节奏的现代职场中，年会、团队活动或线上派对总少不了抽奖环节。那种传统的手工抽签早已过时，取而代之的是科技感满满的数字抽奖工具。

今天，向大家分享一个开源项目——log-lottery。这是一个基于 Three.js 和 Vue 3 构建的 3D 动态抽奖应用，专为年会等场合设计。它不只实用，还带着一丝科幻电影般的视觉冲击力，让你的抽奖活动瞬间升级成焦点。

配置

• 配置参与人员：于人员配置管理界面下载excel模板，按要求填好数据后导入即可。
• 配置奖项：于奖项配置管理界面添加奖项后，自定义修改名称、抽取人数、是否全员参加、图片显示。
• 界面配置：可自定义配置标题、列数、卡片颜色、首页图案等。
• 图片和音乐管理：上传图片或音乐即可，数据使用indexdb在浏览器本地进行存储。

预览

预览地址：https://to2026.xyz/log-lottery

核心功能

• 3D 动态抽奖球：利用 Three.js 渲染的立体球体，支持粒子动画和自定义形状。抽奖过程流畅，视觉效果媲美专业软件。
• 参与者管理：通过 Excel 模板一键导入名单，支持临时添加参与者。抽奖后还能导出结果，便于后续统计。
• 奖品配置：定义奖品名称、获奖人数、参与规则，甚至上传奖品图片。支持多级奖项，比如“一等奖：iPhone，二等奖：AirPods”。
• 界面个性化：调整标题、布局列数、卡片颜色和首页背景。想来个节日主题？上传一张圣诞背景图，瞬间氛围拉满。
• 媒体资源管理：内置 IndexedDB 存储图片和音乐，无需服务器，就能本地持久化。抽奖时播放自定义 BGM，仪式感爆棚。
• 额外惊喜：支持临时抽奖模式（适合突发事件），未来还将集成弹幕聊天和多语言（i18n）。目前已支持 Docker 部署，线上 demo 可在 1kw20.fun/log-lottery 体验。

这些功能让 log-lottery 不仅仅是个工具，更像一个“抽奖导演”，帮你把平凡的环节变成难忘的记忆。

技术栈

作为一名前端爱好者，我特别欣赏这个项目的 tech stack。它用 Vue 3 作为骨架，确保组件化开发高效；Three.js 负责 3D 渲染，让球体抽奖生动逼真；Pinia 处理状态管理，避免了 Vuex 的复杂性；UI 则借力 DaisyUI，提供开箱即用的美观组件。

存储方面，IndexedDB 巧妙解决了离线需求——所有配置和媒体都保存在浏览器本地，隐私安全。构建工具是 Vite（隐含在 npm scripts 中），开发时热重载超快，生产构建后还能生成单 HTML 文件，直接浏览器打开运行。

值得一提的是，项目对浏览器兼容性有要求：推荐最新版 Chrome 或 Edge（PC 端）。移动端虽未优化，但未来版本或许会扩展。

快速上手：从克隆到抽奖，只需 5 分钟

安装超级简单，假设你有 Node.js 和 pnpm（或 npm）环境：

1. 克隆仓库：

git clone https://github.com/LOG1997/log-lottery.git
cd log-lottery

1. 安装依赖：

pnpm install

1. 开发模式启动：

pnpm dev

浏览器自动打开 localhost:5173，进入配置面板导入名单、设置奖品，即可开始抽奖测试。

想部署上线？构建后扔到 dist 文件夹，用 Nginx 或 GitHub Pages 托管。Docker 党更爽：

docker build -t log-lottery .
docker run -d -p 9279:80 log-lottery

访问 localhost:9279/log-lottery，搞定！

如果数据乱了，别慌：全局配置 > 界面配置 > 重置所有数据，一键清空 IndexedDB。