cesium实现动态流动水面效果

Cesium实战系列文章总目录： 传送门

1.实现效果

2.实现方法

2.1实现思路

Cesium的material中提供了水water的相关材质：传送门

Water材质的属性说明：

属性名	说明
baseWaterColor	水的基本颜色
blendColor	水与非水区域的混合颜色
specularMap	水域的单通道纹理
normalMap	水的法线贴图
frequency	水波纹的数量
animationSpeed	水的流速
amplitude	水波纹振幅
specularIntensity	镜面反射强度

其中水的法线贴图使用Cesium自带的图片：

2.2具体代码

通过primitive方式添加水域面，再设置其材质即可，这里为了演示方便，使用简单矩形水域，具体代码如下：

// 流动水面效果
viewer.scene.primitives.add(
    new Cesium.Primitive({
        geometryInstances: new Cesium.GeometryInstance({
            geometry: new Cesium.RectangleGeometry({
                rectangle: Cesium.Rectangle.fromDegrees(
                    113.95, 22.48,
                    113.99, 22.52
                ),
                vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
            }),
        }),
        appearance: new Cesium.EllipsoidSurfaceAppearance({
            material: new Cesium.Material({
                fabric: {
                    type: "Water",
                    uniforms: {
                        baseWaterColor: new Cesium.Color(64 / 255.0, 157 / 255.0, 253 / 255.0, 0.5),
                        normalMap: './icons/waterNormals.jpg',
                        frequency: 1000.0,
                        animationSpeed: 0.1,
                        amplitude: 10,
                        specularIntensity: 10
                    }
                }
            })
        }),
    })
);