一个基于 Three.js 和 MediaPipe 实现的实时交互式 3D 土星粒子系统，支持手势控制和鼠标交互。
- 120万粒子 - 极致的粒子数量，营造震撼的视觉效果
- 真实土星结构 - 包含 C 环、B 环、卡西尼缝、A 环、F 环
- 土星扁率 - 真实的扁球体形状（Y 轴压缩 0.9 倍）
- 真实轴倾角 - 26.73 度，符合土星真实数据
- 5万星星 + 星云 - 美丽的星空背景
- 背景行星 - 火星、地球、水星，带 FBM 噪声纹理
- 混沌噪声效果 - 近距离时粒子产生高频抖动，模拟气体湍流
- 金色主题界面 - 玻璃面板、金色装饰、深邃宇宙背景
- 鼠标控制 - 左键拖动旋转视角，滚轮缩放土星
- 手势控制 - 手掌张合控制粒子缩放，手掌移动控制旋转
- 灵敏度设置 - 可调整手势和鼠标的灵敏度
- 自动巡航模式 - 无交互时自动演示
- WebGL 着色器 - 6套完整着色器，实现高级视觉效果
- 开普勒轨道 - 真实的轨道速度（越外层越慢）
- LOD 优化 - 远距时减少渲染粒子，提升性能
- FBM 噪声 - 用于生成行星纹理
- 实时手势追踪 - 使用 MediaPipe Hands
- 响应式设计 - 适配不同屏幕尺寸
- Node.js 10.16.2 或更高版本
- 现代浏览器（Chrome、Firefox、Edge）
- 摄像头（用于手势控制）
-
克隆项目
git clone https://github.com/JohnvenTom/Web-Planet cd Planet -
启动本地服务器
npx http-server -p 8000
-
访问项目 在浏览器中打开：
http://127.0.0.1:8000 -
允许摄像头访问 首次打开时，浏览器会请求摄像头权限，点击"允许"
- 左键拖动：旋转视角，观察土星的不同角度
- 鼠标滚轮：缩放土星，体验不同尺度的细节
- 手掌张合：张开手掌放大土星，握拳缩小土星
- 手掌移动：左右移动手掌旋转土星，上下移动调整俯仰角
- 左侧设置面板：可展开/收起
- 手势缩放灵敏度：调整手掌张合的响应速度
- 手势旋转灵敏度：调整手掌移动的响应速度
- 鼠标旋转灵敏度：调整鼠标拖动的响应速度
- 鼠标滚轮灵敏度：调整滚轮缩放的响应速度
- 开普勒轨道：土星环粒子按照真实的开普勒定律运动
- 混沌效果：土星放大到一定程度时，粒子开始产生混沌运动
- 亮度变化：土星缩小时变暗，放大时变亮，符合灯光物理规律
- 自动巡航：3秒无交互后自动进入演示模式
Planet/
├── index.html # 主页面
├── app.js # 核心JavaScript代码
└── README.md # 项目说明
- 前端框架：原生 JavaScript
- 3D 引擎：Three.js r128
- 手势识别：MediaPipe Hands
- 服务器：http-server
- 土星本体：30万粒子，带有条纹纹理
- 土星环：90万粒子，分层结构
- 星星：5万粒子，带有闪烁效果
- 星云：100个粒子，营造深空效果
- 土星顶点着色器：处理粒子位置、大小、噪声
- 土星片元着色器：处理颜色、光晕、材质
- 星星着色器：处理星星闪烁
- 行星着色器：生成程序化行星纹理
- 鼠标事件：处理点击、移动、滚轮
- 手势识别：使用 MediaPipe 实时追踪手掌
- 灵敏度设置：可调节各种操作的响应速度
- 开普勒定律：土星环粒子的轨道速度计算
- 混沌噪声：近距离时的粒子湍流效果
- 视差效果：背景行星的空间位移
- Chrome 90+
- Firefox 88+
- Edge 90+
- Safari 14+
- LOD 系统：根据距离调整粒子数量
- 着色器优化：高效的 GPU 计算
- 内存管理：合理的缓冲区分配
- 渲染设置：适当的像素比和抗锯齿
欢迎提交 Issue 和 Pull Request！
MIT License
- Three.js 团队 - 提供优秀的 3D 引擎
- MediaPipe 团队 - 提供实时手势识别
享受探索土星的奇妙之旅！ 🚀