Cesium左鍵點擊模型效果怎么實現

# 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: () => {
    // 動畫結束回調
  }
});

五、性能優化建議

1. 拾取優化：對于復雜場景，使用viewer.scene.pickPosition替代全場景拾取
2. 防抖處理：避免快速連續點擊導致性能問題

let lastClickTime = 0;
handler.setInputAction((movement) => {
  const now = Date.now();
  if (now - lastClickTime < 300) return;
  lastClickTime = now;
  // 點擊邏輯...
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

1. 實例化模型：對重復模型使用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字，包含代碼示例和實現細節）