我用 Vue3 + Fastify + Prisma 做了个 3D 抽奖舞台：Lucky Sphere 开奖 + 朋友圈红包（含免费部署踩坑）
先放链接（演示 & 源码）
- 在线体验（演示站）：lucky-sphere-lottery-aiw.pages.dev/
- 源码仓库：github.com/jokxing/luc…
- 联系我：
64809547@qq.com（39 托管 / 69 部署支持）
说明：演示站使用免费部署，可能冷启动；数据不承诺长期保存。需要稳定版可自行部署或联系我。
2 分钟快速体验（推荐从朋友圈玩法开始）
- 打开演示站首页（默认托管模式）：lucky-sphere-lottery-aiw.pages.dev/
- 创建一个“朋友圈红包”房间，会得到：
- 参与链接（房间链接）
- 6 位口令
- 用无痕窗口打开参与链接，输入口令 + 昵称，点“进入房间”体验开奖与榜单
我自己的管理员入口：
/?admin=1（恢复全功能入口，仅自己用；避免对外暴露管理端/年会抽奖入口）。
背景：我想解决什么问题？
春节/年会场景里，“线上抽奖”通常有两个痛点：
- 结果页太干：开奖没有仪式感
- 传播链路不顺：链接怎么发、怎么隔离、怎么防止乱刷
所以我把项目做成两条线：
- 年会抽奖（管理端控制）：活动/奖项/名单/抽奖/结果可见性
- 朋友圈红包（C 端）：6 位口令入房，人人抽一次，有榜单
技术选型（尽量快、尽量稳）
- 前端：Vue 3 + Vite + TypeScript
- 3D：Three.js（Lucky Sphere + 开奖卡 + 彩纸）
- 后端：Fastify + TypeScript
- DB：Prisma + SQLite（先跑通体验，后续可换 Postgres）
- 单仓：pnpm workspace（前后端同仓，部署/迭代更顺）
3D Lucky Sphere 舞台：怎么做“像抽奖”？
我把体验拆成三段，让用户“看着就想点”：
1）抽奖前：球面铺满卡片
人数少时，如果球很空会显得很“demo”。我做了“装饰卡”补位：
- 真实参与者：显示昵称
- 装饰卡：不显示昵称（只参与视觉，不参与抽奖）
2）抽奖中：旋转加速 + 名字 ticker
- 球体旋转加速（氛围）
- 名字 ticker 快速滚动（氛围）
- 最终开奖结果以后端为准（避免“纯前端抽奖”争议）
3）开奖瞬间：中奖卡居中弹出 + 彩纸爆炸
- 中奖卡片居中弹出（带“恭喜中奖”）
- 彩纸从卡片背后爆炸，并自然下落（而不是“圆点闪烁”）
实现要点（复盘版先讲思路，不贴长代码）：
- 卡片贴图：
CanvasTexture动态生成金红主题卡面（昵称、福字印章） - 对焦赢家：四元数插值（slerp）让球回正并聚焦到中奖卡
- 彩纸粒子：速度/重力/阻尼/寿命，做出“爆炸后飘落”的感觉
权限与隔离：让“托管模式”可用
我现在优先做“朋友圈托管版”（别人不部署，直接用我的线上部署）：
- 房间隔离：每个房间
roomId + 6 位口令 - 进入/领取/榜单：都需要口令校验
- 同设备限领一次：避免重复领取
- 轻量防刷：对创建/进入/领取/榜单做 IP 级限流（演示级，防脚本/误触）
托管模式入口策略
为了降低暴露面，我做了“托管模式”：
- 默认入口只露“朋友圈红包”
- 管理员入口我自己用：
/?admin=1（恢复全功能入口）
你可以直接试：
- 对外入口（默认托管）：lucky-sphere-lottery-aiw.pages.dev/
- 管理员入口（仅自己用）：lucky-sphere-lottery-aiw.pages.dev/?admin=1
免费部署踩坑（真实踩过）
Render（后端）
- 免费实例可能休眠，第一次请求会慢（冷启动 10~60 秒都可能）
NODE_ENV=production时注意 devDependencies（Prisma CLI）问题
Cloudflare Pages（前端）
- 构建环境通常已经有
pnpm，不要在 build command 里重复全局安装（可能触发pnpx冲突） - 前端必须配置
VITE_API_BASE指向后端域名，否则线上请求同域/api会 405/404
现在能用到什么程度？
- 朋友圈玩法：创建房间 -> 发链接和口令 -> 朋友进入领取 -> 看榜单
- 年会抽奖：管理端建活动、导入名单、进 3D 舞台抽奖、结果页可控
常见问题（我先替你踩坑）
1）为什么第一次打开很慢？
演示站使用免费部署，后端可能休眠，第一次访问会触发冷启动；再刷新/稍等通常就好。
2）数据会一直保存吗？
不承诺。SQLite + 免费平台更适合演示/短期活动；想长期运营建议换 Postgres，并做备份/监控。
3）别人能猜到管理端入口吗？
托管模式下我把对外入口简化为朋友圈玩法；管理端只留给自己：/?admin=1。
最后：如果你想快速用起来
- 托管版（直接用我部署跑）：39 起
- 远程部署/排障支持（部署到你账号）：69 起
联系邮箱：64809547@qq.com
