cesium水面特效代码

cesium水面特效代码

来个水面特效吧

代码部分

export default class WaterPolygon {
    waterColor//水质的基本颜色
    alpha//水体的透明度
    positions//直接传入点位数组
    primitive//返回的primitive
    speed//水流动的速度
    choppy//控制纹理的重复次数
    height//波涛汹涌的程度
    freq//海浪的频率
    geoJson
    constructor(options) {
        this.waterColor = options.waterColor
        this.alpha = options.alpha
        this.speed = options.speed
        this.positions = options.positions
        this.choppy = options.choppy
        this.height = options.height
        this.freq = options.freq
        this.geoJson = options.geoJson
        this.primitive = null
        if (options.geoJson) {
            this.initJson()
        } else {
            this.initPoint()
        }

    }
    initPoint() {
        // 1、创建材质
        let appearance = this.initAppearance()
        // 2、创建geometry
        var rectangleInstance = new Cesium.GeometryInstance({
            geometry: new Cesium.PolygonGeometry({
                polygonHierarchy: new Cesium.PolygonHierarchy(
                    this.positions
                )
            }),
            id: 'rectangle',
            attributes: {
                color: new Cesium.ColorGeometryInstanceAttribute(0.0, 1.0, 1.0, 0.5)
            }
        })
  
        // 3、创建Primitives图原
        let primitive = new Cesium.Primitive({
            geometryInstances: [rectangleInstance],
            appearance: appearance
        })
        this.primitive = primitive

    }
    initJson() {
        // 1、创建材质
        let appearance = this.initAppearance()

        // 2、创建geometry
        var geometryInstances = [];
        const entities = this.geoJson?.entities.values;
        if (Array.isArray(entities)) {
            for (var i = 0; i < entities.length; i++) {
                var entity = entities[i];
                var hierarchy = entity.polygon.hierarchy.getValue();
                var geometryInstance = new Cesium.GeometryInstance({
                    geometry:new Cesium.PolygonGeometry({
                        polygonHierarchy: new Cesium.PolygonHierarchy(hierarchy.positions)
                        // 可以根据需要设置其他 PolygonGeometry 的属性
                    }),
                    attributes: {
                        color: new Cesium.ColorGeometryInstanceAttribute(0.0, 1.0, 1.0, 0.5)
                    }
                    // 其他 GeometryInstance 属性...
                });
                geometryInstances.push(geometryInstance);
            }
        }
        // 3、创建Primitives图原
        let primitive = new Cesium.Primitive({
            geometryInstances: geometryInstances,
            appearance: appearance
        })

        this.primitive = primitive

    }
    //创建primitive的自定义材质
    initAppearance() {
        let color
        if (this.waterColor) {
            let t_Color = Cesium.Color.fromCssColorString(this.waterColor);
            color = new Cesium.Cartesian3(t_Color.red, t_Color.green, t_Color.blue)
         

        } else {
            // color='vec3(0.1, 0.19, 0.22)'
        }
        let appearance = new Cesium.MaterialAppearance({
            material: new Cesium.Material({
                ...
        });
        function renderLoop(timestamp) {

            appearance.material.uniforms.u_time = timestamp / 1000;
            requestAnimationFrame(renderLoop);
        }
        renderLoop(10000);
        return appearance
    }
}

效果图片