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

对载入的3dtiles进行旋转、平移和缩放变换。

article 2024/12/5 3:51:24

使用

params: {
      tx: 129.75845, //模型中心X轴坐标（经度，单位：十进制度）//小左
      ty: 46.6839, //模型中心Y轴坐标（纬度，单位：十进制度）//小下
      tz: 28, //模型中心Z轴坐标（高程，单位：米）
      rx: 0, //X轴（经度）方向旋转角度（单位：度）
      ry: 0, //Y轴（纬度）方向旋转角度（单位：度）
      rz: 1.6, //Z轴（高程）方向旋转角度（单位：度）小右
      scale: 0.8 //缩放比例
    },
  promise.then((result) => {
     this.update3dtilesMaxtrix(result, params) //改变位置
}

源码

 update3dtilesMaxtrix(tileset, params) {
    //旋转
    var mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(params.rx))
    var my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(params.ry))
    var mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(params.rz))
    var rotationX = Cesium.Matrix4.fromRotationTranslation(mx)
    var rotationY = Cesium.Matrix4.fromRotationTranslation(my)
    var rotationZ = Cesium.Matrix4.fromRotationTranslation(mz)
    //平移
    var position = Cesium.Cartesian3.fromDegrees(params.tx, params.ty, params.tz)
    var m = Cesium.Transforms.eastNorthUpToFixedFrame(position)
    //旋转、平移矩阵相乘
    Cesium.Matrix4.multiply(m, rotationX, m)
    Cesium.Matrix4.multiply(m, rotationY, m)
    Cesium.Matrix4.multiply(m, rotationZ, m)
    //比例缩放
    var scale = Cesium.Matrix4.fromUniformScale(params.scale)
    Cesium.Matrix4.multiply(m, scale, m)
    console.log('矩阵m:', m)
    //赋值给tileset
    tileset._root.transform = m
  },

这段代码展示了如何在 CesiumJS 中为一个 3D Tiles 模型应用旋转、平移和缩放变换，并通过 tileset._root.transform 将最终的变换矩阵应用到模型的根节点（_root）。我将逐步解析代码的作用，并解释它如何组合成一个变换矩阵来影响模型的变换。

代码解析：

1. 旋转变换：

var mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(params.rx));
var my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(params.ry));
var mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(params.rz));

这里首先为 X、Y 和 Z 轴上的旋转创建了三个 3x3 旋转矩阵。params.rx、params.ry 和 params.rz 分别表示绕 X、Y 和 Z 轴旋转的角度，单位是度。Cesium.Math.toRadians() 将角度转换为弧度，因为 Cesium 使用弧度作为角度单位。

var rotationX = Cesium.Matrix4.fromRotationTranslation(mx);
var rotationY = Cesium.Matrix4.fromRotationTranslation(my);
var rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);

Cesium.Matrix4.fromRotationTranslation() 用旋转矩阵 mx、my 和 mz 构建 4x4 变换矩阵，这样可以保持原始矩阵的 3x3 部分用于旋转，最后的平移部分默认为零，因为我们现在只关心旋转。

2. 平移变换：

var position = Cesium.Cartesian3.fromDegrees(params.tx, params.ty, params.tz);
var m = Cesium.Transforms.eastNorthUpToFixedFrame(position);

params.tx、params.ty 和 params.tz 分别是模型在 经纬度坐标系 中的平移量（经度、纬度、高度），单位是度。Cesium.Cartesian3.fromDegrees() 将这些经纬度值转换为 Cartesian3 坐标系中的坐标。
Cesium.Transforms.eastNorthUpToFixedFrame(position) 返回一个 从指定位置到地球坐标系的变换矩阵。这个矩阵将模型的局部坐标系（East-North-Up 坐标系）转换为世界坐标系（FixedFrame）。它用于将模型从地理坐标系中转换到地球固定坐标系中。

3. 旋转和平移矩阵的组合：

Cesium.Matrix4.multiply(m, rotationX, m);
Cesium.Matrix4.multiply(m, rotationY, m);
Cesium.Matrix4.multiply(m, rotationZ, m);

通过多次调用 Cesium.Matrix4.multiply()，将平移矩阵 m 和旋转矩阵（rotationX、rotationY 和 rotationZ）依次相乘。矩阵乘法遵循从右到左的顺序，即首先应用绕 Z 轴的旋转，然后是绕 Y 轴的旋转，最后是绕 X 轴的旋转。

4. 缩放变换：

var scale = Cesium.Matrix4.fromUniformScale(params.scale);
Cesium.Matrix4.multiply(m, scale, m);

Cesium.Matrix4.fromUniformScale(params.scale) 创建一个均匀缩放矩阵，其中 params.scale 是缩放因子。均匀缩放表示在所有轴上使用相同的比例因子。
Cesium.Matrix4.multiply(m, scale, m) 将缩放矩阵应用到之前的变换矩阵 m 上，完成缩放操作。