# 写实无尽海洋场景

一个基于 Three.js 的写实海洋场景，包含程序化生成的地形、植被、写实的水面和天空效果。

## 功能特性

### 🌊 写实海洋
- 使用 Three.js 官方 Water shader
- 动态水面波纹和反射
- 基于法线贴图的真实水面效果
- 支持天空颜色反射

### 🏔️ 程序化地形
- 使用 Simplex Noise 和 FBM（分形布朗运动）生成
- 多层噪声叠加创建自然起伏
- 基于高度的颜色渐变（深海、浅滩、沙滩、草地、岩石、雪山）
- 平滑的海岸线过渡

### 🌲 植被系统
- 40,000+ 片草地（实例化渲染）
- 400+ 棵程序化生成的树木
- 根据地形高度智能分布
- 逼真的树木几何形状（树干 + 多层树冠）

### ☀️ 天空与光影
- Three.js Sky shader（大气散射）
- 真实的太阳位置计算
- 动态雾效随太阳高度变化
- ACES Filmic 色调映射
- 高质量阴影

### 🎮 交互控制
- 轨道相机控制（拖拽旋转、右键平移、滚轮缩放）
- 太阳高度角控制（-10° 到 90°）
- 太阳方位角控制（-180° 到 180°）
- 曝光度调节
- 大气浑浊度控制
- 瑞利散射强度控制

## 技术栈

- **Three.js r171** - 3D 渲染引擎
- **Vite** - 现代化构建工具
- **ES Modules** - 模块化代码组织

## 项目结构

```
.
├── index.html              # HTML 入口
├── package.json            # 项目配置
├── vite.config.js          # Vite 配置
└── src/
    ├── main.js             # 应用入口
    ├── OceanScene.js       # 主场景管理器
    ├── TerrainGenerator.js # 地形生成器
    ├── VegetationSystem.js # 植被系统
    └── utils/
        └── SimplexNoise.js # Simplex Noise 实现
```

## 安装与运行

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

访问 http://localhost:3000

### 构建生产版本

```bash
npm run build
```

## 使用说明

### 相机控制
- **左键拖动**: 旋转视角
- **右键拖动**: 平移相机
- **滚轮**: 缩放

### 太阳控制面板

右上角提供完整的太阳和大气控制：

1. **太阳高度角 (Elevation)**
   - 范围: -10° 到 90°
   - 控制太阳在天空中的高度
   - 日出/日落效果在 0-15°
   - 正午效果在 70-90°

2. **太阳方位角 (Azimuth)**
   - 范围: -180° 到 180°
   - 控制太阳的水平位置
   - 180° = 正南方向

3. **曝光度 (Exposure)**
   - 范围: 0.1 到 2.0
   - 调节整体亮度
   - 默认 0.5 适合大多数场景

4. **大气浑浊度 (Turbidity)**
   - 范围: 1 到 20
   - 较低值: 清澈蓝天
   - 较高值: 雾霾/阴天效果

5. **瑞利散射 (Rayleigh)**
   - 范围: 0 到 4
   - 影响天空蓝色强度
   - 较高值: 更蓝的天空

## 性能优化

- 实例化渲染草地（减少 draw calls）
- 程序化生成（无需加载外部模型）
- 自适应像素比（限制最大 2x）
- PCF 软阴影
- 雾效减少远处渲染负担

## 浏览器要求

- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+

需要支持 WebGL 2.0

## 参数调优建议

### 日出场景
```
Elevation: 5-15
Azimuth: 90-180
Exposure: 0.4-0.6
Turbidity: 8-12
Rayleigh: 2-3
```

### 正午场景
```
Elevation: 70-85
Azimuth: 180
Exposure: 0.5-0.7
Turbidity: 6-10
Rayleigh: 1.5-2.5
```

### 黄昏场景
```
Elevation: 0-10
Azimuth: 270
Exposure: 0.3-0.5
Turbidity: 12-16
Rayleigh: 2-4
```

## 自定义修改

### 调整地形大小
编辑 `src/OceanScene.js` 中的 `initTerrain()`:
```javascript
const terrainGen = new TerrainGenerator({
    size: 1000,      // 地形尺寸
    segments: 256,   // 细分程度（影响细节）
    maxHeight: 50,   // 最大高度
    waterLevel: 0,   // 水面高度
    seed: 42         // 随机种子
});
```

### 调整植被密度
编辑 `src/OceanScene.js` 中的 `initVegetation()`:
```javascript
const vegSystem = new VegetationSystem(this.terrainGenerator, {
    grassCount: 40000,  // 草地数量
    treeCount: 400,     // 树木数量
    terrainSize: 1000,
    waterLevel: 0
});
```

### 调整水面效果
编辑 `src/OceanScene.js` 中的 `initWater()`:
```javascript
this.water = new Water(waterGeometry, {
    textureWidth: 512,
    textureHeight: 512,
    waterColor: 0x001e0f,     // 水面颜色
    distortionScale: 3.7,     // 波纹扭曲强度
    // ...
});
```

## 许可证

MIT License

## 参考资源

- [Three.js Ocean Example](https://threejs.org/examples/webgl_shaders_ocean.html)
- [Three.js Sky Shader](https://threejs.org/docs/#api/en/objects/Sky)
- [Simplex Noise Algorithm](https://en.wikipedia.org/wiki/Simplex_noise)