vue3+vite+cesium自定义材料处理

目录

存在问题

问题原因

解决思路

---

存在问题

在cesium1.99版本及以上，采用老的材料规格写法，基本上会出现如下问题，这个XXX重构的对象

报错add property XXXXX, object is not extensible
有些文章采用require,会报错require是undefined

问题原因

vue2采用Object.defineProperty(obj, prop, descriptor)进行对象监听

vue3采用new Proxy(target, handler)进行对象监听

具体区分可以文章，点击链接查看

cesium自定义材料中通过Object.defineProperty实现对象的重构，如果能通过其他方式对材料对象重构即可，如下通过constructor来达到效果

解决思路

直接上代码，如下对应原来的材料代码进行修改即可

import * as  Cesium from 'cesium';
import img_color from "@/assets/cesium/color.png";

export class DynamicWallMaterialProperty {
    definitionChanged = new Cesium.Event();
    isConstant=false;
    color=Cesium.createPropertyDescriptor('color');
    constructor(options){
        this._color = undefined;
        this._colorSubscription = undefined;
        this.color = options.color;
        console.log("颜色"+options.color.rgb);
        this.duration = options.duration;
        this.trailImage = options.trailImage;
        this._time = (new Date()).getTime();
        this.viewerwall=options.viewerwall;

        Cesium.Material.DynamicWallType = 'DynamicWall';
        Cesium.Material.DynamicWallImage = img_color;
        //着色器
        Cesium.Material.DynamicWallSource = `czm_material czm_getMaterial(czm_materialInput materialInput)\n\
                                            {
                                            //生成默认的基础材质
                                            czm_material material = czm_getDefaultMaterial(materialInput);
                                            vec2 st = materialInput.st;
                                            //从UV中获取颜色
                                            vec4 colorImage = texture(image, vec2(fract(st.t - time), st.t));
                                            vec4 fragColor;
                                            fragColor.rgb = u_color.rgb / 1.0;
                                            //fragColor = czm_gammaCorrect(fragColor);
                                            //设置透明度
                                            material.alpha =  colorImage.a *u_color.a;
                                            //材质的散射光通道
                                            material.diffuse = u_color.rgb;
                                            //材质的自发光属性
                                            material.emission = fragColor.rgb;
                                            return material;
                                            }`;
        Cesium.Material._materialCache.addMaterial(Cesium.Material.DynamicWallType, {
            fabric: {
                type: Cesium.Material.DynamicWallType,
                uniforms: {
                    color: new Cesium.Color(1.0, 1.0, 1.0, 0.5),
                    u_color:options.color,
                    image: Cesium.Material.DynamicWallImage,
                    time: 0
                },
                source: Cesium.Material.DynamicWallSource
            },
            translucent: function(material) {
                return true;
            }
        });
    };
    getType = function(time) {
        return 'DynamicWall';
    };
    getValue = function(time, result) {
        if (!Cesium.defined(result)) {
            result = {};
        }
        result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
        if (this.trailImage) {
            result.image = this.trailImage;
        } else {
            result.image = Cesium.Material.DynamicWallImage
        }

        if (this.duration) {
            result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;
        }
        this.viewerwall.scene.requestRender();
        return result;
    };
    equals = function(other) {
        return this === other ||
            (other instanceof DynamicWallMaterialProperty &&
                Cesium.Property.equals(this._color, other._color))
    };
}