繁星如梦，渊邃如海 —— 这不仅仅是一句诗意的签名，更是一个技术宅用代码编织的星空梦想。
大家好！今天要给大家分享一个超级炫酷的项目 —— 星渊：沉浸式个人主页，一个完全用纯代码构建的3D沉浸式个人主页。说到设计灵感，还是来自于原神：空月之歌-月之一的官网星盘，当时看到的第一眼就被震撼到了，优秀的细节处理以及完美的互动，作为一个程序员怎么能不设计一个呢？
🎯 这到底是个什么神仙项目？
想象一下，当你打开一个网页，映入眼帘的不是传统的静态页面，而是一片浩瀚的星空。四层星环在你眼前缓缓旋转，每一颗星星都在轻柔地闪烁着，就像在对你眨眼睛。你可以用鼠标拖拽整个宇宙，滚轮缩放探索更深的星域，甚至点击"行星"来触发超丝滑的飞行动画...
这就是星渊！
✨ 核心亮点一览
- 🌌 沉浸式星空体验：四层星环系统，呼吸式闪烁效果
- 🚀 丝滑飞行过渡：点击行星触发电影级别的镜头运动
- 📱 移动端完美适配：单指旋转+惯性，双指缩放，轻点交互
- 🎵 音频合规播放：首次交互后自动淡入背景音乐
- ⚡ 性能自适应：根据设备性能自动调整画质
- 🎨 黑洞效果：鼠标移动产生时空扭曲般的视觉效果
🛠️ 技术栈：现代前端的艺术品
作为一个技术控，我必须得聊聊这个项目的技术实现。这可不是什么花架子，而是实实在在的硬核技术：
🎯 核心技术栈
├── Vue 3 + Vite 5 + TypeScript // 现代化开发体验
├── Three.js // 3D渲染引擎
├── EffectComposer + BloomPass // 后期特效管线
├── CSS2DRenderer // 文本标签渲染
└── WebAudio API // 音频处理
🌟 星环系统：四层嵌套的视觉盛宴
最让我骄傲的就是这个星环系统了！不是简单的贴图或者粒子效果，而是真正的四层立体结构：
- 点云层：最基础的星点，支持动态闪烁
- 发光点层：带有辉光效果的亮点
- 实例化网格层：高性能的几何体实例
- 线框层：勾勒出星环的骨架结构
每一层都有自己的材质系统，支持时间驱动的闪烁动画和"黑洞中心"的空间扭曲效果。这种层次化的设计不仅视觉效果丰富，性能优化也做得相当到位。
🎮 交互体验：桌面移动双端制霸
现在的用户可不满足于简单的点点点，他们要的是沉浸感！
🖥️ 桌面端
- 拖拽旋转整个星空
- 滚轮缩放探索远近
- WASD/方向键精细调整
- 鼠标移动产生"黑洞"效应
📱 移动端
- 单指旋转（带惯性！）
- 双指捏合缩放
- 轻点拾取行星
- 触摸也能触发"黑洞"
特别要说的是移动端的惯性效果，当你松开手指后，星空会根据你滑动的速度继续旋转一段时间，就像真的在太空中一样！这种细节体验真的是满满的诚意。
🎵 音频系统：合规又优雅
现在浏览器对音频播放越来越严格，必须要用户交互后才能播放。但是直接播放会很突兀，所以我实现了一个超级优雅的解决方案：
首次用户交互 → 音频从0音量开始播放 → 淡入到配置音量 → 支持播放进度本地存储
这样既符合浏览器规范，又保证了用户体验的连贯性。而且还支持淡入淡出效果，简直不要太丝滑！
⚡ 性能优化：让每个设备都能流畅运行
3D效果虽然炫酷，但是性能是个大问题。为了让更多设备都能流畅运行，我做了很多优化：
- FPS检测：启动后1.2秒内评估帧率，自动选择high/low画质
- 实例化渲染：大量重复几何体使用InstancedMesh
- LOD系统：根据距离调整细节级别
- 减少动画模式：尊重系统的
prefers-reduced-motion设置 - 页面隐藏优化：切换标签页时暂停不必要的更新
🎨 设计哲学：致敬原神空月之歌
说到设计灵感，必须得提到《原神》的空月之歌活动页面。那种梦幻的星空、柔和的光效、流畅的交互，简直就是网页设计的教科书！
我在设计星渊的时候，也融入了很多类似的元素：
- 🌌 深邃的星空背景：营造无限延伸的空间感
- ✨ 柔和的辉光效果：使用UnrealBloomPass实现电影级后期
- 🎭 呼吸式动画：星点的闪烁就像在轻柔地呼吸
- 🌀 空间扭曲：鼠标移动产生的"黑洞"效应
📂 项目结构：工程化的典范
作为一个有追求的程序员，代码结构必须得清晰！来看看这个项目的组织方式：
seadp/
├─ src/scenes/star/ # 星空场景核心
│ ├─ engine.ts # 渲染引擎主体
│ ├─ controls.ts # 交互控制系统
│ ├─ rings.ts # 四层星环构建
│ └─ planets.ts # 行星导航系统
├─ src/materials/ # 材质系统
│ ├─ twinklePoints.ts # 点云闪烁材质
│ ├─ twinkleInstanced.ts # 实例化材质
│ └─ twinkleMesh.ts # 网格材质
├─ src/composables/ # 组合式API
│ ├─ useAudio.ts # 音频管理
│ └─ usePerf.ts # 性能检测
└─ public/site.json # 配置文件
每个模块都有明确的职责，代码复用性和可维护性都很高。特别是材质系统，通过统一的uniform变量实现了闪烁和扭曲效果的复用。
🚀 快速上手：三步搭建你的星空
想要拥有自己的星空主页？超级简单！
# 1. 克隆项目
git clone https://github.com/stardeep925/star.git
# 2. 安装依赖
npm install
# 3. 启动开发服务器
npm run dev
然后打开 http://localhost:5173，你就能看到属于自己的星空了！
⚙️ 个性化配置：让星空成为你的专属
项目支持通过 public/site.json 进行个性化配置：
{
"brand": "你的品牌名",
"signature": "你的个性签名",
"logo": "/your-logo.png",
"audio": {
"src": "/audio/your-bgm.mp3",
"volume": 0.8
}
}
想要修改导航链接？直接编辑 src/scenes/star/planets.ts 中的 defaultRingNav() 函数就行！
🌟 未来展望：更多可能性
这个项目还有很多扩展空间：
- 🗂️ 多场景支持：不同的3D场景切换
- 📝 "潮汐日志"：集成博客系统
- 📱 PWA支持：离线访问能力
- 🎨 主题切换：多种视觉风格
- 🔧 可视化配置：拖拽式场景编辑器
💭 写在最后
在这个信息爆炸的时代，一个有个性的个人主页就像是数字世界中的一张名片。与其使用千篇一律的模板，为什么不用代码创造一片属于自己的星空呢？
星渊不仅仅是一个技术展示，更是对美好事物的追求。当技术与艺术相遇，当代码与梦想碰撞，我们就能创造出这样令人惊叹的作品。
本文介绍的项目完全开源，欢迎各位大佬提Issue和PR。让我们一起用代码点亮星空，用技术编织梦想！
标签： Vue3 Three.js 3D WebGL 个人主页 开源项目 前端 TypeScript
Comments NOTHING