今天无意间发现了一个超级好玩抽奖工具，支持设置奖品信息以及参与抽奖人员信息，同时还支持把抽奖结果导出。最妙的是界面展示非常酷炫，呈现一个3D球体效果。

安装和启动方法也非常简单，几行命令就可以搞定，命令如下：

git clone https://github.com/moshang-xc/lottery.git

cd lottery

# 服务端插件安装
cd server
npm install

# 前端插件安装
cd ../product
npm install

# 打包
npm run build

# 运行
npm run serve

# 开发调试
npm run dev

Lottery
├── product
│   ├── src
│   │   ├── lottery
│   │   │   └── index.js
│   │   ├── lib
│   │   ├── img
│   │   ├── css
│   │   └── data
│   ├── package.json
│   └── webpack.config.js
├── server
│   ├── config.js
│   ├── server.js
│   └── package.js


用户发起一次抽奖请求时，系统内部各组件的交互过程如下图所示：

用户在前端界面触发抽奖时，前端通过 API 调用将抽奖请求发送至后端 Express 服务器。然后，后端调用 LotteryService 处理抽奖核心逻辑，LotteryService 执行关键步骤：验证用户是否可参与（如是否已中奖），根据配置（EACH_COUNT）和奖品库存随机选出获奖者，同时更新奖品数量，并保存中奖记录以确保数据持久化。之后，中奖结果沿原路返回至前端，前端利用 Three.js 渲染 3D 抽奖动画，最终向用户展示中奖信息。

error:0308010C:digital envelope routines::unsupported

# 在你的 macOS 系统上，在终端执行命令：
export NODE_OPTIONS=--openssl-legacy-provider

# 然后重新运行 
npm run build

# 在 package.json 的 scripts 字段中，为 build 命令添加环境变量：
"build": "export NODE_OPTIONS=--openssl-legacy-provider && webpack --mode=production --progress --colors"

安装并使用 Node.js v16（一个使用 OpenSSL 1.1.x 的长期支持版）：
1. 安装 nvm。
2. 运行 nvm install 16.20.2（或其它v16版本）。
3. 运行 nvm use 16.20.2 切换版本。

将 Webpack 升级到 v5 或更高版本，这些版本已兼容 OpenSSL 3.0。通常需要同时升级 Vue CLI、vue-loader 等相关依赖。

发现一个超好玩的开源项目：3D抽奖工具

流媒体音视频研发

前端

编程语言

一款功能强大的3D抽奖工具，支持自定义奖品和参与者信息，提供酷炫的3D球体动画效果。简单几行命令即可安装运行，包含完整的前后端架构。文章详细介绍了系统架构、安装步骤、目录结构及常见报错解决方案，是举办线上抽奖活动的理想选择。

文件系统

服务器

4核4G3M云服务器 新用户低至38元/年！

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

发现一个超好玩的开源项目：3D抽奖工具

发现一个超好玩的开源项目：3D抽奖工具

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐