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字，包含代码示例和实现细节）