沉浸式3D抽奖系统：用Three.js+Vue3打造创新体验的动态抽奖应用

log-lottery是一款基于Three.js+Vue3技术栈的可视化抽奖工具，通过创新的3D球体设计，让抽奖过程从传统的静态选择升级为动态视觉盛宴。这款3D抽奖系统不仅解决了传统抽奖方式互动性不足的问题，更通过沉浸式设计为各类活动提供专业级抽奖体验，重新定义了数字时代的抽奖仪式感。

视觉体验革命：3D交互如何重构抽奖沉浸感

传统抽奖工具往往局限于平面列表或简单动画，而log-lottery通过Three.js引擎构建的3D球体交互系统，将参与者信息转化为球面动态元素。当抽奖开始时，名字卡片如同围绕恒星运转的行星般在深色星空背景中流动，配合粒子特效与光影变化，创造出极具科技感的视觉冲击。

这种设计带来三重体验升级：空间感让参与者感知自己在抽奖池中的"存在"，动态旋转增强紧张期待感，而最终定格时的粒子爆炸效果则放大了中奖喜悦。核心视觉模块位于[src/views/Home/]目录下，通过Canvas渲染与WebGL加速实现流畅的3D交互体验。

⚡️ 技术突破点：采用Web Worker分离复杂计算，确保UI线程不被阻塞，即使加载上千名参与者数据也能保持60fps流畅度。

三步场景化部署：从开发调试到万人活动

场景一：小型团队活动（10-50人）

git clone https://gitcode.com/gh_mirrors/lo/log-lottery
cd log-lottery && pnpm install && pnpm dev

执行后终端将显示本地开发服务器地址（通常为http://localhost:5173），直接访问即可使用。此模式适合部门团建、小型聚会等场景，优点是零配置启动，支持实时调整参数。

💡 提示：开发模式下支持热重载，修改[src/constant/config.ts]中的参数可实时预览效果。

场景二：企业年会（100-500人）

pnpm build && npx serve dist -p 8080

构建优化后的生产版本，通过静态服务器部署。相比开发模式，页面加载速度提升60%，支持更多并发访问。适合需要在公司内网或专用服务器运行的中型活动。

场景三：大型公开活动（500+人）

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

容器化部署确保跨平台一致性，配合Nginx反向代理可轻松实现负载均衡。核心部署配置位于项目根目录的[Dockerfile]中，支持自定义端口与资源路径。

如何用技术架构实现专业级抽奖功能

数据层：高效管理抽奖核心数据

人员管理模块位于[src/views/Config/Person/]目录，采用Excel批量导入方案解决大规模数据录入问题。系统支持部门分类、状态追踪和数据校验，确保抽奖过程公平公正。

技术实现上，通过[src/utils/dexie/index.ts]封装的IndexedDB数据库，实现本地数据持久化，即使刷新页面也不会丢失配置信息。导入功能使用Web Worker处理Excel解析，避免大文件上传导致的界面卡顿。

交互层：打造流畅的抽奖控制体验

奖项配置模块位于[src/views/Config/Prize/]目录，采用可视化表单实现奖项层级管理。支持设置奖项名称、数量、概率权重和奖品图片，满足从特等奖到参与奖的全场景需求。

交互设计上，所有操作即时生效，无需页面刷新。通过Vue3的响应式系统，当配置变化时，3D球体的视觉效果会实时更新，让组织者可以直观预览最终呈现效果。

展示层：多媒体元素营造沉浸氛围

音乐配置模块位于[src/views/Config/Global/MusicConfig/]目录，支持背景音效与抽奖音效的独立控制。系统预置多首氛围音乐，也可上传自定义音频文件，打造专属活动氛围。

视觉与听觉的协同设计是log-lottery的核心优势。当抽奖开始时，背景音乐自动切换为节奏更快的曲目；中奖瞬间触发专属音效与粒子特效，形成多感官刺激的记忆点。

场景落地指南：从校园晚会到企业年会

高校活动场景

适配方案：使用"学号+院系"双维度管理，开启"禁止重复中奖"模式，适合社团招新、节日庆典等场景。通过[src/store/personConfig.ts]设置参与限制，确保每位学生公平参与机会。

企业年会场景

进阶功能：利用部门筛选功能实现"按部门抽奖"，支持设置不同部门的中奖概率权重。在[src/views/Config/Server/]配置中开启实时数据同步，可在大屏幕与管理端之间共享抽奖状态。

抽奖流程对比：

• 传统抽奖：人工念号→现场核对→手动记录
• 3D抽奖：一键启动→动态展示→自动记录→结果导出

线上直播场景

技术适配：通过[src/hooks/useWebsocket.ts]开启远程控制模式，主持人可在手机端控制抽奖过程，观众在直播间实时观看3D抽奖效果。系统会自动生成中奖名单图片，方便直播截图分享。

扩展指南：打造专属抽奖系统

自定义视觉主题

修改[src/constant/theme.ts]中的配色方案，或替换[src/assets/images/]目录下的背景图片，可快速适配企业VI风格。进阶用户可通过[src/views/Config/Global/ThemeSetting/]自定义3D球体材质与粒子效果。

功能二次开发

项目采用模块化设计，核心抽奖逻辑位于[src/views/Home/useViewModel.ts]。如需添加新功能，建议通过扩展[src/store/]目录下的状态管理模块，避免修改核心逻辑。

性能优化建议

• 当参与人数超过1000人时，开启[src/constant/config.ts]中的"简化模式"
• 对于低配置设备，可在[src/lib/utils.ts]中调整3D渲染精度参数
• 大型活动建议预生成参与者数据缓存，减少实时计算压力

log-lottery通过技术创新将抽奖从简单的随机选择升级为沉浸式体验，其Three.js+Vue3的技术架构既保证了视觉效果的惊艳，又兼顾了功能的实用性。无论是校园活动还是企业年会，这款3D抽奖系统都能为活动增添科技感与互动性，让每个中奖时刻都成为难忘的记忆点。