构建基于 Web 的 3D 虚拟宠物互动平台,支持用户饲养、定制、实时交互宠物,结合商城与社交功能提升沉浸感。
时序图

er图

功能需求:
| 模块 | 子功能 | 说明 |
|---|---|---|
| 用户管理 | 注册 / 登录 | Spring Security + JWT,支持邮箱 / 手机号注册 |
| 个人信息管理 | 昵称、头像、宠物收藏列表、积分余额 | |
| 积分系统 | 互动行为(喂食、抚摸)生成积分,用于商城兑换 | |
| 宠物管理 | 宠物创建 | 选择品种(猫 / 狗 / 自定义)、定制外观(颜色、体型) |
| 状态管理 | 饱食度(喂食)、快乐度(互动)、能量值(休息),自动衰减 + 手动恢复 | |
| 自定义功能 | 换装(衣服、饰品)、颜色调整、配件添加 | |
| 3D 交互 | 3D 渲染 | Three.js/Babylon.js 加载宠物模型,支持旋转、缩放 |
| 交互动作 | 点击抚摸(触发撒娇动画)、拖拽玩耍(触发追逐动画)、语音指令(待 AI 扩展) | |
| WebSocket 实时同步 | 宠物状态变更实时推送给前端,多端状态一致 | |
| 商城系统 | 道具购买 | 积分 / 现金支付,支持皮肤、食物、玩具等道具 |
| 限时活动 | 定时折扣、节日限定皮肤,后台配置活动规则 | |
| 后台管理 | 宠物种类管理 | 增删改宠物模型、属性、初始状态 |
| 用户数据统计 | 注册量、活跃用户、积分消耗分析 | |
| 系统通知 | 活动公告、道具到期提醒,通过 WebSocket 推送 |
技术方案:
| 层面 | 技术选型 | 说明 |
|---|---|---|
| 后端 | Spring Boot + MySQL + Redis | MySQL 存储用户 / 宠物数据,Redis 缓存高频访问(如宠物状态) |
| WebSocket (Spring WebFlux) | 实时交互消息推送 | |
| 前端 | React + Three.js | 组件化开发 + 3D 模型渲染 |
| 通信 | REST API + WebSocket | REST 处理非实时请求,WebSocket 处理实时交互 |
| 部署 | Docker + Nginx + OSS | 前后端分离部署,静态资源(模型 / 图片)存储于 OSS |
项目dfd

项目类图

项目用例图
有意思的来了,在使用vue时,在vite.config.ts这个文件里会出现报错,

但是实际上,这一部分是用于解决 __dirname 在 ES 模块 (type: "module") 中不可用的问题:
关于jwt配置的作用以及如何使用:
`jwt:
secret: your-256-bit-secret-key-here
expiration: 86400000 # 24 hours in milliseconds`
secret(密钥):用来加密和验证 Token 的 密钥,防止 Token 伪造(就像是俱乐部的验票机)。
expiration(过期时间):Token 多久后失效(这里是 86400000 毫秒,即 24 小时)。
用户登录成功后后端生成一个jwt token
然后前端携带token请求
GET /api/user
Authorization: Bearer your-jwt-token-here
接着服务器收到请求,解析token获取用户信息
最后在用户发出请求时验证token是否正确。