水面流动效果

最新推荐文章于 2024-04-29 11:33:14 发布

gis开发

最新推荐文章于 2024-04-29 11:33:14 发布

阅读量64

点赞数 1

文章标签：原型模式 javascript 前端

本文链接：https://blog.csdn.net/qq_32290021/article/details/130496423

版权


import movingRiver from "@/assets/img/waterNormals.jpg";
export class WaterPrimitive {
    constructor(options) {
        this._positions = options.positions;
        this._height =   options.height;
        this._extrudedHeight = options.extrudedHeight;
        this._targetHeight = Cesium.defaultValue(options.targetHeight, options.extrudedHeight);
        this._grow = Cesium.defaultValue(options.grow, false);
        this._upGrow = Cesium.defaultValue(options.upGrow, true);
        this.init();
    }
}
Object.defineProperties(WaterPrimitive.prototype, {
    extrudedHeight: {
        get() {
            return this._extrudedHeight;
        },
        set(newVal) {
            if (Object.prototype.toString.call(newVal) !== "[object Number]") return;
            if (this._primitive) {
                this._primitive._state = 3;
                this._primitive._appearance = undefined;
                this._primitive.geometryInstances.geometry = this.getGeometry();
                this._extrudedHeight = newVal;
            }
        }
    }
});
WaterPrimitive.prototype.getGeometry = function () {
    return new Cesium.PolygonGeometry({
        polygonHierarchy: new Cesium.PolygonHierarchy(this._positions),
        height: this._height,
        extrudedHeight: this._extrudedHeight,
        vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
    });
};
WaterPrimitive.prototype.update = function (frameState) {
    if (this._primitive) {
        let primitive = this._primitive;
        primitive.update(frameState);
    }
};

WaterPrimitive.prototype.destroy = function () {
    let primitive = this._primitive;
    primitive.destroy()
}

WaterPrimitive.prototype.init = function () {
    let geometry = this.getGeometry();
    if (!geometry) return;
    this._primitive = new Cesium.Primitive({
        releaseGeometryInstances: false,
        geometryInstances: new Cesium.GeometryInstance({
            geometry
        }),
        asynchronous: false,
        appearance: new Cesium.EllipsoidSurfaceAppearance({
            material: new Cesium.Material({
                fabric: {
                    type: "Water",
                    uniforms: {
                        baseWaterColor: new Cesium.Color(0 / 255.0, 255 / 255.0, 237 / 255.0, 0.1),
                        normalMap: movingRiver,
                        frequency: 1000.0,
                        animationSpeed: 0.1,
                        amplitude: 10,
                        specularIntensity: 10
                    }
                }
            }),

        })
    });
    if (this._grow) {
        this.grow();
    }

};
WaterPrimitive.prototype.grow = function () {
    if (this._upGrow) {
        if (this.extrudedHeight < this._targetHeight) {
            this.extrudedHeight += 0.01;
            Cesium.requestAnimationFrame(() => this.grow());
        }
    } else {
        if (this.extrudedHeight > this._targetHeight) {
            this.extrudedHeight -= 0.01;
            Cesium.requestAnimationFrame(() => this.grow());
        }
    }
}
Cesium.WaterPrimitive = WaterPrimitive;

调用方法：

position Cartesian3 世界坐标系 x，y，z

import { WaterPrimitive } from './Water'


this.viewer.scene.primitives.add(new WaterPrimitive({
                positions,
                height,
                extrudedHeight:height,
                targetHeight:750,
                grow:true,
                upGrow:true,

            }))