- 采用 threejs搭建整个场景（react-three-fiber）
- 支持微信扫码签到
- 数据持久化，支持页面刷新
{
"node": ">=18",
"pnpm": ">=8"
}pnpm install没有微信公众号可以用微信测试号, 使用测试号记得修改授权回调页面域名
app-server目录下新建 .env.local
# 微信公众号 APPID 和 SECRET
WECHAT_APPID = xxxx
WECHAT_SECRET = xxxxxx
app-screen目录下新建 .env.production指定生产端环境变量
# 签到端地址
VITE_SIGN_HOST = '替换成签到端地址'
VITE_API_HOST = '/lottery/lottery-api'
app-sign目录下新建.env.production指定生产端环境变量
# 微信公众号 APPID, 用于微信授权登录
VITE_WECHAT_APPID = xxxx
VITE_API_HOST = '/lottery/lottery-api'pnpm run build
pnpm run start地址
# 抽奖端
http://localhost:4000/screen/
# 签到端
http://localhost:4000/sign/
app-screen端提供了个方法，在控制台输入window.mock("活动ID", 110)即可模拟110人 点击年会签到控制台就会打印活动ID
- 到资源网（比如千库网）上找你想要的动画视频，下带 AE模板的
- 使用 AE导出 png 序列
- 根据情况压缩下图片质量，我这里用的图压，导出 webp的格式更小还支持透明通道
- 然后使用texturepacker制作精灵，导出json和图片