玄玑洞府 · 国风 3D 个人主页系统 —— 开源

以东方水墨为骨、低多边形科技为魂的个人主页系统。前端 Three.js 3D 洞府沉浸式游历 + Ant Design 水墨修仙后台可视化管理，内容与展示完全分离。支持 WebGL 降级为 2D 水墨版，贴图全 Canvas 程序化生成。

一、项目概述

玄玑洞府是一套开源的个人主页系统，创新地将东方水墨风格与现代 3D 低多边形技术融为一体。前端构建了一个修仙洞府场景，访客可以像玩游戏一样在 3D 空间中游历，浏览主页主人的个人信息、技能履历、项目作品、联系方式等。后台则是一套水墨修仙风格的 Ant Design 管理面板，实现内容管理与前端展示完全分离。

整站充满了东方玄幻色彩：修为值、灵签、昼夜轮转、御剑归宗……把传统个人主页玩出了新高度。

二、技术亮点

维度	详情
3D 引擎	Three.js / WebGL 2.0
动画	GSAP 插值动画
前端框架	React
后台 UI	Ant Design
贴图方式	Canvas 2D 程序化生成（零静态资源）
降级方案	WebGL 检测失败自动切 2D 水墨版
模型优化	自研减面管线，43MB → 3.14MB

三、前端 3D 主页 —— 六大场景

整个 3D 主页由六大场景串联，形成完整的洞府游历体验：

场景	名称	说明
🏔️	山门候客	加载过渡场景
🏯	洞府前厅	主场景，待机公转镜头
📋	筑基概况	个人基础信息展示
📜	修行履历	经历/技能/时间线
🏺	丹器馆藏	项目作品/开源项目
📡	传讯玉符	社交链接/联系方式

四、核心交互细节

🎥 镜头系统

特性	实现
转场动画	GSAP power2.inOut，1.2s 过渡
前厅待机	20s 周期公转 ±15°
鼠标跟随	镜头跟随鼠标偏移
交互保护	转场期间禁用交互

👤 虚拟形象

特性	说明
模型来源	开源人物模型（Tripo 生成 GLB）
自研优化	43MB / 149 万三角形 → 3.14MB / 11 万三角形
色调统一	「生宣暖白」融入青绿水彩风格
动画	待机呼吸、微摆、悬停放大、点击抱拳行礼 + 随机问候

🖱️ 场景交互

玉简：悬停展开详情
灵脉节点：悬停涟漪效果 + 点击展开
法宝：拖拽 360° 环绕查看 + 分类高亮
玉符：点击复制信息 / 跳转链接

🥚 彩蛋系统

修为值：浏览累积，自动进阶
灵签：随机抽取
昼夜轮转：场景随时间变化

🌐 全局功能

🗡️ 御剑归宗（一键回到前厅）
📱 精简模式 / 移动端底部导航
🔤 篆文进度加载
📶 弱网提示

五、降级方案

检测	处理
WebGL 2.0 不支持	自动切换 2D 水墨版主页
2D 版内容	与 3D 版完全一致

六、Canvas 程序化贴图

所有贴图均由 Canvas 2D 实时生成，无额外静态图片资源：

八卦纹、玉简篆文、匾额
卷轴、光晕、水墨噪声
石壁卷轴按当前档案内容实时排版竖排文字（右起，含落款印）

七、后台管理系统

🔐 登录安全

禁制验证（登录保护）

📊 仪表盘

模块	说明
概览卡	4 张关键数据卡片
趋势图	近 7 日数据折线图
饼图	技术栈占比分布
操作记录	最近操作日志
品鉴排行	排行数据
快捷入口	常用功能快速跳转

📋 筑基档案

基础信息 / 功法配置（名称 + 炼气·筑基·金丹）
道心所向 / 形象立绘上传
粒子强度 / 问候语池

📜 修行履历

拖拽排序、置顶
批量上下架、批量删除
Markdown 编辑器（书写 + 实时预览）

🏺 丹器馆藏

分类 / 品阶 / 状态筛选
一键导入 GitHub 项目
标签输入、封面上传
Markdown 简介、拖拽排序

📡 传讯玉符

四种内置类型
图标、排序、显隐控制、拖拽排序

⚙️ 洞府禁制（系统设置）

分类	内容
基础设置	名称/副标题/三段加载文案/欢迎语/彩蛋开关
外观设置	主题色/水墨浓度/粒子强度/昼夜模式/人物模型替换与朝向姿势
账号设置	改密/JWT 有效期/登录日志

🎨 主题一致性

消息提示桥接到 Ant Design 暗色主题上下文
各页表单在页面挂载时即连接 Form 元素
Tabs 页签 forceRender，加载态用 Spin 覆盖

八、部署说明

项目	要求
前端	Node.js 环境，React 构建
后台	Node.js + Ant Design
浏览器	建议支持 WebGL 2.0（不支持则自动降级 2D）
模型	人物 GLB 模型可替换