moshang-xc / Lottery
🎉🌟✨🎈年会抽奖程序,基于 Express + Three.js的 3D 球体抽奖程序,奖品🧧🎁,文字,图片,抽奖规则均可配置,😜抽奖人员信息Excel一键导入😍,抽奖结果Excel导出😎,给你的抽奖活动带来全新酷炫体验🚀🚀🚀
Stars: ✭ 363
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
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
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
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 示例
功能描述:
- 可将抽奖结果进行保存实时下载到 excel 中🎉
- 已抽取人员不在参与抽取,抽中的人员不在现场可以重新抽取🎁
- 刷新或者关掉服务器,会保存当前已抽取的数据,不会进行数据重置,只有点击界面上的重置按钮,才能重置抽奖数据🧧
- 每次抽取的奖品数目可配置🎈
- 抽取完所有奖品后还可以继续抽取特别奖(例如:现在抽取红包,追加的奖品等),此时默认一次抽取一个🧨
预览
安装
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
- product 为前端页面目录
- package.josn web 项目配置文件
- webpack.config.js 打包配置文件
- server 为服务器目录
- 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].