


>文章简介：年关将至，年会抽奖如何玩出新意？log-lottery 开源项目将传统抽奖升级为炫酷的3D球体视觉盛宴，更是一款融合 Vue3、Three.js、IndexedDB 等前沿技术的完整学习案例。它不仅支持奖品人员管理、界面定制与音乐配置，还提供在线体验、本地部署与 Docker 容器化等多种使用方式。无论是打造现场亮点，还是深入学习现代前端工程实践，这个项目都能为你带来惊喜与收获。


年关将至，各家公司已陆续开始筹备年会。活动现场灯火璀璨，无论是庆典还是其他聚会，抽奖环节往往是最令人心动的亮点。然而，若只是简单地搬出一个抽奖箱随手抽取，尤其是对于软件公司而言——是否显得不高大上呢？


但你有没有想过，一个看似简单的抽奖系统背后，其实可以承载丰富的前端开发技术与工程实践？今天我要向大家介绍的 log-lottery，正是这样一个将趣味性与技术深度巧妙融合的开源项目。它不仅拥有引人注目的 3D 视觉效果，更堪称现代前端技术栈的完整示范案例。

![](https://developer.qcloudimg.com/http-save/yehe-9735680/8405fecdd2c99b49b1c056b7976d3c3c.png)




## 🎉 什么 log-lottery？

log-lottery是一个可配置可定制化的抽奖应用，炫酷3D球体，可用于年会抽奖等活动，支持奖品、人员、界面、图片音乐配置。log-lottery 最吸引人的特点无疑是其华丽的3D球体抽奖界面。当参与者名单以3D球体形式旋转、跳动时，那种视觉冲击力是传统抽奖系统无法比拟的。无论是在公司年会、校园活动还是其他庆祝场合，这个功能都能瞬间点燃现场气氛。



但 log-lottery 的魅力远不止于此。它更是一个精心设计的**学习项目**，展示了如何将多种现代前端技术有机结合，构建一个功能完整、体验优秀的Web应用。

**项目地址**：[https://github.com/LOG1997/log-lottery  ](https://github.com/LOG1997/log-lottery  )

**在线体验**：[https://lottery.to2026.xyz/log-lottery ](https://lottery.to2026.xyz/log-lottery ) 

该项目目前再github上已有 **3k**⭐️ star


![](https://developer.qcloudimg.com/http-save/yehe-9735680/e70ba14796d35a59ec111d8bc09c08b7.png)





## 🛠️ 技术栈亮点

log-lottery 采用了当前前端开发的主流技术栈：

- **Vue3** - 最新版的Vue框架，展示组合式API的最佳实践
- **Three.js** - 业界领先的3D图形库，实现惊艳的视觉效果
- **IndexedDB** - 浏览器本地数据库，实现数据的持久化存储
- **Pinia** - Vue的现代状态管理库
- **DaisyUI** - Tailwind CSS组件库，提供美观的UI基础

这个技术组合非常实用，是学习者了解现代Web开发架构的绝佳项目。


## 🔧 快速开始

### 🌐在线体验

直接访问官方提供的两个地址之一即可体验：

- https://lottery.to2026.xyz/log-lottery
- https://log1997.github.io/log-lottery/

###  🖥️本地开发

```bash
# 克隆项目
git clone https://github.com/LOG1997/log-lottery.git

# 安装依赖
pnpm i   或 npm install

# 启动开发服务器
pnpm dev   或 npm run dev

# 打包
pnpm build 或 npm run build
```

### 🐳Docker部署

- Docker run 运行

拉取镜像，从Docker Hub拉取镜像log-lottery
```bash
docker pull log1997/log-lottery:latest
```
运行容器
```
docker run -d --name log-lottery -p 9279:80 log1997/log-lottery:latest
```

- docker-compose 运行

创建docker-compose.yml文件

```yaml
services:
  log-lottery:
    image: log1997/log-lottery:latest
    container_name: log-lottery
    ports:
      - "9279:80"
    restart: unless-stopped

```

在docker-compose.yml 同级目录下运行以下命令启动

```bash
docker-compose up -d 
```


启动之后访问 http://localhost:9279/log-lottery/ 即可使用。


![df6cf7cecb81ee905c15ee1473607f62.png](https://developer.qcloudimg.com/http-save/yehe-9735680/ccfd1972e471633c1394d04e2407fd7c.png)


![](https://developer.qcloudimg.com/http-save/yehe-9735680/810e3407d9948bbe1ccceb9375d270ac.png)


![](https://developer.qcloudimg.com/http-save/yehe-9735680/7d185d4c78e7c34fdd7245a785d28983.png)


![](https://developer.qcloudimg.com/http-save/yehe-9735680/6dcd2447df4bc5b6be0bef6599be7037.png)

![](https://developer.qcloudimg.com/http-save/yehe-9735680/c840a67ab394edbaeeeb7132d8bd68bb.png)

![](https://developer.qcloudimg.com/http-save/yehe-9735680/7c4ce034b9e3f7101a78e2473072bd77.png)


![](https://developer.qcloudimg.com/http-save/yehe-9735680/a34b1bd29e6265336bbb9cc434e1d944.png)



## 📋 功能丰富且实用

### 1. 🧑‍🤝‍🧑完整的人员与奖品管理
- 通过Excel模板导入参与人员名单
- 自定义奖项设置（名称、人数、参与范围等）
- 抽奖结果导出到Excel，方便后续处理

### 2. 🎨高度可定制化界面
- 自定义标题、列数、卡片颜色
- 更换背景图片和首页图案
- 支持背景音乐上传和播放

### 3. 🚢多种部署方式
- **在线访问**：直接通过提供的链接使用
- **Docker部署**：一键容器化部署
- **本地安装包**：Windows平台可直接安装使用




## 🚀 学习价值

对于开发者来说，log-lottery 提供了多个学习维度：

### 1. 🎮3D Web应用开发
通过 Three.js 与 Vue3 的集成，你可以学习如何在Web应用中添加3D元素，这对于游戏开发、数据可视化等领域都有重要参考价值。

### 2. 💾本地数据持久化
项目使用 IndexedDB 存储配置和媒体文件，展示了如何在浏览器端实现复杂的数据管理，这对于离线应用和PWA开发非常有帮助。

### 3.🛠️ 完整的前端工程化实践
从开发、构建到部署，项目展示了完整的开发流程。特别是Docker支持，让你了解如何将前端应用容器化。



## 🌟结语

Log-Lottery 展示了一个看似简单的应用背后所蕴含的丰富技术内涵。它不仅是活跃年会气氛的实用工具，更是一件精心打磨的技术作品，一个极具学习价值的开源项目。

作为使用者，你可以：

- 获得一个免费、强大且高度可定制的抽奖系统
- 支持本地部署，确保活动数据完全自主可控
- 通过丰富的配置选项，灵活适应不同活动场景

作为学习者，你将能够：

- 深入剖析一个生产环境级的 Three.js 完整应用案例
- 掌握 IndexedDB 在前端复杂场景中的实战使用方法
- 理解基于 Vue 3 的现代化前端项目架构设计


无论你是为了下一次公司年会准备一个惊艳全场的抽奖环节，还是希望进一步提升个人前端技术实力，Log-Lottery 都是一个值得你投入时间深入探索的优秀项目。

![7aaa75f53b5e4e3b23df162c90de4372.png](https://developer.qcloudimg.com/http-save/yehe-9735680/bd648f45e06695451084e5afcfecaebb.png)

文章简介：年关将至，年会抽奖如何玩出新意？log-lottery 开源项目将传统抽奖升级为炫酷的3D球体视觉盛宴，更是一款融合 Vue3、Three.js、IndexedDB 等前沿技术的完整学习案例。它不仅支持奖品人员管理、界面定制与音乐配置，还提供在线体验、本地部署与 Docker 容器化等多种使用方式。无论是打造现场亮点，还是深入学习现代前端工程实践，这个项目都能为你带来惊喜与收获。

log-lottery：不只是炫酷的3D抽奖，更是学习前端开发的最佳实践

年关将至，年会抽奖如何玩出新意？log-lottery 开源项目将传统抽奖升级为炫酷的3D球体视觉盛宴，更是一款融合 Vue3、Three.js、IndexedDB 等前沿技术的完整学习案例。它不仅支持奖品人员管理、界面定制与音乐配置，还提供在线体验、本地部署与 Docker 容器化等多种使用方式。无论是打造现场亮点，还是深入学习现代前端工程实践，这个项目都能为你带来惊喜与收获。

前端

开发工具

客户端

log-lottery开源项目打造炫酷3D年会抽奖系统，基于Vue3+Three.js技术栈，支持奖品管理、界面定制与音乐配置。提供在线体验、本地部署与Docker容器化方案，既是惊艳的活动亮点，也是学习现代前端开发的完整案例。开源免费，助力企业年会升级科技感！

数据可视化

数据管理

游戏开发

数据库

服务器

Windows

容器

Docker

2026新春采购季

tencentdb-catalog

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

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

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

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

log-lottery：不只是炫酷的3D抽奖，更是学习前端开发的最佳实践-腾讯云开发者社区-腾讯云

log-lottery：不只是炫酷的3D抽奖，更是学习前端开发的最佳实践

log-lottery：不只是炫酷的3D抽奖，更是学习前端开发的最佳实践

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐