Create Stunning 3D Lottery Draws with Vue 3 & Three.js – Quick Start Guide

Overview

In fast‑paced workplaces, traditional paper draws are being replaced by digital lottery tools. The open‑source project log‑lottery is a 3D dynamic lottery application built with Vue 3 and Three.js, designed for events such as annual meetings.

Configuration

Participant setup : download the Excel template from the participant‑management page, fill it out and import.

Prize setup : add prizes in the prize‑management page, customize name, number of winners, participation rules and images.

Interface setup : customize title, column count, card colors, homepage graphics, etc.

Media management : upload images or music; data are stored locally with IndexedDB.

Core Features

3D dynamic lottery sphere : rendered with Three.js, supports particle animation and custom shapes.

Participant management : import participants via Excel, add temporary entries, export results.

Prize configuration : define prize name, winner count, rules, and upload images; supports multi‑level awards.

Interface personalization : adjust titles, layout, colors, and background images for themed events.

Media resource handling : IndexedDB stores images and music locally; custom BGM plays during draws.

Extras : temporary draw mode, future plans for chat barrage and i18n; Docker deployment available.

Tech Stack

The application uses Vue 3 for component‑based development, Three.js for 3D rendering, Pinia for state management, and DaisyUI for UI components. IndexedDB provides offline storage. Vite is the build tool, producing a single HTML file for production.

Browser compatibility requires the latest Chrome or Edge on desktop; mobile support is not yet optimized.

Preview

Quick Start (5‑minute setup)

Clone the repository:

git clone https://github.com/LOG1997/log-lottery.git
cd log-lottery

Install dependencies: pnpm install Run in development mode: pnpm dev Open http://localhost:5173, import the participant list, configure prizes, and start testing.

To deploy, build the project and serve the dist folder with Nginx, GitHub Pages, or Docker:

docker build -t log-lottery .
docker run -d -p 9279:80 log-lottery

Visit http://localhost:9279/log-lottery to see the live demo. If data become corrupted, use the Global > Interface > Reset option to clear IndexedDB.