如何快速搭建超酷炫的3D球体年会抽奖程序：2025完整配置指南 🎉
项目地址: https://gitcode.com/gh_mirrors/lo/lottery 年会抽奖还在用传统PPT滚动？试试这款基于Express+Three.js开发的3D球体抽奖程序！它能让你的年会抽奖环节瞬间科技感拉满，支持自定义奖品、一键导入参与者信息，还能导出抽奖结果Excel，绝对是企业年会的吸睛神器！
📌 项目核心功能亮点
这款抽奖程序凭借以下特性成为年会必备工具：
- 沉浸式3D视觉体验：采用Three.js打造动态旋转球体，抽奖过程如同星球探索般震撼
- 全自定义配置：奖品类型、数量、图片随心换，满足不同场景需求
- 高效数据管理：支持Excel导入参与者信息，自动生成抽奖名单
- 即开即用：简单几步即可部署，无需复杂编程知识
图：3D球体抽奖程序展示效果（Mac Pro奖品展示）
📂 项目结构速览
lottery/
├── product/ # 前端3D展示与交互模块
│ ├── src/
│ │ ├── img/ # 奖品图片资源库
│ │ ├── lib/ # Three.js等核心依赖库
│ │ └── lottery/ # 抽奖核心逻辑代码
└── server/ # 后端服务与数据管理
├── config.js # 奖品配置中心
└── data/ # 用户数据存储
核心功能模块路径：
- 3D渲染引擎：product/src/lib/three.min.js
- 抽奖逻辑控制：product/src/lottery/index.js
- 奖品配置文件：server/config.js
🔧 5分钟快速安装指南
1️⃣ 准备工作
确保你的系统已安装Node.js环境，然后克隆项目代码：
git clone https://gitcode.com/gh_mirrors/lo/lottery
cd lottery
2️⃣ 安装依赖
分别安装前后端依赖包：
# 安装后端服务依赖
cd server && npm install
# 安装前端构建依赖
cd ../product && npm install
3️⃣ 启动服务
# 启动后端API服务（默认端口3000）
cd server && node index.js
# 启动前端开发服务器（默认端口8080）
cd product && npm run dev
此时访问 http://localhost:8080 即可看到3D抽奖界面！✨
⚙️ 个性化配置教程
如何自定义奖品设置？
修改server/config.js文件，按照以下格式添加奖品信息：
const prizes = [
{
type: 2, // 唯一标识（从1开始）
count: 5, // 奖品数量
text: "一等奖", // 奖项等级
title: "Mac Pro", // 奖品名称
img: "../img/mbp.jpg" // 奖品图片
},
// 更多奖品...
];
支持的奖品图片格式：jpg/png，建议尺寸统一为400x300像素，图片文件请放在product/src/img目录下。
图：华为Mate30奖品配置效果预览
参与者信息导入
- 准备Excel格式的用户名单（支持.xlsx格式）
- 将文件命名为users.xlsx并放入server/data目录
- 系统会自动加载数据，无需额外配置
💡 实用功能技巧
抽奖结果导出
每次抽奖结束后，系统会自动在server/data目录生成抽奖结果Excel文件，包含获奖者信息和奖品等级，方便后续颁奖管理。
界面风格调整
修改product/src/lottery/index.css文件可自定义抽奖界面样式，包括球体颜色、旋转速度、背景效果等参数。
🎁 奖品展示效果示例
| 奖项等级 | 奖品名称 | 展示效果 |
|---|---|---|
| 特等奖 | 神秘大礼 |  |
| 一等奖 | Mac Pro | |
| 二等奖 | 华为Mate30 | |
| 三等奖 | Ipad Mini5 |  |
🚀 常见问题解决
Q: 3D球体不旋转怎么办？
A: 检查浏览器是否支持WebGL，建议使用Chrome或Edge最新版本
Q: 如何修改抽奖动画速度？
A: 编辑product/src/lottery/canvas.js文件中的rotationSpeed参数
Q: 参与者信息导入失败？
A: 确保Excel文件格式正确，第一列必须为"姓名"，第二列"工号"
通过这份指南，你已经掌握了3D球体抽奖程序的安装配置技巧！现在就用它来打造一场令人难忘的科技感年会吧！🎊
如果需要更多帮助，可以查看项目中的server/help.js文件获取详细API文档。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
