在 Cesium 中打造真实可交互的动态海面

在场景里添加一片水域。波浪起伏，浪峰和浪谷真实交替，船只随着波浪摇摆。镜头切换到水下，水面的折射和吃水线清晰可见，还能看到漂浮的气泡粒子。

第一章：环境准备与基本场景

        在开始构建海面之前，我们要先搭建一个干净的 Cesium + Vue 开发环境，并初始化好场景。

(window as any).CESIUM_BASE_URL = '/node_modules/cesium/Build/Cesium'

import * as Cesium from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'

// Token 配置（使用你自己的 Ion Token）
Cesium.Ion.defaultAccessToken = '你的Token'

import { onMounted } from 'vue'

let viewer: Cesium.Viewer

onMounted(() => {
  viewer = new Cesium.Viewer('cesiumContainer', {
    timeline: false,
    animation: false,
    geocoder: false,
    homeButton: false,
    sceneModePicker: false,
    baseLayerPicker: false
  })

  // 优化渲染设置
  viewer.scene.highDynamicRange = false
  viewer.scene.globe.depthTestAgainstTerrain = true
  viewer.scene.postProcessStages.fxaa.enabled = true

  // 初始相机位置
  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(118.02, 29.512, 1500),
    orientation: {
      heading: 0,
      pitch: Cesium.Math.toRadians(-30),
      roll: 0
    }
  })
})

第二章：海面几何的构建

为什么不能直接用 Cesium 内置水面

Cesium 提供过一个 WaterMaterialProperty，但它有几个硬伤：

• 只能作用在矩形/多边形区域；

• 波浪是贴图动画，不是真实几何起伏；

• 不能与船、潜艇产生物理交互；

• 更无法做水下效果。

所以我们要自己来，手动构建一张 规则网格（Grid），然后在 CPU/GPU 上更新它。

网格构建的基本思路

1. 选择中心点：
   我们用 center = { lon: 118.02, lat: 29.512, height: 520 } 作为海域中心。

2. 规则采样：
   在中心点周围，按 NX × NY 的规则点阵生成顶点。

3. 索