Cesium点击改变entity/primitives颜色与恢复原色(三)

2023-01-08
建筑物是primitives，两个娃娃是entity
加载娃娃代码：

1.       //粉色
2.     var entity6 = viewer.entities.add({
3.       id:6,
4.       position:new Cesium.Cartesian3.fromDegrees(103.8603, 30.7049,490),
5.       //设置朝向和翻滚角度
6.       orientation:orientation,
7.       model:{
8.         uri:"../../../static/3DModel/higokumaru__honkai_impact_3rd/scene.gltf",
9.         show:true,
10.         scale: 5.0 ,
11.         silhouetteColor : Cesium.Color.YELLOW,
12.         silhouetteSize : 0,
13.         colorBlendMode:Cesium.ColorBlendMode.MIX,
14.         colorBlendAmount: 0
15.       }
16.     })
17.     entityCollection.add(entity6)
19.     //小恶魔
20.     var entity7 = viewer.entities.add({
21.       id:7,
22.       position:new Cesium.Cartesian3.fromDegrees(103.8611, 30.7055,490),
23.       //设置朝向和翻滚角度
24.       orientation:orientation,
25.       model:{
26.         uri:"../../../static/3DModel/lilit_endora/scene.gltf",
27.         show:true,
28.         scale: 0.1 ,
29.         silhouetteColor : Cesium.Color.YELLOW,
30.         silhouetteSize : 0,
31.         colorBlendMode:Cesium.ColorBlendMode.MIX,
32.         colorBlendAmount: 0
33.       }<br><br>
34.     })

复制代码

 
 
加载建筑物代码：

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

复制代码

 
 

 
 
绑定左键点击事件：
 

1.     //鼠标单击左键事件
2.     viewer.screenSpaceEventHandler.setInputAction(function onMouseClick( click ) {
3.       var nowIsEntity = false;
5.       //pickedFeature 是 primitive
6.       var pickedFeature = viewer.scene.pick(click.position);
7.       //pickedEntity 是 entity
8.       var pickedEntity = null;
9.       if(Cesium.defined(pickedFeature)){
10.         console.log(pickedFeature);
11.         
12.         //如果是entity
13.         if(typeof(pickedFeature.id) !== "undefined"){
14.           pickedEntity = entityCollection.getById(pickedFeature.id.id);
15.           pickedEntity.model.color = Cesium.Color.RED;
16.           pickedEntity.model.colorBlendAmount = 0.5;
17.           nowIsEntity = true;         
18.         }
19.         //如果是primitive
20.         else if(typeof(pickedFeature.id) == "undefined"){
21.           that.lastPrimitiveColor = pickedFeature.color;
22.           console.log(`that.lastPrimitiveColor为:${that.lastPrimitiveColor}`);
23.           pickedFeature.color = Cesium.Color.RED;
24.           console.log(pickedFeature.getProperty("name"));
25.         }
27.         //第一次点击，则只需要记住当前物体，以便点击其他物体时候恢复改物体颜色
28.         if(that.pickedEntity === null && nowIsEntity){
29.             that.pickedEntity = pickedEntity;
30.             that.lastIsEntity = true;
31.             return;
32.         }else if(that.lastFeature === null && !nowIsEntity){
33.             that.lastFeature = pickedFeature;
34.             that.lastIsEntity = false;
35.             return;
36.         }
38.         //不是第一次点击，则需将上一次点击的物体恢复原本的颜色
39.         if(nowIsEntity){
40.             that.pickedEntity.model.colorBlendAmount = 0;//设置模型颜色与透明度
41.             that.pickedEntity=pickedEntity;
42.             that.lastIsEntity = true;
43.             return;      
44.         }else if(!nowIsEntity){
45.             that.lastFeature.color = that.lastPrimitiveColor;
46.             console.log(`that.lastFeature.tileset.color为:${that.lastFeature.tileset.color}`);
47.             that.lastFeature=pickedFeature;
48.             that.lastIsEntity = false;
49.             return;   
50.         }
52.       }
53.       console.log(pickedFeature);
54.       console.log(pickedEntity);
55.       
56.       
57.     },Cesium.ScreenSpaceEventType.LEFT_CLICK);

复制代码

 
 恢复entity的颜色使用的方法是将上一个entity的colorBlendAmount改为0
恢复primitives颜色是使用一个全局变量lastPrimitiveColor记住上一个primitives的颜色，
其不能和entity一样使用colorBlendAmount的原因是：选中的建筑物类型是Cesium3DTileFeature，他的colorBlendAmount属性在tileset中，也就是说改变colorBlendAmount之后变化的是所有建筑的colorBlendAmount而不是单个建筑的colorBlendAmount

 
 
 
 这里区别了primitives和entity，两者分别可以有一个被选中，要是想全局只能有一个模型是选中状态的话可以自己改一下代码逻辑。
 
调整建筑的colorBlendMode使颜色更加合理

1.     //定义用于在目标颜色和图元的源颜色之间混合的不同模式
2.     //HIGHLIGHT将源颜色乘以目标颜色
3.     //REPLACE将源颜色替换为目标颜色
4.     //MIX将源颜色和目标颜色混合在一起。
5.     tileset.colorBlendMode = Cesium.Cesium3DTileColorBlendMode.MIX;
6.     tileset.colorBlendAmount = 0.7;

复制代码

 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！