玄玑洞府 · 国风3D个人主页系统【开源】
东方水墨基底 + 低多边形科技风格个人主页 前端3D沉浸式洞府游历 + Ant Design水墨修仙风可视化后台,内容与展示完全分离
✨ 前端 3D 主页
场景构成(6大场景)
山门候客(加载页)→ 洞府前厅 → 筑基概况 / 修行履历 / 丹器馆藏 / 传讯玉符
镜头系统
GSAP插值动画(power2.inOut,时长1.2s)
前厅待机公转,周期20s,±15°旋转
鼠标跟随画面偏移;转场过程锁定交互,防止误操作
虚拟人物形象
模型来源:Tripo生成GLB开源人物模型(少年男性)
自研减面压缩:原43MB / 149万三角面 → 压缩至3.14MB / 11万三角面
渲染色调:生宣暖白,融合青绿水彩国风
动作:待机呼吸、轻微摆动;鼠标悬停放大;点击抱拳行礼+随机问候语
场景交互
玉简:悬停展开效果
灵脉节点:悬停涟漪特效,点击展开详情
法宝:支持拖拽360°环绕查看,分类高亮
传讯玉符:点击复制文本 / 跳转链接
彩蛋功能
修为值(浏览量累积自动进阶)、灵签抽签、昼夜场景自动轮转
全局功能
御剑归宗、精简模式、移动端底部导航、篆文样式加载进度条、弱网提示
降级兼容
WebGL2.0检测失败时,自动切换2D水墨备用主页,内容保持完全一致
贴图渲染
全部贴图由Canvas2D程序化实时生成(八卦纹、玉简篆文、匾额、卷轴、光晕、水墨噪声),不依赖静态图片资源;石壁卷轴支持竖排古文实时排版(从右往左,支持落款印章)
🧙 管理后台(Ant Design水墨修仙风格)
登录禁制:账号登录验证
仪表盘:4项概览卡片 + 近7日访问折线图 + 技术栈占比饼图 + 操作日志 + 品鉴排行 + 快捷功能入口
筑基档案:基础信息、功法配置(炼气/筑基/金丹段位)、道心描述、立绘上传、粒子强度、自定义问候语池
修行履历:拖拽排序、置顶、批量上下架、批量删除;内置Markdown编辑器(实时预览)
丹器馆藏:按分类/品阶/状态筛选;一键导入GitHub项目;标签、封面上传、Markdown简介、拖拽排序
传讯玉符:4种内置类型,自定义图标、排序、显示隐藏、拖拽排序
洞府禁制(系统设置)
基础设置:站点名称/副标题/加载文案/欢迎语/彩蛋开关
外观设置:主题色、水墨浓度、粒子强度、昼夜模式、人物模型替换、姿势朝向
账号设置:修改密码、JWT有效期、登录日志
主题细节优化
消息提示桥接admin/src/utils/message.ts,解决静态message无法适配暗色主题
所有页面表单挂载时绑定表单实例;Tabs页签开启forceRender;加载状态使用Spin遮罩,不用提前return阻断渲染






主题授权提示:请在后台主题设置-主题授权-激活主题的正版授权,授权购买:RiTheme官网
