当前位置：首页 > news >正文

使用cesium设置第一视角

news 来源：原创 2025/4/28 6:07:25

在 Cesium 中实现第一视角跟随模型移动

// 初始化 Cesium 观察器
const viewer = new Cesium.Viewer('cesiumContainer');// 添加模型实体
const shipModel = viewer.entities.add({id: 'shipModel',position: Cesium.Cartesian3.fromDegrees(-115.0, 37.0, 1000.0),model: {uri: Cesium.Ion.defaultAssetId, // 使用默认模型scale: 1.0}
});// 设置第一视角
function firstView() {const shipModel = viewer.entities.getById('shipModel');if (shipModel) {// 设置视角偏移shipModel.viewFrom = new Cesium.ConstantProperty(new Cesium.Cartesian3(-50, -30, 80));// 设置跟踪实体viewer.trackedEntity = shipModel;} else {viewer.trackedEntity = undefined;}
}// 初始化第一视角
firstView();// 添加模型移动动画（模拟动态）
let heading = 0.0;
viewer.clock.onTick.addEventListener(function(clock) {if (viewer.trackedEntity) {const position = viewer.trackedEntity.position.getValue(clock.currentTime);if (position) {heading += 0.001;const newPosition = Cesium.Cartesian3.fromDegrees(Cesium.Math.toDegrees(position.x) + Math.sin(heading) * 0.001,Cesium.Math.toDegrees(position.y) + Math.cos(heading) * 0.001,position.z);viewer.trackedEntity.position = newPosition;}}
});

一、引言

在 3D 地球可视化领域，Cesium 作为强大的开源 JavaScript 库，为我们提供了丰富的功能来操作和展示地理空间数据。当我们需要对特定模型进行细致观察，或者模拟第一人称视角的交互体验时，实现第一视角跟随模型移动就变得十分关键。下面将详细介绍如何在 Cesium 中利用代码来达成这一效果。

二、代码解析

获取模型实体
- const shipModel = this.viewer.entities.getById('shipModel') 这行代码的作用是通过实体的唯一标识符 “shipModel” 从 Cesium 的实体集合中获取到我们想要跟踪的模型。在 Cesium 中，每个添加到场景中的对象（如模型、点、线等）都可以视为一个实体，通过为实体指定 id，便于我们后续精准地对其进行各种操作，这里就是获取到名为 “shipModel” 的模型实体，为后续的视角跟随操作做好准备。
设置视角偏移
- shipModel.viewFrom = new Cesium.ConstantProperty(new Cesium.Cartesian3(-50, -30, 80)) 这里是利用 viewFrom 属性来定义从哪个位置去观察模型，进而实现类似第一视角的效果。
- Cesium.Cartesian3 是一个三维笛卡尔坐标表示法，-50、-30、80 分别对应 X、Y、Z 轴方向的偏移量。在三维空间中，X 轴正方向通常指向屏幕右侧，负方向指向左侧；Y 轴正方向向上，负方向向下；Z 轴正方向向前，负方向向后。
- 这里的设置含义为：从模型前方（Z 轴正方向偏移 80 单位）、左侧（X 轴负方向偏移 50 单位）、稍下方（Y 轴负方向偏移 30 单位）的位置去观察该模型，这样的偏移组合可以营造出一种身处模型附近的特定观察视角，就像我们站在模型旁边近距离观察一样，初步具备了第一视角的雏形。
启用跟踪模式
- this.viewer.trackedEntity = shipModel 这是关键的一步，将 Cesium 观察器的跟踪实体设置为我们之前获取到的模型实体。一旦设置了这行代码，Cesium 就会自动调整场景相机，使其始终聚焦并跟随该模型实体在三维空间中的位置变化。无论模型因数据更新、动画或者其他交互操作而移动到场景中的哪个位置，相机都会实时调整视角，确保模型保持在视野中心附近，从而实现了第一视角跟随模型移动的核心效果。

三、应用场景

模拟驾驶体验
- 在航空、航海模拟等应用中，通过将飞机、船舶等模型作为跟踪对象并设置合适的视角偏移，可以为用户营造出仿佛亲自驾驶飞行器或船只的沉浸式体验。随着模型按照预定航线或用户操作指令移动，第一视角能实时展现周边的地理环境、地标建筑等场景细节，让用户直观感受驾驶过程中的视觉变化。
三维场景探索
- 对于复杂的三维建筑模型、虚拟城市等场景，以第一视角跟随模型（比如一个虚拟人物模型或者探索机器人模型）移动，可以方便用户细致入微地观察各个角落的建筑结构、室内布局、街道细节等。相比于传统的全局俯瞰视角，这种方式更能带来身临其境的探索感受，帮助用户更好地理解场景的三维空间关系。
动态数据可视化
- 当模型与动态数据关联，例如气象数据驱动的云团模型、实时交通流模型等，以第一视角跟随这些模型移动，能够更直观地观察到数据在空间中的变化趋势。比如跟着一个随风飘动的云团模型移动视角，能清楚看到云团在不同位置的形态变化以及周边气象要素的分布情况。

四、扩展与优化

动态调整视角偏移
- 在实际应用中，可以根据用户操作（如鼠标滚轮、按键等）或者模型的运动状态（如速度、方向变化等）实时动态调整 viewFrom 的偏移值。例如，当模型加速运动时，适当增加 Z 轴正方向的偏移，让视角稍微拉远一些，避免因模型快速移动而出现视觉上的晃动和遮挡；当模型转弯时，结合转向角度动态调整 X、Y 轴偏移，使视角始终处于最佳观察位置。通过监听模型的更新事件或者添加自定义的交互控制逻辑，实现这种动态视角调整，可以进一步提升用户体验的流畅性和自然性。
添加视角限制与碰撞检测
- 为了防止视角穿透模型或者场景中的其他障碍物，可以在设置第一视角跟随的同时，加入视角限制和碰撞检测机制。例如，计算相机与模型表面、周边建筑、地形等物体之间的距离，当距离过小时，自动调整视角位置或者限制视角的进一步靠近，确保视觉效果合理且符合物理实际。这需要结合 Cesium 提供的三维空间距离计算、碰撞检测等相关 API，对视角的运动范围进行约束，使第一视角跟随功能在复杂场景中更加稳定可靠。

五、总结

在 Cesium 中，借助 viewer.trackedEntity 结合合理的视角偏移设置，可以方便地实现第一视角跟随模型移动的效果。这一功能在众多地理空间可视化、模拟仿真等应用场景中都有着重要的价值，通过进一步的优化和扩展，还能够满足更加多样化和复杂的交互需求，为用户提供简单而强大的第一视角观察体验。随着对 Cesium 功能的深入挖掘和应用场景的不断拓展，相信会解锁更多基于第一视角的创新应用方式。