【Cesium学习（九）】Cesium加载的3D模型获取模型每一个实体构件信息，并改变状态

前言

前面我们学习到了如何在Cesium中加载3D模型，但是我们如何做到获取模型的每一个实体构件，并且改变它的状态，或者获取它的所有构件信息。接下来我们就来学习一个！

技术方案

有两个方案可以实现：一、是通过Cesium的鼠标事件来获取点击或者移动到某个实体构件，来获取实体构件信息。二、是通过获取创建模型的瓦片图层，通过遍历获取到所以的实体构件，并通过id来获取实体构件信息。

实现

我们这次主要是通过方案一，鼠标事件来获取。

首先创建一个3D模型

这里就不多讲了，可以看看前面的文章：【Cesium学习（六）】Cesium加载3D模型（3D tiles和glTF模型）

鼠标事件

在Cesium中有鼠标事件的方法：ScreenSpaceEventType，里面有各种事件。
API传送门

绑定事件

在初始化Cesium中的viewer上有一个screenSpaceEventHandler属性，里面的有一个setInputAction方法，screenSpaceEventHandler是处理用户输入事件。可以添加自定义功能以在以下位置执行当用户输入输入时。
API传送门

代码实现

1、案例一：点击模型某一个构件让高亮变色

	// 鼠标左键单击事件
      viewer.screenSpaceEventHandler.setInputAction((click) => {
        const pickedObject = viewer.scene.pick(click.position); // 获取鼠标点击的实体对象
        if (Cesium.defined(pickedObject)) {
          if (Cesium.defined(pickedObject)) {
            // 改变实体的颜色为绿色
            pickedObject.color = Cesium.Color.GREEN;
          }
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

效果展示

2、案例二：给3D模型构件添加hover高亮，点击构件让它隐藏

// 鼠标左键单击事件
viewer.screenSpaceEventHandler.setInputAction((click) => {
  const pickedObject = viewer.scene.pick(click.position); // 获取鼠标点击的实体对象
  if (Cesium.defined(pickedObject)) {
    if (Cesium.defined(pickedObject)) {
      // 实体隐藏
      pickedObject.show = false;
    }
  }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
const selected = {
  feature: undefined,
  originalColor: new Cesium.Color(),
};
const highlighted = {
  feature: undefined,
  originalColor: new Cesium.Color(),
};
// 鼠标移动事件
viewer.screenSpaceEventHandler.setInputAction((movement) => {
  if (Cesium.defined(highlighted.feature)) {
    highlighted.feature.color = highlighted.originalColor; // 恢复原始颜色
    highlighted.feature = undefined;
  }
  const pickedFeature = viewer.scene.pick(movement.endPosition);
  if (!Cesium.defined(pickedFeature)) {
    return;
  }
  if (pickedFeature !== selected.feature) {
    highlighted.feature = pickedFeature; // 保存高亮实体
    Cesium.Color.clone(pickedFeature.color, highlighted.originalColor); // 保存原
    pickedFeature.color = Cesium.Color.YELLOW; // 设置高亮颜色
  }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE)

效果展示

补充

在鼠标事件函数的回调里，我们可以得到构件的实体对象，可以看到构件的所有信息，我们打印实体就可以看到