Cesium中的矩阵变换

上一篇学习了WebGL中的矩阵变换变换矩阵（Transformation-matrix）详解,我们推演出旋转、平移、缩放矩阵，并通过代码实现。而在Cesium中于此类似，并且提供了Cesium.Matrix2、Cesium.Matrix3、Cesium.Matrix4类及其属性方法。
这里，我们以Cesium.Matrix4为例
Cesium.Matrix4

正常情况下，我们可以通过tileset.root.transform获取模型本身的模型矩阵，这个即存在3DTile中的tileset.json文件中
tileset.json

那么在Cesium中具体如何操作使用变换矩阵呢？
以调整模型位置为例

一、Cesium中的平移

有两种调整方式
（1）矩阵点乘法

1
2
3
4
5
6
let modelMatrix = tileset.root.transform;
let modelPosition = Cesium.Cartesian3.fromDegrees(lon, lat, height);
const translationMatrix = Cesium.Matrix4.fromTranslation(new Cesium.Cartesian3(6, 1, 8));
// 模型矩阵乘以平移矩阵 MxT
Cesium.Matrix4.multiply(modelMatrix, translationMatrix, modelMatrix);
tileset.root.transform = modelMatrix;

(2)直接设置

1
2
3
4
let modelMatrix = tileset.root.transform;
let modelPosition = Cesium.Cartesian3.fromDegrees(lon, lat, height);
Cesium.Matrix4.setTranslation(modelMatrix, modelPostion, modelMatrix);
tileset.root.transform = modelMatrix;

二、Cesium中的旋转

1
2
3
4
5
6
7
8
9
10
11
12
13
let modelMatrix = tileset.root.transform;
const preHRP={heading:0, roll:0, pitch:0};
const currentHRP = {heading:30, roll:10, pitch:-30};
let gapHRP = Ccesium.HeadingPitchRoll.fromDegrees(
    currentHRP.heading - preHRP.heading,
    currentHRP.pitch - preHRP.pitch,
    currentHRP.roll - preHRP.roll
)
let rotateMatrix = Cesium.Matrix3.fromHeadingPitchRoll(gapHRP);
// 模型矩阵乘以旋转矩阵 MxR
Cesium.Matrix4.multiplyByMatrix3(modelMatrix, rotateMatrix, modelMatrix);
tileset.root.transform = modelMatrix;
preHRP = Cesium.clone(currentHRP, true);

三、Cesium中的缩放

1
2
3
4
const scale = 1.1;
let modelMatrix = tileset.root.transform;
Cesium.Matrix4.multiplyByUniformScale(modelMatrix, scale, modelMatrix);
tileset.root.transform = modelMatrix;

四、综述

Cesium中的平移缩放旋转MxTxSxR涉及到的矩阵变换如下；

1
2
3
4
5
6
// 平移
Cesium.Matrix4.multiply();
// 缩放
Cesium.Matrix4.multiplyByUniformScale();
// 旋转
Cesium.Matrix4.multiplyByMatrix3();