Appearance
潜入海底花园
项目概述
潜入海底花园是一个沉浸式海底生态系统可视化平台，基于 Three.js + React 构建，展示海洋生物和海底环境。通过这个平台，用户可以探索海底世界的奇妙景象，了解海洋生物的分布和生态系统。
核心特性
🌍 3D地球与海洋系统
- 真实地球纹理贴图，包含海洋和陆地
- 动态海洋系统，模拟海浪和洋流
- 可切换的视角模式：全球视图和局部海底视图
🐠 海洋生物
- 丰富的海洋生物模型：鱼群、海龟、鲸鱼、海豚、珊瑚礁等
- 真实的生物行为模拟：鱼群游动、海龟迁徙、鲸鱼喷水等
- 生物互动：不同生物之间的自然互动
🏝️ 海底环境
- 多样化的海底地形：珊瑚礁、海底峡谷、海山、深海平原
- 动态的海底光照效果，模拟不同深度的光线变化
- 海底植物和微生物的可视化
🎨 交互功能
- 图层面板：可以显示/隐藏不同类型的海洋生物和环境元素
- 搜索筛选：根据生物类型、尺寸、栖息地等进行筛选
- 信息面板：点击生物可查看详细信息和生态数据
- 导航系统：快速定位到特定的海底区域
🌊 特殊效果
- 洋流粒子效果，展示海洋流动
- 海洋波纹和波浪动画
- 气泡上升效果
- 光的折射和散射效果，模拟水下视觉
📱 响应式设计
- 适配各种设备尺寸，从手机到桌面端
- 触摸友好的交互设计，支持移动设备操作
- 流畅的性能，即使在低配置设备上也能正常运行
技术栈
- 前端框架：React 18 + TypeScript
- 3D渲染：Three.js + React Three Fiber
- 构建工具：Vite
- 状态管理：React Context API + Zustand
- 样式：CSS Modules + Tailwind CSS
- 动画：Framer Motion + Three.js Animation System
- 物理引擎：Cannon.js (用于模拟海洋物理效果)
项目结构
ocean/
├── src/
│ ├── components/
│ │ ├── Earth.jsx # 3D地球组件
│ │ ├── Ocean.jsx # 海洋系统组件
│ │ ├── MarineLife.jsx # 海洋生物组件
│ │ ├── Controls.jsx # 控制面板
│ │ └── InfoPanel.jsx # 信息面板
│ ├── hooks/
│ │ ├── useMarineData.js # 海洋生物数据处理
│ │ └── useOceanPhysics.js # 海洋物理效果
│ ├── data/
│ │ └── marineLife.js # 海洋生物数据
│ ├── utils/
│ │ ├── geoUtils.js # 地理坐标工具
│ │ └── oceanUtils.js # 海洋物理工具
│ ├── App.jsx # 应用主组件
│ └── main.jsx # 应用入口
└── package.json # 项目配置技术实现
3D海洋系统
使用 Three.js 创建动态海洋系统，模拟海浪、洋流和海底地形。通过着色器实现海洋的实时渲染效果。
海洋生物行为模拟
使用状态机和行为树模拟海洋生物的自然行为，如鱼群的集群行为、海龟的迁徙路径等。
物理引擎集成
集成 Cannon.js 物理引擎，模拟海洋生物的运动和碰撞检测，使生物行为更加自然。
性能优化
- 使用实例化渲染（Instanced Rendering）减少绘制调用
- 实现LOD（Level of Detail）技术，根据距离调整生物细节
- 使用WebGL的视锥体剔除，只渲染可见的对象
- 实现按需加载，根据用户视角动态加载生物数据
- 海洋渲染优化，使用GPU加速的波浪计算
应用场景
- 教育用途：了解海洋生态系统和海洋生物
- 环保宣传：展示海洋环境的美丽，提高环保意识
- 旅游规划：查看不同海域的特色生物，为潜水旅行做准备
- 艺术欣赏：欣赏海底世界的视觉美感
- 研究参考：为海洋学研究提供直观的可视化工具
未来规划
- 添加更多海洋生物种类和详细信息
- 实现气候变化对海洋生态的影响模拟
- 添加用户自定义功能，允许用户创建自己的海底场景
- 集成VR/AR功能，提供更沉浸式的体验
- 开发移动应用版本，方便用户随时随地探索海底世界