年會(huì)快到了,教你3分鐘搞一個(gè)大氣的3D抽獎(jiǎng)!

前言?網(wǎng)上大佬又雙叒開源了一個(gè)抽獎(jiǎng)項(xiàng)目，動(dòng)動(dòng)手指就可以看到效果，特分享安利一波 ~

I、先看效果

5倍速度播放：

II、3分鐘搞定

1、安裝Node.js

下載并安裝即可。

Windows X64下載地址：https://nodejs.org/download/release/v10.15.3/node-v10.15.3-x64.msi

注意：在Windows上安裝時(shí)務(wù)必選擇全部組件，包括勾選Add to Path。

2、程序下載

下載地址：https://gitee.com/neequ_admin/lottery/repository/archive/master.zip

3、解壓，并錄入員工

?在這個(gè)Excel表格：lottery/product/src/data/user.xlsx，錄入你們公司的員工信息?在這個(gè)配置文件：lottery/server/config.js，錄入獎(jiǎng)品信息

4、啟動(dòng)抽獎(jiǎng)程序

在當(dāng)前目錄打開cmd命令行，執(zhí)行：

cd lottery
/**安裝插件**/cd servernpm install
/**安裝插件**/cd ../productnpm?config?set sass_binary_site=https://npm.taobao.org/mirrors/node-sassnpm install
/**打包**/npm startcd dist
/**運(yùn)行**/node ../../server/index.js 80

瀏覽器輸入：http://127.0.0.1/?即可看到上面動(dòng)圖效果。

III、別人咋訪問

很顯然，上面的地址只有我們的本地電腦才能訪問。

那么，如何讓年會(huì)的電腦能通過瀏覽器訪問呢？？

這里就需要使用到內(nèi)網(wǎng)穿透！

什么是內(nèi)網(wǎng)穿透這里就不贅述，感興趣的小伙伴可以百度下

上期文章我們有說到uTools這款工具，哎，剛好它就有內(nèi)網(wǎng)穿透功能?。?！

不清楚uTools是什么的小伙伴，可以看下之前的文章：【福利分享·229個(gè)工具】uTools：生命有限，給咱生活提個(gè)速?。?！

通過上面的地址，任意可以上網(wǎng)的電腦就都可以訪問到你的抽獎(jiǎng)?wù)军c(diǎn)啦 ?。?！

IV、附錄

使用技術(shù)

?Node?+?Express?+?Three.js?后臺(tái)通過Express實(shí)現(xiàn)?前端通過Three.js實(shí)現(xiàn)3D抽獎(jiǎng)球

功能描述

?可將抽獎(jiǎng)結(jié)果進(jìn)行保存實(shí)時(shí)下載到excel中?已抽取人員不在參與抽取，抽中的人員不在現(xiàn)場(chǎng)可以重新抽取?刷新或者關(guān)掉服務(wù)器，會(huì)保存當(dāng)前已抽取的數(shù)據(jù)，不會(huì)進(jìn)行數(shù)據(jù)重置，只有點(diǎn)擊界面上的重置按鈕，才能重置抽獎(jiǎng)數(shù)據(jù)?每次抽取的獎(jiǎng)品數(shù)目可配置?抽取完所有獎(jiǎng)品后還可以繼續(xù)抽取特別獎(jiǎng)(例如：現(xiàn)在抽取紅包，追加的獎(jiǎng)品等)，此時(shí)默認(rèn)一次抽取一個(gè)

源碼地址

https://gitee.com/neequ_admin/lottery

? 如果喜歡本文，請(qǐng)關(guān)注公眾號(hào)：開猿筆記，里面會(huì)有持續(xù)更新噢！