三维模型平移缩放旋转

三维模型高度调整

export const osgbData = async (viewer: Cesium.Viewer) => {
  let tileSet = viewer.scene.primitives.add(
    await Cesium.Cesium3DTileset.fromUrl(
      "../../../src/assets/data/osgb/tileset.json",
      // "http://localhost:9003/model/tkixw5aqX/tileset.json",
      {}
    )
  );
  //高度调整
  heightChange(tileSet, -45);
  viewer.flyTo(tileSet); //定位过去
};

// 倾斜模型高度调整方法
export const heightChange = (
  tileset: Cesium.Cesium3DTileset,
  height: number
) => {
  // 将 3D Tiles 模型的外包围球中心点从笛卡儿空间直角坐标转换为弧度表示
  const cartographic = Cesium.Cartographic.fromCartesian(
    tileset.boundingSphere.center
  );
  //3D Tiles 模型的外包围球中心点原始坐标在表面的坐标
  const surface = Cesium.Cartesian3.fromRadians(
    cartographic.longitude,
    cartographic.latitude
  );
  //3D Tiles 模型的外包围球中心点坐标偏移
  const offset = Cesium.Cartesian3.fromRadians(
    cartographic.longitude,
    cartographic.latitude,
    height
  );
  //计算两个笛卡儿分量的差异
  const translation = Cesium.Cartesian3.subtract(
    offset,
    surface,
    new Cesium.Cartesian3()
  );
  console.log("tileset", tileset, surface, offset, "translation", translation);
  //创建一个表示转换的 Matrix4
  tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
};

三维模型平移与旋转

//三维模型操作例子整合
export const osgbData = async (viewer: Cesium.Viewer) => {
  let tileSet: any;
  try {
    tileSet = viewer.scene.primitives.add(
      await Cesium.Cesium3DTileset.fromUrl(
        "../../../src/assets/data/osgb/tileset.json",
        // "http://localhost:9003/model/tkixw5aqX/tileset.json",
        {}
      )
    );
  } finally {
    // 2.旋转和平移
    let params;
    let cartographic = Cesium.Cartographic.fromCartesian(
      tileSet.boundingSphere.center //倾斜摄影模型外包围球中心
    );
    params = {
      tx: Cesium.Math.toDegrees(cartographic.longitude), //模型中心 X 轴坐标
      ty: Cesium.Math.toDegrees(cartographic.latitude), //模型中心 Y 轴坐标
      tz: cartographic.height, //模型中心 Z 轴坐标
      rx: 0, //X 轴（经度）方向旋转角度（单位：度）
      ry: 0, //Y 轴（纬度）方向旋转角度（单位：度）
      rz: 60, //Z 轴（高程）方向旋转角度（单位：度）
    };
    tileSet._root.transform = update3dtilesMaxtrix(params!);
    viewer.flyTo(tileSet); //定位过去
  }
};

// 倾斜模型平移和旋转
interface translateRotateType {
  tx: number;
  ty: number;
  tz: number;
  rx: number;
  ry: number;
  rz: number;
}
//旋转平移方法
export function update3dtilesMaxtrix(
  // tileset: Cesium.Cesium3DTileset,
  translateRotate: translateRotateType
) {
  // let cartographic=Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center)
  //旋转
  let mx = Cesium.Matrix3.fromRotationX(
    Cesium.Math.toRadians(translateRotate.rx)
  );
  let my = Cesium.Matrix3.fromRotationY(
    Cesium.Math.toRadians(translateRotate.ry)
  );
  let mz = Cesium.Matrix3.fromRotationZ(
    Cesium.Math.toRadians(translateRotate.rz)
  );
  let rotationX = Cesium.Matrix4.fromRotationTranslation(mx);
  let rotationY = Cesium.Matrix4.fromRotationTranslation(my);
  let rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);
  //平移
  let position = Cesium.Cartesian3.fromDegrees(
    translateRotate.tx,
    translateRotate.ty,
    translateRotate.tz
  );
  let m = Cesium.Transforms.eastNorthUpToFixedFrame(position);
  //将旋转矩阵和平移矩阵相乘
  Cesium.Matrix4.multiply(m, rotationX, m);
  Cesium.Matrix4.multiply(m, rotationY, m);
  Cesium.Matrix4.multiply(m, rotationZ, m);
  //返回旋转平移结果矩阵
  return m;
}

三维模型缩放

export const osgbData = async (viewer: Cesium.Viewer) => {
  let tileSet;
  tileSet = viewer.scene.primitives.add(
    await Cesium.Cesium3DTileset.fromUrl(
      "../../../src/assets/data/osgb/tileset.json",
      // "http://localhost:9003/model/tkixw5aqX/tileset.json",
      {}
    )
  );
  // 缩放
  let m;
  let mStar;
  // 1)定义缩放比例
  let scale = 0.6;
  // 2)得到外包围球中心点坐标
  let cartographic = Cesium.Cartographic.fromCartesian(
    tileSet.boundingSphere.center
  );
  // 坐标变换为 Cartesian3 类型
  let surface = Cesium.Cartesian3.fromRadians(
    cartographic.longitude,
    cartographic.latitude,
    cartographic.height
  );
  // 3)以提供的原点为中心计算 4＊4 变换矩阵
  m = Cesium.Transforms.eastNorthUpToFixedFrame(surface);
  // 4)记录模型初始变换矩阵，放大和缩小均以此为基础
  mStar = tileSet._root.transform;
  // 5)定义缩放比例
  const _scale = Cesium.Matrix4.fromUniformScale(scale);
  // 6)调用缩放函数
  Cesium.Matrix4.multiply(mStar, _scale, m);
  tileSet._root.transform = m;
  viewer.flyTo(tileSet); //定位过去
};