Cesium 中的图形变换：局部平移、缩放、旋转思路及代码实现

开门见山：tileset.modelMatrix

这个属性能够在数据自己的基础上再进行坐标变换，不熟悉转换矩阵各个部分的含义的可参考图形学有关资料。

此文不必定是最佳算法，可是提供一种思路。转载请注明出处 全网@秋意正寒 。

平移思路

• 获取当前瓦片数据集的包裹范围（boundingSphere）中心（此时参考系是世界坐标）
• 计算当参考系是局部坐标时，此位置为原点的局部坐标系，到世界坐标的转换矩阵（eastNorthUpToFixedFrame）
• 利用上一步的转换矩阵，左乘一个局部平移向量，获得此平移向量在世界坐标系下的平移目标位置（矩阵×向量，结果是向量）
• 向量相减：世界坐标系下，指向平移目标点位的目标向量 - 指向数据集中心的向量，获得世界坐标系下的平移向量。
• 将世界坐标系下的平移向量转换成平移矩阵，赋予 tileset.modelMatrix

代码

tileset
  .readyPromise
  .then(tileset => {
    const tileset_center = tileset.boundingSphere.center; // Cartesian3
    const frompoint_to_world_matrix = Cesium.Transforms.eastNorthUpToFixedFrame(tileset_center); // Matrix4
    const local_translation = new Cesium.Cartesian3(310, -140, 10); // 向模型中心为原点，正北为y，正东为x，地心朝上为z分别平移 3十、-140、10米
    const result = new Cesium.Cartesian3(0,0,0);
    Cesium.Matrix4.multiplyByPoint(frompoint_to_world_matrix, local_translation, result); // 转换矩阵左乘局部平移向量，结果存储在 result 中，结果是世界坐标下的平移终点向量
    const targetpoint_to_world_matrix = Cesium.Transforms.eastNorthUpToFixedFrame(result);

    const world_translation = new Cesium.Cartesian3(
      targetpoint_to_world_matrix[12] - frompoint_to_world_matrix[12],
      targetpoint_to_world_matrix[13] - frompoint_to_world_matrix[13],
      targetpoint_to_world_matrix[14] - frompoint_to_world_matrix[14],
    ); // 向量相减，获得世界坐标下的平移向量

    tileset.modelMatrix = Cesium.Matrix4.fromTranslation(world_translation); // 构造平移矩阵并赋值
    viewer.zoomTo(tileset);
});

图解

解释：

• 红点：frompoint（地表点）
• 蓝点：targetpoint（frompoint局部坐标向东向北向上偏移各 3十、-140、10米 后获得的目标点）
• 红向量：地表点向量
• 蓝向量：目标点向量
• 绿向量：平移向量。若是是局部坐标，那么就是 (310, -140, 10)，若是是世界坐标下的，那就是 蓝向量 - 红向量

cesium 的场景数据最终都是世界坐标的，因此要求的是绿向量的世界坐标表达，而后构造平移矩阵。

如今是已知红向量和局部坐标的绿向量，要先求蓝向量，才能获得世界坐标的绿向量。

平移思路二

先平移到世界坐标中心，而后在世界坐标中心求平移，最后再移动回原点。

tileset.modelMatrix \(= M_{backToOrigin}·M_{localTranslation}·M_{moveToWorldCenter}\)

读者可自行实现。

旋转思路

局部旋转，应该先将模型移动到世界坐标中心，旋转后，再移动到原来的地方

即

tileset.modelMatrix \(= M_{backToOrigin}·M_{localRotate}·M_{moveToWorldCenter}\)

其中，\(M_{moveToWorldCenter}\) 是一个平移矩阵，只需使用模型中心向量取个负值便可

\(M_{backToOrigin}\) 则是从世界坐标中心再移动到模型原点

注意，这里是左乘优先顺序，从右往左乘。

旋转矩阵比较容易构造，就不细说了。

这个思路的计算量比较大！

效果图（绕模型自己x轴转90度）

代码

tileset
  .readyPromise
  .then(tileset => {
    const tileset_center = tileset.boundingSphere.center; // Cartesian3
    //console.log(tileset_center);
    const backto_matrix = Cesium.Matrix4.fromTranslation(tileset_center);
    const moveto_vec = Cesium.Cartesian3.multiplyByScalar(tileset_center, -1, new Cesium.Cartesian3());
    //console.log(moveto_vec);
    const moveto_matrix = Cesium.Matrix4.fromTranslation(moveto_vec);
    
    /* 绕x（即东方轴）转90度 */
    const cos_rotateX = Math.cos(Math.PI/2);
    const sin_rotateX = Math.sin(Math.PI/2);
    const arr = [1,0,0,0,  0, cos_rotateX, sin_rotateX,0,   0,-sin_rotateX,cos_rotateX,0, 0,0,0,1];
    const rotateX_matrix = Cesium.Matrix4.fromArray(arr);
  
    /* 计算最终矩阵 */
    const temp = Cesium.Matrix4.multiply(rotateX_matrix, moveto_matrix, new Cesium.Matrix4()); 
    const r = Cesium.Matrix4.multiply(backto_matrix, temp, new Cesium.Matrix4());
  
    tileset.modelMatrix = r; // 构造平移矩阵并赋值
    viewer.zoomTo(tileset);
});

能够看到会产生很是多中间变量，会引起 JS 的GC，并且矩阵计算自己也比较复杂。

缩放思路

缩放思路和旋转相似，先移动到世界坐标系中心，缩放，而后再移动到原来的地方

tileset.modelMatrix \(= M_{backToOrigin}·M_{localScale}·M_{moveToWorldCenter}\)

读者可自行实现。

注

思路不必定是最佳算法，有更高性能的算法可在评论区指出。