Cesium點擊改變entity/primitives顏色與恢復原色(三)

2023-01-08

建筑物是primitives，兩個娃娃是entity

加載娃娃代碼：

      //粉色
    var entity6 = viewer.entities.add({
      id:6,
      position:new Cesium.Cartesian3.fromDegrees(103.8603, 30.7049,490),
      //設定朝向和翻滾角度
      orientation:orientation,
      model:{
        uri:"../../../static/3DModel/higokumaru__honkai_impact_3rd/scene.gltf",
        show:true,
        scale: 5.0 ,
        silhouetteColor : Cesium.Color.YELLOW,
        silhouetteSize : 0,
        colorBlendMode:Cesium.ColorBlendMode.MIX,
        colorBlendAmount: 0
      }
    })
    entityCollection.add(entity6)

    //小惡魔
    var entity7 = viewer.entities.add({
      id:7,
      position:new Cesium.Cartesian3.fromDegrees(103.8611, 30.7055,490),
      //設定朝向和翻滾角度
      orientation:orientation,
      model:{
        uri:"../../../static/3DModel/lilit_endora/scene.gltf",
        show:true,
        scale: 0.1 ,
        silhouetteColor : Cesium.Color.YELLOW,
        silhouetteSize : 0,
        colorBlendMode:Cesium.ColorBlendMode.MIX,
        colorBlendAmount: 0
      }


    })

加載建筑物代碼：

    var tileset = new Cesium.Cesium3DTileset({ 
      url: "../../../static/3DModel/sicauOSM/tileset.json",
    }); 
    viewer.scene.primitives.add(tileset);
    console.log(tileset);

系結左鍵點擊事件：

    //滑鼠單擊左鍵事件
    viewer.screenSpaceEventHandler.setInputAction(function onm ouseClick( click ) {
      var nowIsEntity = false;

      //pickedFeature 是 primitive
      var pickedFeature = viewer.scene.pick(click.position);
      //pickedEntity 是 entity
      var pickedEntity = null;
      if(Cesium.defined(pickedFeature)){
        console.log(pickedFeature);
        
        //如果是entity
        if(typeof(pickedFeature.id) !== "undefined"){
          pickedEntity = entityCollection.getById(pickedFeature.id.id);
          pickedEntity.model.color = Cesium.Color.RED;
          pickedEntity.model.colorBlendAmount = 0.5;
          nowIsEntity = true;          
        }
        //如果是primitive
        else if(typeof(pickedFeature.id) == "undefined"){
          that.lastPrimitiveColor = pickedFeature.color;
          console.log(`that.lastPrimitiveColor為:${that.lastPrimitiveColor}`);
          pickedFeature.color = Cesium.Color.RED;
          console.log(pickedFeature.getProperty("name"));
        }

        //第一次點擊，則只需要記住當前物體，以便點擊其他物體時候恢復改物體顏色
        if(that.pickedEntity === null && nowIsEntity){
            that.pickedEntity = pickedEntity;
            that.lastIsEntity = true;
            return;
        }else if(that.lastFeature === null && !nowIsEntity){
            that.lastFeature = pickedFeature;
            that.lastIsEntity = false;
            return;
        }

        //不是第一次點擊，則需將上一次點擊的物體恢復原本的顏色
        if(nowIsEntity){
            that.pickedEntity.model.colorBlendAmount = 0;//設定模型顏色與透明度
            that.pickedEntity=pickedEntity; 
            that.lastIsEntity = true;
            return;       
        }else if(!nowIsEntity){
            that.lastFeature.color = that.lastPrimitiveColor;
            console.log(`that.lastFeature.tileset.color為:${that.lastFeature.tileset.color}`);
            that.lastFeature=pickedFeature;
            that.lastIsEntity = false;
            return;    
        }

      }
      console.log(pickedFeature);
      console.log(pickedEntity);
      
      
    },Cesium.ScreenSpaceEventType.LEFT_CLICK);

 恢復entity的顏色使用的方法是將上一個entity的colorBlendAmount改為0

恢復primitives顏色是使用一個全域變數lastPrimitiveColor記住上一個primitives的顏色，

其不能和entity一樣使用colorBlendAmount的原因是：選中的建筑物型別是Cesium3DTileFeature，他的colorBlendAmount屬性在tileset中，也就是說改變colorBlendAmount之后變化的是所有建筑的colorBlendAmount而不是單個建筑的colorBlendAmount

 這里區別了primitives和entity，兩者分別可以有一個被選中，要是想全域只能有一個模型是選中狀態的話可以自己改一下代碼邏輯，

調整建筑的colorBlendMode使顏色更加合理

    //定義用于在目標顏色和圖元的源顏色之間混合的不同模式
    //HIGHLIGHT將源顏色乘以目標顏色
    //REPLACE將源顏色替換為目標顏色
    //MIX將源顏色和目標顏色混合在一起，
    tileset.colorBlendMode = Cesium.Cesium3DTileColorBlendMode.MIX; 
    tileset.colorBlendAmount = 0.7;

標籤：其他

上一篇：Cesium點擊改變entity/primitives顏色與恢復原色(三)

下一篇：CSS優先級-權重疊加計算