Cesium左键点击模型效果怎么实现

发布时间：2021-12-28 16:52:52 作者：柒染
来源：亿速云阅读：715

# Cesium左键点击模型效果怎么实现

## 引言

在三维地理信息系统中，模型交互是提升用户体验的核心功能之一。Cesium作为领先的WebGL三维地球引擎，提供了丰富的API支持模型点击交互。本文将详细讲解如何通过左键点击实现Cesium模型的交互效果，包括高亮显示、信息弹窗等常见需求。

---

## 一、基础环境准备

### 1.1 引入Cesium库
```html
<link href="path/to/cesium/Widgets/widgets.css" rel="stylesheet">
<script src="path/to/cesium/Cesium.js"></script>

1.2 初始化Viewer

const viewer = new Cesium.Viewer('cesiumContainer', {
  terrainProvider: Cesium.createWorldTerrain()
});

二、模型加载与点击事件绑定

2.1 加载3D模型

使用Cesium.Model.fromGltf加载GLTF格式模型：

const model = viewer.scene.primitives.add(
  Cesium.Model.fromGltf({
    url: 'path/to/model.gltf',
    modelMatrix: Cesium.Matrix4.fromTranslation(
      Cesium.Cartesian3.fromDegrees(longitude, latitude, height)
    ),
    scale: 10.0
  })
);

2.2 添加点击事件监听

通过ScreenSpaceEventHandler实现点击检测：

const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

handler.setInputAction((movement) => {
  const pickedObject = viewer.scene.pick(movement.position);
  if (Cesium.defined(pickedObject) && pickedObject.primitive === model) {
    // 点击逻辑处理
  }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

三、实现点击效果

3.1 模型高亮效果

方案一：修改模型材质

model.active = false; // 自定义属性标记状态

handler.setInputAction((movement) => {
  const pickedObject = viewer.scene.pick(movement.position);
  if (Cesium.defined(pickedObject) && pickedObject.primitive === model) {
    model.active = !model.active;
    model.color = model.active 
      ? Cesium.Color.RED.withAlpha(0.5) 
      : Cesium.Color.WHITE;
  }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

方案二：外发光效果（需后处理）

// 需要引入后处理阶段
viewer.postProcessStages.add(
  Cesium.PostProcessStageLibrary.createEdgeDetectionStage()
);

3.2 显示信息弹窗

结合HTML元素实现信息展示：

const infoBox = viewer.infoBox;
infoBox.frame.sandbox = "allow-same-origin"; // 允许iframe内容

handler.setInputAction((movement) => {
  const pickedObject = viewer.scene.pick(movement.position);
  if (Cesium.defined(pickedObject) && pickedObject.primitive === model) {
    infoBox.viewModel.description = `
      <h2>模型信息</h2>
      <p>名称: 建筑A</p>
      <p>高度: 50米</p>
    `;
    infoBox.viewModel.showInfo = true;
  }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

四、高级交互实现

4.1 多模型区分点击

为每个模型添加自定义属性：

model.properties = {
  id: 'building_001',
  name: '主楼'
};

handler.setInputAction((movement) => {
  const pickedObject = viewer.scene.pick(movement.position);
  if (Cesium.defined(pickedObject) && pickedObject.primitive.properties) {
    console.log('点击模型ID:', pickedObject.primitive.properties.id);
  }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

4.2 点击动画效果

通过模型矩阵变换实现缩放动画：

Cesium.Tween.start({
  destination: Cesium.Matrix4.fromScale(
    new Cesium.Cartesian3(1.2, 1.2, 1.2),
    model.modelMatrix
  ),
  duration: 0.5,
  complete: () => {
    // 动画结束回调
  }
});

五、性能优化建议

拾取优化：对于复杂场景，使用viewer.scene.pickPosition替代全场景拾取
防抖处理：避免快速连续点击导致性能问题

let lastClickTime = 0;
handler.setInputAction((movement) => {
  const now = Date.now();
  if (now - lastClickTime < 300) return;
  lastClickTime = now;
  // 点击逻辑...
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

实例化模型：对重复模型使用Cesium.ModelInstanceCollection

六、完整代码示例

// 初始化Viewer
const viewer = new Cesium.Viewer('cesiumContainer');

// 加载模型
const model = viewer.scene.primitives.add(
  Cesium.Model.fromGltf({
    url: 'model.gltf',
    modelMatrix: Cesium.Matrix4.fromTranslation(
      Cesium.Cartesian3.fromDegrees(116.4, 39.9, 100)
    )
  })
);

// 点击事件
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction((movement) => {
  const pickedObject = viewer.scene.pick(movement.position);
  if (Cesium.defined(pickedObject) {
    // 高亮效果
    model.color = Cesium.Color.RED.withAlpha(0.5);
    
    // 显示信息
    viewer.selectedEntity = new Cesium.Entity({
      name: '被点击模型',
      description: '模型详细信息...'
    });
  }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

结语

通过本文介绍的方法，开发者可以灵活实现Cesium中模型点击的各种交互效果。实际项目中可根据需求组合不同技术方案，并注意性能优化。更多高级特性可参考Cesium官方文档。

作者注：本文代码基于Cesium 1.95版本，不同版本API可能存在差异。 “`

（全文约1250字，包含代码示例和实现细节）