cesium 根据中心点偏移视角锁定 视角跟随 第三人称视角跟随

假定场景中有一辆车,需要将相机视角锁定到这个车上,车辆在视角的中心位置,即三维容器的中心位置,可参考 cesium 视角锁定 视角跟随 第三人称视角跟随_cesium视角跟随-优快云博客 

此时,若需要将跟随的视角以车辆为中心点,进行偏移一定位置,使车辆不在三维容器的中心位置,可采用此办法

// 相机看向车辆的矩阵,车辆矩阵带了hpr,不需要额外处理hpr
let modelMatrix = car.modelMatrix;

// 计算车辆前方 2 米的世界坐标
let forwardOffset = new Cesium.Cartesian3(0, 0, 2);
const modelMatrixB = Cesium.Matrix4.multiplyByTranslation(modelMatrix, forwardOffset, new Cesium.Matrix4());

viewer.camera.lookAtTransform(modelMatrixB, new Cesium.HeadingPitchRange(Cesium.Math.toRadians(90), Cesium.Math.toRadians(-15), 17));

代码详解

在 Cesium.Matrix4.multiplyByTranslation(modelMatrix, forwardOffset, new Cesium.Matrix4()) 这行代码中,forwardOffset 的 XYZ 轴是 基于车辆自身坐标系 的,即它们表示的是车辆的本地坐标方向,而不是世界坐标系方向。

在车辆自身坐标系(模型坐标系)中:

  • X 轴(右方向):指向车辆的 右侧(通常是车辆的副驾驶方向)。
  • Y 轴(前方向):指向车辆的 前方(车辆行驶方向)。
  • Z 轴(上方向):指向车辆的 上方(垂直向上)。

效果对比 :在z轴向上偏移2米,即沿着车辆的垂直方向(车顶方向)向上移动 2 米

### Cesium 中实现第三人称跟随视角漫游效果 为了实现在 Cesium 中创建第三人称跟随相机的效果,可以利用 `Viewer` 对象中的 `camera` 属性来控制摄像机的位置和方向。通过监听实体位置的变化并相应调整摄像机的角度和距离,能够模拟出跟随后方的视觉体验。 下面是一个简单的例子,展示了如何设置一个基本的第三视角跟随功能: ```javascript // 初始化 Cesium Viewer 实例 const viewer = new Cesium.Viewer('cesiumContainer'); // 创建一个飞行器模型作为被跟踪对象 viewer.entities.add({ position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883), model : { uri : 'path/to/your/model.glb' } }); let targetEntity; function setTarget(entity) { targetEntity = entity; } setTarget(viewer.entities.values[0]); // 设置初始相机位置到目标后面一定距离处 function updateCamera() { const offset = new Cesium.HeadPitchRoll(0, Cesium.Math.toRadians(-15), 0); if (Cesium.defined(targetEntity)) { let pos = Cesium.Property.getValueOrClamped(targetEntity.position, viewer.clock.currentTime); // 计算相对于物体的新相机位置 const transform = Cesium.Transforms.eastNorthUpToFixedFrame(pos); const offsetCartesian = Cesium.Matrix4.multiplyByPointAsVector(transform, new Cesium.Cartesian3(0, -200, 100), new Cesium.Cartesian3()); const finalPos = Cesium.Cartographic.fromCartesian(Cesium.Cartesian3.add(pos, offsetCartesian, new Cesium.Cartesian3())); viewer.camera.setView({ destination : Cesium.Cartesian3.fromRadians(finalPos.longitude, finalPos.latitude, finalPos.height), orientation : { heading : Cesium.Math.PI, pitch : Cesium.Math.toRadians(-15), roll : 0 } }); } requestAnimationFrame(updateCamera); // 持续更新以保持跟随状态 } updateCamera(); ``` 此代码片段定义了一个名为 `updateCamera()` 的函数,它会持续计算新的相机视图,并将其应用给当前场景中的摄像机。这里假设有一个已经存在的实体(比如上面提到的飞行器),该实体具有随时间变化的位置属性。每当调用这个方法时,都会重新评估目标实体的位置,并据此调整摄像机的方向和高度[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值