Cesium 封装云效果

/*
 * @Descripttion: 
 * @version: 1.0
 * @Author: tanzheng
 * @Date: 2024-1-22 11:02:42
 */
/**
 * 
 * 封装天气场景
 * 云图
 */
class Cloud {

    constructor(option = {}) {
        this.viewer = option.viewer;
        //加载云特效
        var worldRectangleclouds;
        var radians = 0;

        this.LoadClouds = function () {
            worldRectangleclouds = viewer.scene.primitives.add(new Cesium.Primitive({
                geometryInstances: new Cesium.GeometryInstance({
                    geometry: new Cesium.RectangleGeometry({
                        rectangle: Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
                        vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
                    }),
                }),
                releaseGeometryInstances: false,
                appearance: new Cesium.EllipsoidSurfaceAppearance({
                    material: new Cesium.Material({
                        fabric: {
                            type: 'Image',
                            uniforms: {
                                image: "../img/clouds.png",
                                radians: radians,
                            },
                            //shader
                            source: `
           #define M_PI 3.1415926535897932384626433832795

           uniform sampler2D image;
           uniform float radians;

           czm_material czm_getMaterial(czm_materialInput materialInput)
           {
             czm_material material = czm_getDefaultMaterial(materialInput);
             vec2 st = vec2(materialInput.st.x - 0.5, materialInput.st.y - 0.5);
             float alpha = 1.3 - st.x - 0.5;
             float current_radians = atan(st.y, st.x);
             float radius = sqrt(st.x * st.x + st.y * st.y);
             if (radius < 1.0) {
               current_radians = current_radians - radians;
               st = vec2(cos(current_radians) * radius, sin(current_radians) * radius);
               st = vec2(st.x + 0.5, st.y + 0.5);
               vec4 colorImage = texture2D(image, st);
               material.diffuse = colorImage.rgb;
               material.alpha = colorImage.a * alpha;
             } else {
               material.alpha = 0.0;
             }

             return material;
           }
           `
                        }
                    }),

                    aboveGround: true
                }),
                show: true
            }))

            this.viewer.clock.onTick.addEventListener(this.updataTimeRadians);
        }


        //时间同步云移动
        this.updataTimeRadians=()=> {
            this.UpdateModelRotationMaxtrix(worldRectangleclouds, radians);
        }

        //实时旋转旋转
        this.UpdateModelRotationMaxtrix = function (m, mrz) {

            var dir = viewer.clock.currentTime.secondsOfDay;
            //console.log("时间轴时间:" + viewer.clock.currentTime.secondsOfDay);

            //let sec = (dir+ mrz) / 86400.0 //;*360.0;
            let sec = 360.0 / 86400000.0 * viewer.clock.multiplier;
            //let sec = viewer.clock.multiplier;

            let mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(-sec));
            let rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);

            Cesium.Matrix4.multiply(
                m.modelMatrix,
                rotationZ,
                m.modelMatrix
            );
            // m.modelMatrix = mat;
            //console.log("模型旋转同步完成");
        }

        //清除云
        this.clearClouds = function () {
            viewer.scene.primitives.remove(worldRectangleclouds);
            //worldRectangleclouds=undefined;
            viewer.clock.onTick.removeEventListener(this.updataTimeRadians)
        }

    }

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值