Cesium从入门放弃7：模型矩阵变换

前言

如何将模型添加到Cesium，这不是本文重点，如果对此有疑惑请访问Cesium从入门到放弃6：模型加载，不管是3dtileset还是gltf，矩阵变换并没有区别，本文以glft为例。矩阵变换是一个很复杂的工作，涉及的内容也特别多，所以我打算以实例为驱动。

ps 本文中所有模型加载均使用Primitive方法

首先，添加模型的方法我定义为：

const url='my-gltf-model.gltf'
const viewer=new Cesium.Viewer('map')
function addModel(matrix){
	viewer.scene.primitives.add({
    	Cesium.Model.fromGltf({url,modelMatrix:matrix})
    })
}

这里的难点在于如何设置模型的modelMatrix，下面展开说明

1.Gltf模型矩阵变换

1.1 将模型添加到某点

//这是模型的位置，但我们需要的是一个4x4的矩阵
const center=Cesium.Cartesian3.fromDegrees(110,40)
const matrix=Cesium.Transforms.eastNorthUpToFixedFrame(center)
const model=viewer.scene.primitives.add(
    Cesium.Model.fromGltf({
      url:'static/Wood_Tower.gltf',
      modelMatrix:matrix
  })
)

1.2 模型缩放

//延X轴放大2倍
//延Y轴放大3倍
//延Z轴放大4倍
const scale=Cesium.Matrix4.fromScale(new Cesium.Cartesian3(2,3,4),new Cesium.Matrix4)
model.modelMatrix=Cesium.Matrix4.multiply(model.modelMatrix,scale,model.modelMatrix)

1.3 模型平移

//延X 轴平移100m，其它轴同理
const translation=Cesium.Matrix4.fromTranslation(new Cesium.Cartesian3(100,0,0))
Cesium.Matrix4.multiply(model.modelMatrix,translation,model.modelMatrix)

1.4 模型旋转

//延X轴旋转90度，其它轴同理
const angel=Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(90))
const rotation=Cesium.Matrix4.fromRotationTranslation(angel)
Cesium.Matrix4.multiply(model.modelMatrix,rotation,model.modelMatrix)
//延任意轴旋转
const angle=Cesium.Quaternion.fromAxisAngle(new Cesium.Cartesian3(1,2,3), Cesium.Math.toRadians(90))
const rotation=Cesium.Matrix3.fromQuaternion(quaternion, new Cesium.Matrix3)
Cesium.Matrix4.multiply(model.modelMatrix,rotation,model.modelMatrix)

2. tileset模型矩阵变换

2.1 添加到固定的位置

tileset一般自带坐标，直接添加上去就行了。

2.2 高度调整

以下是Cesium官方给出的高度调整方法

const center = tileset.boundingSphere.center;
//这是我自己封装的坐标转换工具，自已将笛卡尔坐标转成经纬度就行了
const coord = CVT.toDegrees(center, viewer);
const surface = Cesium.Cartesian3.fromDegrees(coord.lon, coord.lat, 0);
const offset = Cesium.Cartesian3.fromDegrees(coord.lon, coord.lat, height);
const translation = Cesium.Cartesian3.subtract(
      offset,
      surface,
      new Cesium.Cartesian3()
);

tileset.modelMatrix = Cesium.Matrix4.multiply(tileset.modelMatrix, Cesium.Matrix4.fromTranslation(translation), tileset.modelMatrix)

tileset模型的位置一般不需要调整，如果需要调就说明这个模型做的有问题，如果需要调整按gltf的调整方式操作就行了。

建了个Cesium交流群，感兴趣的可以加。
群号：107615960