宁波市网站建设_网站建设公司_移动端适配_seo优化

log-lottery 项目完整教程

log-lottery是目前最受欢迎的开源3D球体年会抽奖程序之一（2025年底数据：GitHub 约 2k+ stars，432 forks）。
它采用Vue 3 + Three.js技术栈，实现炫酷的3D动态球体抽奖效果，非常适合公司年会、团队团建、线上直播抽奖、员工生日抽奖等场景。

项目GitHub：https://github.com/LOG1997/log-lottery
在线体验（推荐先看效果）：

• https://log1997.github.io/log-lottery/
• https://to2026.xyz/log-lottery/
• https://1kw20.fun/log-lottery/ （备用）

一、核心理念

1. 视觉优先，仪式感拉满
   抛弃传统平面转盘/九宫格，采用3D球体将所有参与者姓名分布在球面上。
   抽奖过程：高速旋转 → 渐减速 → 停止 → 中奖者放大+高亮，整个动画科技感与沉浸感极强。

2. 高度配置化，低代码/零代码上手
   奖项、人员、背景、音乐、颜色、Logo 等几乎全部通过界面配置完成，无需修改源码。

3. 纯前端 + 本地持久化
   数据存储在浏览器IndexedDB（支持图片/音乐上传持久化），无需后端服务器。
   支持 Excel 一键导入参与人员 + 导出中奖结果，适合临时/一次性活动。

4. 开箱即用 + 现代化部署
   支持静态托管、GitHub Pages、Docker 一键部署，特别友好NAS/内网/服务器场景。

二、主要功能一览

三、技术选型

• 前端框架：Vue 3（Composition API +<script setup>）
• 3D渲染：Three.js
• 状态管理：Pinia
• UI组件：DaisyUI+ Tailwind CSS
• 文件处理：SheetJS（xlsx 导入导出）
• 构建工具：Vite
• 存储：IndexedDB（主） / localStorage 降级
• 包管理：pnpm
• 部署：Docker / Nginx 静态托管 / GitHub Pages

四、快速上手（5分钟跑通）

方式1：Docker（最推荐，适合NAS/服务器/公司内网）

# 拉取社区维护的活跃镜像（原作者或社区常用）dockerpull fooololo/log-lottery:latest# 快速运行dockerrun-d\--namelog-lottery\-p9279:80\fooololo/log-lottery:latest# 访问：http://你的IP:9279/log-lottery/

或使用docker-compose.yml（更方便持久化）：

version:'3.8'services:lottery:image:fooololo/log-lottery:latestcontainer_name:log-lotteryrestart:unless-stoppedports:-"6719:80"# 或你想要的端口# volumes: # 如需持久化数据可打开# - ./data:/app/data

方式2：本地开发/调试（适合想改代码的人）

gitclone https://github.com/LOG1997/log-lottery.gitcdlog-lotterypnpminstall# 推荐 pnpm，也可用 npm/yarnpnpmdev# 启动开发模式 http://localhost:5173/

打包静态文件：

pnpmbuild# dist 目录即可部署到 Nginx / GitHub Pages

注意：首次使用建议用最新版 Chrome/Edge（PC端最佳），手机端仅适合控制，不推荐投屏主界面。

五、标准使用流程

1. 打开页面 → 右上角「设置」进入配置
2. 奖项配置→ 添加奖品（名称、数量、图片、参与规则）
3. 人员管理→ 下载模板 → 填姓名 → 导入 Excel
4. 界面配置→ 修改标题、颜色、背景图、布局列数等
5. 图片/音乐管理→ 上传自定义背景/Logo/音乐（自动存 IndexedDB）
6. 返回首页 → 选择当前奖项 → 「开始抽奖」
7. 抽奖中可暂停/重新抽 → 确认中奖后人员自动移除（避免重复）
8. 抽完 → 右上角导出 Excel 结果

小技巧：如果图片/音乐加载异常 → 全局配置 → 「重置所有数据」 → 刷新页面。

六、典型案例 & 代码片段

案例：300–500人公司年会

奖项示例：

• 一等奖：iPhone / iPad × 1–3
• 二等奖：智能手表 / 耳机 × 5–10
• 参与奖：红包/积分 × 剩余

操作建议：

• 提前1–2天导入名单 + 测试抽奖动画
• 当天接投影/大屏 + 外接音箱播放背景音乐
• 主持人/工作人员操作键盘/鼠标控制开始/停止

核心代码片段解读（3D球体生成简化版，stores/lottery.js）

import*asTHREEfrom'three'import{defineStore}from'pinia'exportconstuseLotteryStore=defineStore('lottery',{state:()=>({scene:null,camera:null,renderer:null,particles:[]// 姓名文本精灵数组}),actions:{init3D(container){this.scene=newTHREE.Scene()this.camera=newTHREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,2000)this.renderer=newTHREE.WebGLRenderer({antialias:true})// ... 添加光源、轨道控制器等container.appendChild(this.renderer.domElement)},createNameParticles(names,radius=800){this.particles.forEach(p=>this.scene.remove(p))this.particles=[]names.forEach((name,i)=>{constsprite=this.createTextSprite(name)// 生成2D文字纹理 → Sprite// 黄金分割角均匀分布在球面上consttheta=Math.acos(2*(i+0.5)/names.length-1)constphi=i*Math.PI*(1+Math.sqrt(5))sprite.position.set(radius*Math.sin(theta)*Math.cos(phi),radius*Math.sin(theta)*Math.sin(phi),radius*Math.cos(theta))this.particles.push(sprite)this.scene.add(sprite)})},// ... 旋转动画、停止聚焦中奖者等方法使用 GSAP 或 RAF 实现}})

七、常见问题 & 优化建议

这份教程基于 2025 年 12 月最新版本整理，希望能帮你在 2026 年年会/活动中快速用上最酷炫的 3D 抽奖！