All Projects → moshang-xc → Lottery

moshang-xc / Lottery

🎉🌟✨🎈年会抽奖程序,基于 Express + Three.js的 3D 球体抽奖程序,奖品🧧🎁,文字,图片,抽奖规则均可配置,😜抽奖人员信息Excel一键导入😍,抽奖结果Excel导出😎,给你的抽奖活动带来全新酷炫体验🚀🚀🚀

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Lottery

Moonrider
🌕🏄🏿 Surf the musical road among the stars. Side project built by two people in a few months to demonstrate WebXR.
Stars: ✭ 292 (-19.56%)
Mutual labels:  threejs
Three Elements
Web Components-powered custom HTML elements for building Three.js-powered games and interactive experiences. 🎉
Stars: ✭ 331 (-8.82%)
Mutual labels:  threejs
Ideaspace
😎 Create interactive 3D and VR web experiences for desktop, mobile & VR devices
Stars: ✭ 344 (-5.23%)
Mutual labels:  threejs
Three Mesh Bvh
A BVH implementation to speed up raycasting against three.js meshes.
Stars: ✭ 302 (-16.8%)
Mutual labels:  threejs
Spoke
Easily create custom 3D environments
Stars: ✭ 321 (-11.57%)
Mutual labels:  threejs
3dtilesrendererjs
Renderer for 3D Tiles in Javascript using three.js
Stars: ✭ 333 (-8.26%)
Mutual labels:  threejs
Whitestorm Typescript Boilerplate
📦 🚀 TypeScript boilerplate for WhitestormJS using react/redux ⚛
Stars: ✭ 285 (-21.49%)
Mutual labels:  threejs
Plasio
Drag-n-drop In-browser LAS/LAZ point cloud viewer. http://plas.io
Stars: ✭ 349 (-3.86%)
Mutual labels:  threejs
Three.proton
three.proton is a magical 3d particle engine using three.js library. It is based on the Proton engine library.
Stars: ✭ 327 (-9.92%)
Mutual labels:  threejs
Graphosaurus
3D graph viewer powered by WebGL (three.js)
Stars: ✭ 340 (-6.34%)
Mutual labels:  threejs
Cga.js
CGA 3D 计算几何算法库 | 3D Compute Geometry Algorithm Library webgl three.js babylon.js等任何库都可以使用
Stars: ✭ 313 (-13.77%)
Mutual labels:  threejs
Map33.js
A JavaScript library to make 3D maps with three.js.
Stars: ✭ 317 (-12.67%)
Mutual labels:  threejs
Von Grid
Hexagonal & square tile grid system with three.js
Stars: ✭ 336 (-7.44%)
Mutual labels:  threejs
D3 Threejs
CSS 3D Transforms with D3 and THREE.js
Stars: ✭ 298 (-17.91%)
Mutual labels:  threejs
Vue Vr
A framework for building VR applications with Vue
Stars: ✭ 348 (-4.13%)
Mutual labels:  threejs
Glmaps
Data visualization examples and tutorials from scratch. 数据可视化示例代码集与新手学习教程。
Stars: ✭ 288 (-20.66%)
Mutual labels:  threejs
React Particles Webgl
🔆 A 2D/3D particle library built on React, Three.js and WebGL
Stars: ✭ 330 (-9.09%)
Mutual labels:  threejs
Three.terrain
A procedural terrain generation engine for use with the Three.js 3D graphics library for the web.
Stars: ✭ 353 (-2.75%)
Mutual labels:  threejs
Infinitetubes
A tunnel experiment in WebGL inspired by the effect seen on http://www.fornasetti.com/](Fornasetti.
Stars: ✭ 348 (-4.13%)
Mutual labels:  threejs
Three.phenomenon
⭐️ A tiny wrapper around three.js built for high-performance WebGL experiences.
Stars: ✭ 338 (-6.89%)
Mutual labels:  threejs

抽奖程序

年会抽奖程序,3D 球体抽奖,支持奖品信息配置,参与抽奖人员信息Excel导入,抽奖结果Excel导出

如果该程序对你有帮助😎😎😎,希望给个⭐star⭐喔。😘😘😘😍🥰🎉🎈🎃

github 地址: https://github.com/moshang-xc/lottery

技术

技术:Node + Express + Three.js

后台通过Express实现

前端抽奖界面通过Three.js实现 3D 抽奖球,引用了Three.js的官方 3D 示例

功能描述:

  1. 可将抽奖结果进行保存实时下载到 excel 中🎉
  2. 已抽取人员不在参与抽取,抽中的人员不在现场可以重新抽取🎁
  3. 刷新或者关掉服务器,会保存当前已抽取的数据,不会进行数据重置,只有点击界面上的重置按钮,才能重置抽奖数据🧧
  4. 每次抽取的奖品数目可配置🎈
  5. 抽取完所有奖品后还可以继续抽取特别奖(例如:现在抽取红包,追加的奖品等),此时默认一次抽取一个🧨

预览

lottery.gif

f.jpg

s.jpg

t.jpg

安装

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
  1. product 为前端页面目录
  2. package.josn web 项目配置文件
  3. webpack.config.js 打包配置文件
  4. server 为服务器目录
  5. config 为奖品信息的配置文件

配置信息

抽奖用户信息配置

抽奖用户信息在**server/data/user.xlsx**文件中,按文件格式进行填充,不能修改文件名和列头

奖品信息配置

奖品的配置信息填写在server/config.js文件中,不能修改文件名。

其中奖品 prizes 的配置描述如下:

参数 值类型 描述
type Number 奖品类型,唯一标识,0 是默认特别奖的占位符,其它奖品不可使用
count Number 奖品数量
text String 奖项名称
title String 奖品描述
img String 奖品的图片地址,图片在img目录下
// 奖品信息,第一项为预留项不可修改,其他项可根据需要修改
let prizes = [{
        type: 0,
        count: 1000,
        title: "",
        text: "特别奖"
    },
    {
        type: 1,
        count: 2,
        text: "特等奖",
        title: "神秘大礼",
        img: "../img/secrit.jpg"
    },
    {
        type: 2,
        count: 5,
        text: "一等奖",
        title: "Mac Pro",
        img: "../img/mbp.jpg"
    }
    ...
];

奖品每次抽取个数配置

EACH_COUNT用于配置每次的抽奖个数,与 prizes 奖品一一对应,例如上面的奖品配置对应的抽奖个数配置如下:

const EACH_COUNT = [1, 1, 5];

如上配置,表示一次抽取的奖品个数顺序为:特别奖每次抽一个,特等奖每次抽一个,一等奖每次抽五个

企业标识配置

该标识用于显示在抽奖卡片上。

const COMPANY = "MoShang";

License

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].