⭐⭐⭐ Spring Boot 项目实战 ⭐⭐⭐ Spring Cloud 项目实战
《Dubbo 实现原理与源码解析 —— 精品合集》 《Netty 实现原理与源码解析 —— 精品合集》
《Spring 实现原理与源码解析 —— 精品合集》 《MyBatis 实现原理与源码解析 —— 精品合集》
《Spring MVC 实现原理与源码解析 —— 精品合集》 《数据库实体设计合集》
《Spring Boot 实现原理与源码解析 —— 精品合集》 《Java 面试题 + Java 学习指南》

摘要: 原创出处 极客之家 「丛林」欢迎转载,保留摘要,谢谢!


🙂🙂🙂关注微信公众号:【芋道源码】有福利:

  1. RocketMQ / MyCAT / Sharding-JDBC 所有源码分析文章列表
  2. RocketMQ / MyCAT / Sharding-JDBC 中文注释源码 GitHub 地址
  3. 您对于源码的疑问每条留言都将得到认真回复。甚至不知道如何读源码也可以请教噢。
  4. 新的源码解析文章实时收到通知。每周更新一篇左右。
  5. 认真的源码交流微信群。

又快到年底了,年会抽奖总是缺少一个炫酷的抽奖系统?今天给大家推荐一款基于Three.js和Vue3开发的3D球体动态抽奖应用,支持一键部署、高度定制化,非常优秀!

简介

log-lottery是一个可配置可定制化的抽奖应用,炫酷3D球体,可用于年会抽奖等活动,支持奖品、人员、界面、图片音乐配置。

想象一下这样的场景:一个大屏幕上,一个精美的3D球体在不断旋转,球面上展示着参与者的名字,当抽当抽奖开始时,名字高速滚动最终慢慢停在获奖人姓名上……这样的抽奖环节,不仅能点燃现场气氛,还能让每位参与者感受到科技的魅力。

核心特征

炫酷的3D球体效果

log-lottery与传统抽奖软件最大的区别在于其引人注目的3D球体抽奖界面。它利用Three.js的强大能力,创造了令人惊叹的视觉体验,让抽奖过程不再是简单的随机挑选,而是变成一场视觉盛宴。

高度可定制化

这款抽奖应用提供了极其丰富的定制选项:

  • 奖品配置: 灵活添加和设置各个奖项的名称、抽取人数、是否全员参与以及显示的图片
  • 人员管理: 支持Excel模板导入参与者信息,大大简化了大量人员的录入过程
  • 界面个性化: 可自定义标题、列数、卡片颜色、首页图案等
  • 背景音乐与图片: 支持上传自定义背景图片和音乐,营造贴合活动主题的氛围

数据本地化存储

采用IndexedDB技术,所有数据(包括配置、人员信息和抽奖结果)都存储在浏览器本地,既保证了数据安全,又减少了对服务器的依赖。

跨平台兼容性

项目使用PC端最新版Chrome或Edge浏览器可以获得最佳体验。

部署使用

本地部署

如果你希望在本地环境运行log-lottery,只需几步简单操作:

  • 克隆项目
git clone https://github.com/LOG1997/log-lottery.git
  • 安装依赖
pnpm i  # 或者 npm install
  • 开发运行
pnpm dev  # 或者 npm run dev
  • 构建生产版本
pnpm build  # 或者 npm run build

如果想要直接通过HTML文件运行,可以使用特殊构建命令:

pnpm build:file

然后在生成的dist目录中直接打开index.html即可。

基本使用流程

  • 配置参与人员: 在人员配置管理界面下载Excel模板,填写数据后导入
  • 设置奖项: 在奖项配置界面添加奖项,定义名称、抽取人数和相关图片
  • 调整界面: 根据活动主题定制界面颜色、标题等视觉元素
  • 上传素材: 根据需要上传背景图片和音乐
  • 开始抽奖: 进入抽奖界面,点击开始,享受震撼的3D抽奖过程

界面预览

首页

home

home_prize_list

抽奖

lottery

lottery_done

配置

config_person_all

config_prize_list

config_view

config_pattern

图片音乐配置

config_img

music

开源地址

https://github.com/LOG1997/log-lottery

文章目录
  1. 1. 简介
  2. 2. 核心特征
    1. 2.1. 炫酷的3D球体效果
    2. 2.2. 高度可定制化
    3. 2.3. 数据本地化存储
    4. 2.4. 跨平台兼容性
  3. 3. 部署使用
    1. 3.1. 本地部署
    2. 3.2. 基本使用流程
  4. 4. 界面预览
  5. 5. 开源地址