繁星如梦，渊邃如海
🎯 项目亮点
|
💡 技术亮点
|
🔧 技术架构（Mermaid）
graph TD
A[App.vue] --> B[Star.vue]
B --> C[engine.ts<br/>渲染/动画/过渡]
C --> D[controls.ts<br/>桌面与移动交互]
C --> E[rings.ts<br/>星环系统]
C --> F[planets.ts<br/>行星/Decal/拾取/CSS2D]
C --> G[meteors.ts<br/>流星效果]
C --> H[postprocessing.ts<br/>Bloom]
C --> I[fit.ts<br/>相机距离自适配]
C --> J[twinkle*.ts<br/>材质闪烁与BH畸变]
A --> K[useAudio.ts<br/>音频合规/淡入淡出]
A --> L[usePerf.ts<br/>质量评估]
一个基于 Vue 3 + Vite + Three.js 的沉浸式个人主页（单场景）。以星空与多层星环为核心视觉，支持桌面与移动端的自然交互、音频合规播放与淡入、性能自适应等能力，场景纯代码编写，无外部资源引用。
- Three.js 星空与星环：背景星场、四层星环（点云/发光点/InstancedMesh/线框），自带“呼吸式”闪烁与视差。
- 后期特效：集成 UnrealBloomPass，带来柔和辉光与层次感。
- 行星导航：环上分布“行星”节点（含 Decal 图标与 CSS2D 标签），点击/轻点会进行“飞行”过渡后跳转外部链接。
- 移动/桌面交互：
- 桌面：拖拽旋转、滚轮缩放、WASD/方向键微调；指针移动驱动“黑洞”中心产生畸变与亮度衰减。
- 移动：单指旋转（抬手有惯性）、双指捏合缩放、轻点拾取；触摸移动同样更新“黑洞”中心。
- 品牌约束：不使用陀螺仪。
- 音频系统（合规）：首次用户交互后才开始播放，并从 0 音量淡入至配置音量；支持播放进度本地持久化与淡入淡出。
- 性能自适应：启动后进行轻量 FPS 评估，动态选择 high/low 质量并调整星数与半径；尊重系统
prefers-reduced-motion。 - 可访问性：提供跳转主内容的
skip-link、焦点可见、标签层aria-live等基础支持。
- Vue 3、Vite 5、TypeScript
- Three.js（星场/星环/行星/流星 + 后期）
- CSS2DRenderer（文本标签）
seadp/
├─ public/
│ ├─ audio/bgm.mp3
│ ├─ font/font.ttf
│ └─ site.json # 站点配置
├─ src/
│ ├─ scenes/
│ │ ├─ Star.vue # 场景挂载组件
│ │ └─ star/
│ │ ├─ engine.ts # 引擎主体（渲染/动画/过渡）
│ │ ├─ controls.ts # 桌面+移动交互
│ │ ├─ rings.ts # 星环构建/管理
│ │ ├─ planets.ts # 行星与标签、拾取
│ │ └─ fit.ts # 相机距离自适应
│ ├─ materials/
│ │ ├─ twinklePoints.ts # 点云闪烁+黑洞畸变
│ │ ├─ twinkleInstanced.ts # InstancedMesh 闪烁+畸变
│ │ └─ twinkleMesh.ts # 网格材质细节+畸变
│ ├─ effects/meteors.ts # 流星系统
│ ├─ utils/
│ │ ├─ postprocessing.ts # Bloom 管线
│ │ ├─ starField.ts # 背景星场
│ │ └─ glowTexture.ts # 发光纹理绘制
│ ├─ composables/
│ │ ├─ useAudio.ts # 音频（WebAudio/GainNode/进度持久化）
│ │ └─ usePerf.ts # 性能探测与质量选择
│ ├─ components/AudioControl.vue
│ ├─ styles/base.css # 全局样式/可访问性
│ ├─ App.vue
│ └─ main.ts
├─ index.html
├─ vite.config.ts
├─ tsconfig.json
└─ package.json
需要 Node.js ≥ 18（Vite 5 要求）
# 安装依赖
npm install
# 本地开发（默认端口 5173）
npm run dev
# 生产构建（启用 terser 压缩与混淆）
npm run build
# 构建产物预览（默认端口 4173）
npm run preview{
"brand": "星渊",
"signature": "繁星如梦，渊邃如海",
"logo": "/logo.png",
"navigation": { "freeExploration": true, "quickJump": false },
"audio": { "enabled": true, "src": "/audio/bgm.mp3", "loop": true, "volume": 1 },
"scenes": [ { "id": "star", "name": "星图", "enabled": true } ],
"blogEnabled": false,
"engine": "three",
"pwa": true
}- brand/signature/logo：品牌信息与资源路径。
- navigation：交互偏好（当前仅自由探索，
quickJump可后续扩展）。 - audio：音频开关、资源、循环、目标音量（注意：实际播放在首次交互后开始，并从 0 淡入）。
- scenes：场景清单；代码层会强制仅保留
star场景。 - engine：渲染引擎类型（目前使用 three）。
- blogEnabled/pwa：后续阶段功能（当前未接入路由/PWA）。
- 入口：
src/scenes/star/planets.ts的defaultRingNav()。 - 你可以将导航项改为从
site.json读取，或直接在此函数中调整标题与链接。
- 桌面：
- 拖拽旋转：按下拖动改变
yaw/pitch。 - 滚轮缩放：缩放相机距离
camZ。 - 键盘：
W/S或方向键上下调整俯仰，A/D或左右调整方位。 - 点击拾取：命中行星后触发“飞行过渡”并跳转外链。
- 拖拽旋转：按下拖动改变
- 移动：
- 单指拖拽旋转；抬手后有惯性。
- 双指捏合缩放相机。
- 轻点拾取：命中行星后过渡并跳转。
- 黑洞中心（BH）：指针/触摸位置会映射为 NDC 坐标，驱动星点/行星材质产生轻微畸变与亮度衰减，增强沉浸感。
- 不使用陀螺仪：符合品牌偏好。
- 引擎循环：
src/scenes/star/engine.ts- 初始化 Three + Bloom + 背景星场 + 星环 + 行星 + 流星。
- 动画中更新旋转/闪烁时间/标签渲染，进行过渡（飞向被点中的行星），并在页面隐藏时暂停流星更新。
- 交互适配：
src/scenes/star/controls.ts- 桌面与移动分别绑定事件，移动端包含惯性与捏合缩放。
- 统一回调
onPick(ndcX, ndcY)进行射线拾取。
- 材质系统：
src/materials/*- 为点云/InstancedMesh/网格注入
uTime/uBH*uniform，以实现闪烁与“黑洞”中心畸变、亮度衰减。
- 为点云/InstancedMesh/网格注入
- 相机适配：
src/scenes/star/fit.ts基于二分搜索计算相机距离，保证最外层环适配视野。 - 音频：
src/composables/useAudio.ts+src/components/AudioControl.vue- WebAudio
GainNode控制总线音量，提供fadeTo、播放进度本地持久化、合规启动。
- WebAudio
- 质量自适应：
src/composables/usePerf.ts在启动 1.2s 内评估帧间隔，选择 high/low 质量（影响星数、半径等）。 - 减少动画：尊重
prefers-reduced-motion，并可通过engine.setReducedMotion()动态调整。 - 可访问性：
index.html提供skip-link；焦点可见；标签层aria-live。
- 压缩与混淆：生产构建使用
terser去除调试语句，并启用rollup-plugin-obfuscator（提升源码防护，但会增加调试难度）。 - 分包：
vendor拆分（vue、three）。 - 预览：
npm run preview。
- 现代浏览器（建议最新版 Chrome/Edge/Safari/Firefox）。
- 移动端适配触控手势；不依赖陀螺仪。
- 页面所用音频资源来源于米哈游《原神》，仅做个人主页展示使用；如有侵权，请联系移除。
- Logo 与品牌信息归项目作者所有。
欢迎提交 Issue 与 PR：
- 请描述清楚问题与复现步骤，或改动动机与实现方式。
- 对于交互/视觉改动，建议附上短视频或截图。